随着移动智能手机的普及,人们与屏幕之间的接触变得越来越频繁与亲密。而正是这一崭新的领域为
UI设计的发展带来新的机遇,而这对于从事UI设计的设计师们将出现怎样的全新挑战?
关键词:移动应用,UI设计,用户界面设计,拟物化与扁平化
正文:
近几年随着数字技术与网络的飞速发展,身边的朋友都几乎人手拥有一到两台智能手机。他们每天睁开眼的
第一件事,或许是点击屏幕刷新微信朋友圈的最新状态;上班在公交车上必做的一件事,或许是滑动屏幕刷
新微博的最新资讯。而在这些日渐熟悉并依赖的屏幕触碰行为当中,大家是否有想过微博的刷新按钮为什么
会在右上角?微信的按住说话按钮为什么要设置在屏幕下面?是否有想过为什么iphone下面只有一个home
键而三星手机有三个?而这些问题都是在我还没接触iDJ这个项目之前不曾主动去思考过的。
什么是移动应用UI设计
首先我们要知道什么是UI,UI即User Interface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻
辑、界面美观的整体设计。在当下的数字娱乐生活中,到处都能找到UI设计的身影,如卡拉OK厅的点歌屏
幕、地铁线路查询控制屏、商场电子导览屏、智能手机触控屏、平板电脑触控屏等等。而移动应用UI设计则
是以移动设备如手机、平板电脑等电子媒介作为载体的设计。而一个好的移动应用UI设计不仅是让界面视觉
元素变得有个性有品味,还要让界面的操作变得简单、方便、自由、舒适,需要充分体现移动产品的定位和特
点。本文所思考的移动应用UI设计则需要设计师更多的考虑到人的手势操作及行为习惯。
2,UI 设计并不是指图标的绘制
其实说到UI设计,就连我自己在刚开始执行项目之前也会把UI理解为画ICON(图标),自己之前合作过的很
多朋友,像一些做程序开发的朋友,联系合作做一些界面时或者说画一个好看的界面或者说美化一下界面,
都只是想着如何运用PS的各种特效渐变投影高光,对UI的理解甚为肤浅。经过了iDJ项目的设计,我理解到真
正的UI更多是与交互设计互相依存的,必须对人的行为有所熟悉和研究。如图表2最终版设计与图表3第一版
设计的对比变化中,我们可以看出,除了整体色彩风格的变化之外,按钮的设置位置是经过了精心的调整设
计的。考虑到该产品的核心特色,主要是要让用户能够轻松自如的录制一段具有个人特色的能够表达个人情
感的声音,来介绍分享自己喜欢的一首音乐。本人把录音按钮设置在界面中最为显眼并最能让用户第一时间
单手点击的位置,而其他的附属功能如拍照及文字介绍按钮则设置在制作界面的次要位置。同时,把选歌、
拍照、添加介绍、录音整个节目制作的流程用一条时间线的方式串联起来。以方便用户知道整一个微电台节
目制作的流程。在这些流程中录音是必不可少的。而在初稿的设计中并未能够让用户在第一时间感知节目制
作的主次。而在色彩选择上,从初稿到正式版的设计,确实经历了一段争论与挣扎。
真正完美的移动UI设计必须对交互设计的理解很到位。做的东西也许看上去不是很绚,但是用起来要感觉非
常顺手。那么,我们花费心思设计的再美丽炫目的界面,也
将被永远打入冷宫。所以,真正的移动UI设计必须紧密结合交互方面的更为广泛的知识,不能仅仅单纯的针
对个人的喜好去进行图形构图和色彩选用,更多的是要结合人类行为心理学、社会学方面的知识。其实本人
做UI设计也是经过了这么一个过程,一开始在设计初稿的时候就有一个信念,做出来的图不吓人一跳就不满
足,酷、炫、美是终极追求。可是经过了大半年的不断修改讨论再设计,我知道UI设计所包括的东西还有很
多。
3,界面设计中需要注意的小细节
常说“细节决定成败”,有些界面会让人觉得不精致,缺细节,而自己做的第一个应用界面设计初期也曾经
被人这样批评过。界面设计的细节到底包括哪些呢?如何去深入呢?经过一段时间的磨练及反思,本人也总
结了一下几个小点:
(1)对齐界面元素 我见过很多朋友做对齐是靠半眯眼睛的。确实在布局的时候经常需要做到视觉上的对
齐,而不是机械的对齐,但这并非界面元素可以随意摆放的借口,该对齐的内容还是需要对齐,其实只要显
示参考线就完全可以把界面元素进行合理的对齐。
(2)精确每一个像素 虽然现在的分辨率越来越高,但是很多图标、按钮的边缘还是最好都检查一遍,保证
垂直和水平边缘不会被虚化;这一点上,自己在做某一个版本的修改的时候就没有注意,导致添加节目制作
按钮边缘显示效果不理想。
(3)让界面光源方向保持一致 一致性是大课题,需要用一整篇论文来论述。而细节方面的一致性应该包括
界面元素、文字阴影、图标等的光源。假设深色的标题文字用了向下的淡色投影表现内凹效果,那正文就应
该避免用深色的文字向上投深色的阴影。而按钮的设置亦然。
(4)保持图标面积的一致性 这也是一个难以避免的问题,而且有很多时候是主观感受作祟,最好的方法是
设计的时候放到实际屏幕上以较远的距离查看,是不是有哪些会特别轻或特别重,然后再去调整尺寸。而
且,还要特别注意在反复修改过程中可能出现的位置误差。
(5)文案 虽然这不是直接的界面设计元素,但是严谨、完整的文案也是给所有设计加分的。常见的问题有
中文错别字、英文该大写的没大写、拼写错误等等。
(6)不要在ios的应用中直接使用 Windows 自带宋体 / 黑体里的英文!这个,我在一开始设计的时候并没
有重视,等收到程序开发人员发来的产品测试包后,看着别扭的界面,我才猛然发觉,我做的是苹果的应
用!所以,在设计初始清楚了解自己的客户以及产品依托的平台以及竞争对手的信息都是很重要的。
(7)谨慎地使用高饱和度颜色、大差别渐变 设计师很多时候总喜欢把自己当做艺术家,想用艺术家的思维
特点去设计产品,但我发现移动应用产品UI设计仍是限制很大的一门艺术。我们大部分情况下,都不会有非
常大的颜色空间去发挥,所以一些醒目出跳的颜色和渐变使用起来要十分讲究,否则很容易产生“俗气”的
感觉;或者说很多时候色彩的选用还是要考虑到产品的特点以及目标使用群体特点,而不能仅仅只是展现设
计师本人的个性特点。从初稿到最终稿的转变,色彩对比度跨度如此之大,自己也是经历了种种无奈以及妥
协。但产品上线之后,我发现还是最终版呈现的气质更为符合这个产品的特性。可以说,要让移动产品做得
细致有效就需要懂得在过程中学习,在修改中反思,在反馈中总结。
4 , 移动UI设计趋势:从拟物化到扁平化设计
移动设备的屏幕只不过是人们五指间有限的方寸之地,设计者必须考虑如何做到返璞归真,把那些花俏的修
饰和多余的内容去掉,优先确保对内容和用户体验影响最大的功能呈现。从一贯喜爱引领时尚的苹果公司今
年最新发布的ios6系统UI界面中,我们可以看到目前移动UI设计的潮流已然从拟物化的再现转为扁平化的表
现。设计师们已经意识到,没有必要再坚持把现实生活中的对象按照原貌照葫芦画瓢地挪进数字空间中。扁
平化设计并不是为了压扁而压扁的,它是一种设计理念,色块是它的外在表现形式。