|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| [ work ] | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Company Designs |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Mar.01, 2011 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| app design 「 应用设计 」 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Times , 11.03.01 - 11.03.17 |
Name , 公积金计算器 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
这是两款实用计算器的设计,应该说是目的性比较明确的表单设计,专业性的文字比较多,有些还需要一些提示,所以界面上要去除一切干扰信息的部分。 百度做的所有设计全部是外面的环境上,没有和产品产生关系,这样除了让界面更加混杂外再没什么用途了。还有些开发者,删除了所有的视觉信息,这也是没有必要的。这样只能仅仅能用,还谈不上好用。 视觉元素设计的重点要放到去支撑结构、组织、信息类别的区分和表的可读性。一个精心设计的表,很容易扫描信息,并从大量的数据中查找项目,清晰的辨别项目的条数。 以下是我对这个表单的改动。第一,在下拉选框的设计的时候我尝试了两种纬度的设计,一是凹陷,二是凸起。第一种在直观的视觉上容易和输入框相互混淆,而且上面的文字是去除锯齿的很容易让人误解为是否这地方还可以输入文字。而凸起的会给人一种很简单,易用的印象,想点选他的欲望要比凹下去的强烈,同输入框也可以清晰的区分开来。 第二,我把选择框和他前面的小标题整和到了一起这样使得信息成块状展示,而不是一些散点,使用起来更加清晰。 第三,在这个应用中我不会去默认的填写在输入框信息,因为这样会使得输入框不明显。而且会误导用户这里已经填好数值。 第四,开始计算的按钮位置展示方式,要体现出是对上面信息的一个集合结果,所以我用另一个层次来表现这种关系。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ︿ v2.0在每个选项的界面的UE上做了一次而尝试和改动。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Times , 11.04.10 - 11.04.21 |
Name , 手机号吉凶、手机号归属地查询 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
手机号码吉凶查询和归属地查询是两个一系列的app,都是以手机号码为内容,进行的后台数据的操作。在这里主要谈一下设计的思维和想法。 手机归属地查询道理是和上面的一样,为了解决首页空白问题。设计上营造了一个在地图上用大头针找地址的环境,海洋和陆地,给人一种地理信息的暗示。我在设计之前使用了一下其他人做的这个功能,在我没点击确定之前我并不知道能出查询出来什么信息,但输入之后我觉得这个应用还挺有意思。但可能缺少了点与预知性,于是我就做了一些icon来说明能够查出的内容,之所以没有一字排开是因为那样会让人误解为可以点击的icon。 这个界面最后还被一家公司完全盗版了一下,百度也不去说... |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ︿ 通过视觉设计对首页用户为输入信息时的体验问题进行解决。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Times , 11.06.28 - 11.07.6 |
Name , 二十四节气 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
十二节气这个产品我改动比较大,看线框图给人一种不能亲近的感觉,这么简单的一个需求做成这样...我从新设计产品和交互。出发点首先清晰的把节气按季节分清,这样便于用户方便的查询到自己所要了解的节气。按节气查询日期的功能要和下面的节气展示界面分开,但要明显,因为他是另一种需求。 设计方面用了最亲近与大自然的元素,木头和帆布,这两个质感温顺和蔼,又通过单纯柔和的图案和颜色来区分季节。节气的名称用了黄历上常用的姚体,旁边的边缘线有一些蹭旧了的效果,增加了一些沧桑感。 在第一版做好后界面整体简洁清晰,我还算满意。但这是一个即时内容的应用,同万年历一样人们点开最大的需求是看目前的节气时间和相关的生活知识。那么第一版没有直观的满足用户的这个需求。产品方面根据关键词的搜索量,带过来了一些需求上的统计调研结果,发现节气中人们关心的是当前的节气时间、吃什么、来历、由来、习俗。第二版加入了即时这一状态的功能区域。后期我想了一下也不能说产品没及格,及格的产品就是根据数据提出用户的一些需求,真正怎么展示给用户,怎么让用户使用的更舒服是交互和设计的工作。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ︿ v2.0在用户的需求上对界面进行了修改。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Times , 11.04.16 - 11.04.23 |
Name , 网速测试 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
这是一个早期的项目,为了是替换掉线上已有的网速测试,也是设计上我比较喜欢的应用。线上的网速测试是用一个汽车的速度表盘来做的设计,这是一个国外设计师做的UI设计,被国内的人直接copy过来。我觉得也还不错,但有些牵强和做作,因为在测速过程中的动画表针左右摇摆和网速给人的感受不一样。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ︿ 对枯燥的测试结果展示方式在设计上进行趣味性的表达。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Times , 11.04.30 - 11.05.03 |
Name , 在线翻译 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
翻译这个产品的内核是google的。设计的初衷要单纯的做出一个好用的工具,不需要任何多余的装饰。工具的本身特使给人一种金属感的印象,所以就选用类似金属铝的颜色来做底色,图标饱和度之间尽量选择饱和度高的互补色,这样可以紧靠图标的形态就区分好功能区。翻译这个应用分为两个不同的功能区域,一个是输入文本区,一个是通过app翻译之后显示的结果区域。从本质上讲这两个一个是输入的一个是显示的,所以在视觉和交互上我才用了两种不同的设计来区分它们。向下凹的输入框来表示输入文本区域。下面我仿造本子上的横格线来表示这部分出现的文字是不能控制和编辑的,在加上前面清晰的icon。这样人们就会第一眼就会用软件的用法。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ︿ 比起v2.0我本身更喜欢v1.0的设计,简捷清晰。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||