time
   
     
  [ work ]
 
 
     
 
web design
ing >
 

PD010 原版设计书籍网站 ...

TD's web 导航设计与尝试 ...

学而思网校改版后的建议 ...

学而思网校站内banner VI设定 ...

IA+UI ` 大型网站的优化革命` 1 ...

IA+UI ` 大型网站的优化革命` 2 ...

IA+UI ` 大型网站的优化革命` 3 ...

E度网"小学生日记与口算“专题页 ...

Alite's blog 及栅格wvi ...

E度网内容页统一风格定位 ...

T..B...社交网站首页改版 ...

陈家刚个人网站设计 ...

a simple clock for iphone ...

有趣网形象设计 Cor - 1 ...

有趣网形象设计 Cor - 2 ...

基于百度app平台的应用设计 - 1 ...

基于百度app平台的应用设计 - 2 →

基于百度app平台的应用设计 - 3 ...

基于百度app平台的应用设计 - 4 ...

基于百度app平台的应用设计 - 5 ...

基于百度app平台的应用设计 - 6 ...


-
banner & ad
more >
 
Dolcey, 道喜红酒圣诞促销活动 ...

-
graphic design
more >
 

City colour 城市艺术设计试验 ...

iPhone 3G 教学平台设计 ...

Gray City 济南市环境 ...

人民画报封面整合信息设计 ...


Chen Shizuo's dream ...


后海导视再设计 ...

SKELETON' 骸 ' 店logo ...

Supper School badge ...

IKEA 价签展示设计探讨 ...

国家大剧院海报设计 ...

Mˋ麦茉ˊ服装品牌logo设计 ...

李富强长篇小说封面设计 ...

Artrade 嘉德在线海报设计 ...

OA News letter 三星折页设计 ...

UI design for myself ...

Plate's details 版式比例关系研究 ...

TD's card 个人名片设计 ...

EDUU 编辑们的IDcard ...

EDUU LOGO设计 ...

 

Company Designs
app design for baidu
-

 
  Mar.01, 2011
 
     
  app design 「 应用设计 」

http://www.app.baidu.com

   
     
   
     
  Times ,
11.03.01 - 11.03.17
  Name ,
公积金计算器
         
     
 

这是两款实用计算器的设计,应该说是目的性比较明确的表单设计,专业性的文字比较多,有些还需要一些提示,所以界面上要去除一切干扰信息的部分。
前期想法简单不太深入,简洁的做了界面和butten,但总觉得还可以更加清晰易用。
隔了一段时间后在整理资料时做了第二版的尝试,这次以只显示用户真正需要看到的信息为目标,使用镶嵌、叠加、对齐、分隔把提示信息、输入框、结果信息用视觉元素和版式关系加以区分。做到用户以扫描的行为去浏览网页,减少用户阅读信息的成本。

百度做的所有设计全部是外面的环境上,没有和产品产生关系,这样除了让界面更加混杂外再没什么用途了。还有些开发者,删除了所有的视觉信息,这也是没有必要的。这样只能仅仅能用,还谈不上好用。

视觉元素设计的重点要放到去支撑结构、组织、信息类别的区分和表的可读性。一个精心设计的表,很容易扫描信息,并从大量的数据中查找项目,清晰的辨别项目的条数。

以下是我对这个表单的改动。第一,在下拉选框的设计的时候我尝试了两种纬度的设计,一是凹陷,二是凸起。第一种在直观的视觉上容易和输入框相互混淆,而且上面的文字是去除锯齿的很容易让人误解为是否这地方还可以输入文字。而凸起的会给人一种很简单,易用的印象,想点选他的欲望要比凹下去的强烈,同输入框也可以清晰的区分开来。

第二,我把选择框和他前面的小标题整和到了一起这样使得信息成块状展示,而不是一些散点,使用起来更加清晰。

第三,在这个应用中我不会去默认的填写在输入框信息,因为这样会使得输入框不明显。而且会误导用户这里已经填好数值。

第四,开始计算的按钮位置展示方式,要体现出是对上面信息的一个集合结果,所以我用另一个层次来表现这种关系。

 
   
   
     
   
     
   
︿ v2.0在每个选项的界面的UE上做了一次而尝试和改动。
 
Times ,
11.04.10 - 11.04.21
  Name ,
手机号吉凶、手机号归属地查询
 
 

手机号码吉凶查询和归属地查询是两个一系列的app,都是以手机号码为内容,进行的后台数据的操作。在这里主要谈一下设计的思维和想法。
手机号码吉凶查询:要凸显出中国的气氛,带金边的红绸子和金色的按钮,并给人一种喜庆之感。用绸子的第二个目的是为了解决版式上的问题,因为在用户刚代开应用界面时,再没有输入电话号码之前下面是一片空白的,如果放一些例子上去又会迷惑用户不能清晰的表现出应用的当前状态。所以绸子就像是一个把答案蒙住的神秘的魔术布,当用户输入后点击查询,就像是把绸子揭开,同时下面的答案也自然的显示了出来。关于icon的设计从平面上揭起一个“吉”字给人一种往起上升的感觉。

手机归属地查询道理是和上面的一样,为了解决首页空白问题。设计上营造了一个在地图上用大头针找地址的环境,海洋和陆地,给人一种地理信息的暗示。我在设计之前使用了一下其他人做的这个功能,在我没点击确定之前我并不知道能出查询出来什么信息,但输入之后我觉得这个应用还挺有意思。但可能缺少了点与预知性,于是我就做了一些icon来说明能够查出的内容,之所以没有一字排开是因为那样会让人误解为可以点击的icon。

这个界面最后还被一家公司完全盗版了一下,百度也不去说...

 
 
 
 
 
︿ 通过视觉设计对首页用户为输入信息时的体验问题进行解决。
 
Times ,
11.06.28 - 11.07.6
  Name ,
二十四节气
       
 

十二节气这个产品我改动比较大,看线框图给人一种不能亲近的感觉,这么简单的一个需求做成这样...我从新设计产品和交互。出发点首先清晰的把节气按季节分清,这样便于用户方便的查询到自己所要了解的节气。按节气查询日期的功能要和下面的节气展示界面分开,但要明显,因为他是另一种需求。

设计方面用了最亲近与大自然的元素,木头和帆布,这两个质感温顺和蔼,又通过单纯柔和的图案和颜色来区分季节。节气的名称用了黄历上常用的姚体,旁边的边缘线有一些蹭旧了的效果,增加了一些沧桑感。

在第一版做好后界面整体简洁清晰,我还算满意。但这是一个即时内容的应用,同万年历一样人们点开最大的需求是看目前的节气时间和相关的生活知识。那么第一版没有直观的满足用户的这个需求。产品方面根据关键词的搜索量,带过来了一些需求上的统计调研结果,发现节气中人们关心的是当前的节气时间、吃什么、来历、由来、习俗。第二版加入了即时这一状态的功能区域。后期我想了一下也不能说产品没及格,及格的产品就是根据数据提出用户的一些需求,真正怎么展示给用户,怎么让用户使用的更舒服是交互和设计的工作。

 
 
︿ v2.0在用户的需求上对界面进行了修改。
 
Times ,
11.04.16 - 11.04.23
Name ,
网速测试
 

这是一个早期的项目,为了是替换掉线上已有的网速测试,也是设计上我比较喜欢的应用。线上的网速测试是用一个汽车的速度表盘来做的设计,这是一个国外设计师做的UI设计,被国内的人直接copy过来。我觉得也还不错,但有些牵强和做作,因为在测速过程中的动画表针左右摇摆和网速给人的感受不一样。

我做的这个设计是一个悬浮在空中的测速器,对于动画的效果就是一个测速条在匀速的运动,简单而说名问题,而不像是线上的应用上面是左右摇摆着的指针,给人一种不稳定性。用户会因为你这指针的运动直接投射到自己的网速之上,而这实际是永远不变的动画效果没有任何的准确性。

整个UI都是自己从无到有画出来的,强调一种科技的技术感和光感,让人觉得这很酷很不一样。这样会记住你,假设放上去的是一台电脑,枯燥无味,自然不会被人记住。

网速的级别使用了趣味的表现方法,通过及格小人的表情来说明网速的快慢,这样给人一种轻松愉快的是用情景。在测试完之后上端用一个说话的效果来说明具体的网速值,同时相对应的表情也会出现在上面,这时你可以把他分享出去,当外面的人们看到这表情时会对他感兴趣,这种好奇心可以引来更多的用户尝试和使用。
产品要做到有情感在里面,当然你也会说做个想360下面的星级那样的更清晰一些,我想说这从使用上说没问题,但这不是我的习惯也不是我的哲学。

 
 
︿ 对枯燥的测试结果展示方式在设计上进行趣味性的表达。
 
Times ,
11.04.30 - 11.05.03
  Name ,
在线翻译
 

翻译这个产品的内核是google的。设计的初衷要单纯的做出一个好用的工具,不需要任何多余的装饰。工具的本身特使给人一种金属感的印象,所以就选用类似金属铝的颜色来做底色,图标饱和度之间尽量选择饱和度高的互补色,这样可以紧靠图标的形态就区分好功能区。翻译这个应用分为两个不同的功能区域,一个是输入文本区,一个是通过app翻译之后显示的结果区域。从本质上讲这两个一个是输入的一个是显示的,所以在视觉和交互上我才用了两种不同的设计来区分它们。向下凹的输入框来表示输入文本区域。下面我仿造本子上的横格线来表示这部分出现的文字是不能控制和编辑的,在加上前面清晰的icon。这样人们就会第一眼就会用软件的用法。

 
 
 
︿ 比起v2.0我本身更喜欢v1.0的设计,简捷清晰。
 
       
TOP   < prev work
基于百度app平台的应用设计- 1 ...
  Next work >
基于百度app平台的应用设计- 3 ...
 
       
©2010 TD个人网站