FOR MORE INTERNATIONAL DESIGN IDEAS AND EDGE - CUTTING VISIONS
PLEASE CONTACT ME WITH

This real-time application is a self-motivated work I made with some of my colleagues in our spare time. It was put into application before the beginning of the 2012 European Cup. Ranking the 5th among similar applications being recommended by various portals and applications of the official website, it’s an information recording application which is synchronous with the competition. By the help of its real-time information, people were able to know about the competition in an instant manner.

There are mainly 3 hierarchies for the information, namely, real-time competition information transmission, summarized data comparison and the transmission of information on relevant knowledge. With information including starting line-up of competitors, scores of the competition, and incidences(red and yellow cards, penalty kicks, player changes), the first one is updated instantly.

The second one is about the comparison of data summaries(of top-scorer standings, top-ballhandlers and the like) collected from the beginning of the competition to a certain moment. The third one is about information of national teams and their players.

Later, interactive modules such as “score guessing” module and functions including share and comment functions were added into this application. But they are not showed in detail here.

This version of the application is an optimized one. This is more advanced than the online version. During the design of it, I tried to display the architecture of the football field on the interface.The dark brown land beneath the turf is in the interface at the bottom layer, with the turf showing the main part of the competition. The uppermost is a pop-up layer, showing accumulation and comparison situations of data.  In this way the atmosphere of the real football field is restored in a more accurate and vivid manner.

The interaction operation adopts traditional hand gestures. In terms of dealing with information of the same level, for example, dealing with information of the knowledge category, right-and-left sliding hand gesture is used. While in the dealing of information of different categories, a pop-up layer is used, so as to be distinguished from the current layer. The design of the competition List adopts this way.

Different icons are designed with different visual effects. Non-clickable icons are designed as a part of the text information. Icons as the result of single line skeuomorphic design are clickable  and distinguished from the heading area. And simulation technology is also applied in the design of this part.

The difference between simulation and skeuomorphic designs lies in that skeuomorphic design is about the minimalist refining of objects in real life. And the advantage of skeuomorphic design is that it may help users use their experience of internet product use to identify the implied meanings of some abstract icons. For example, five-pointed star is generally used as a prioritizing mark or referring to high-quality and well concerned contents. Skeuomorphic design is capable of creating a sound atmosphere and reducing the cost for speculation by providing users with the opportunity to understand icons’ meanings with their past life experiences.

这个是一个自发项目,和几个同事在工作之余做的一个即时性的小应用。在2012欧洲杯开赛之前完成上线,并且取得了各大门户网站推荐和官方平台前5的排名。它是一款和欧洲杯赛程同步的信息纪实类应用,时效性的信息帮助人们在第一时间取得比赛的情况。

总体的信息层级分为三大块:即时性比赛信息专递;总结性数据对比;知识性信息传达。第一块是即时更新的,比如比赛手首发的阵容,进行中当前的比分,当前的比赛事件(红黄牌,点球,换人等)。第二是从比赛开始到当前的数据总和对比,比如最佳射手榜,最佳控球榜。第三是国家队和队员的信息。后期加入了猜比分等互动的模块,分享和评论等,这里没有具体的展示。

这版是我后期优化过的,比线上的版本更成熟一些。设计方面是根据足球场地的结构移植到了界面的展示上,最底层界面是草皮下面的深褐色土地,草皮上展示出球赛的主体内容,最上一层是弹出层,表现出一些数据的积累和对比。这样更加准确的还原了比赛时的气氛。

交互上运用了传统的手势,如果信息是同一级别的,比如同样是知识类的信息族就会采用左右滑动的手势。如果是不同信息的类别就会弹出式层级来与当前的层级区分开来,比如说榜单的设计。

对于图标的设计形式也有视觉上的区分,不可点击的图标是融入到文字信息中,采用拟真化的设计。可以点击的是和标题区分开来采用单线的拟物化设计。拟真和拟物的区别在于拟物化是现实当中物体的极简提炼,他的优势是可以利用用户以前对互联网产品的使用经验来辨别一些比较抽象的图标寓意,比如五角星一般是重点标记或关注的、优质的。拟真化设计优势是可以营造一个很好的氛围,并且让用户很清晰的从生活习惯中了解图标的意思,降低了猜测的成本。

UEFA Euro 2012 App