UI设计需要了解的十大准则
UI设计需要了解的十大准则
格式化内容
创建屏幕布局的时候,应该适适配iOS设备屏幕。用户应该一次看清主要内容,而无需缩放或水平滚动触摸控制尽量采用专门为触摸和手势设计的界面元素,这样可以使应用程序的交互更加轻松自然。
命中目标
设计可触控的控件的时候,尺寸不得小于44x44px,只有这样才能确保触摸的精度和命中率。
字体尺寸
文本中的文字尺寸不得小于11点,这样才能确保在常规距离下,无需缩放就可以清晰地阅读。
对比度控制
尽量确保文字色彩对比更明显,并且调整文字与背景的对比提高可读性。
间距调整
不要让文字出现重叠的状况。适当地增加行高和行间距,提高文字的易读性。
高分辨率
为所有图片资源提供高分辨率的版本。那些未曾@2x的图像在Retina屏幕上会出现模糊的状况。
防止拉伸
始终控制好图片的高宽比,可以缩放,但是一定要避免拉伸,这样可以避免失真。
信息架构
创建易于阅读易于调整的布局,确保界面内容的可调整性。
保持对齐
让文本图片按钮在界面上保持对齐,相似相关内容合理靠近,让用户更容易理解界面信息。
简易性
界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。
用户语言
界面中要使用能反应用户本身的语言,而不是游戏设计者的语言。
记忆负担最小化
人脑不是电脑,在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆极不稳定、有限,24小时内存在25%的遗忘率。所以对用户来说,浏览信息要比记忆更容易。
一致性
是每一个优秀界面都具备的特点。界面的结构必须清晰且一致,风格必须与游戏内容相一致。
清楚
在视觉效果上便于理解和使用。
用户的熟悉程度
用户可通过已掌握的知识来使用界面,但不应超出一般常识。
从用户习惯考虑
想用户所想,做用户所做。用户总是按照他们自己的方法理解和使用。
通过比较两个不同世界(真实与虚拟)的事物,完成更好的设计。如:书籍对比竹简。
排列
一个有序的界面能让用户轻松的使用。
安全性
用户能自由的作出选择,且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。
灵活性
简单来说就是要让用户方便的使用,但不同于上述。即互动多重性,不局限于单一的工具(包括鼠标、键盘或手柄、界面)。
人性化
高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统,即用户可依据自己的习惯定制界面,并能保存设置。

UI设计之设计原则
做什么都有原则,当然UI设计也有它的原则。
1.简易性
界面的简洁是要让用户便于使用、便于了解产品,并能减少用户发生错误选择的可能性。
2.用户语言
界面中要使用能反映用户本身的语言,而不是游戏设计者的语言。
3.记忆负担最小化
人脑不是电脑,在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆有限且极不稳定,24小时内存在约25%的遗忘率。所以对用户来说,浏览信息要比记忆更容易。
4.一致性
它是每一个优秀界面都具备的特点。界面的结构必须清晰且一致,风格必须与产品内容相一致。
5.清楚
在视觉效果上便于理解和使用。
6.用户的熟悉程度
用户可通过已掌握的知识来使用界面,但不应超出一般常识。
7.从用户习惯考虑
想用户所想,做用户所做。用户总是按照他们自己的方法理解和使用。
通过比较两个不同世界(真实与虚拟)的事物,完成更好的设计。如:书籍对比竹简。
8.排列
一个有序的界面 能让用户轻松的使用。
9.安全性
用户能自由的作出选择,且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。
10.灵活性
简单来说就是要让用户方便的使用,但不同于上述。即互动多重性,不局限于单一的工具(包括鼠标、键盘或手柄、界面)。
11.人性化
高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统,即用户可依据自己的习惯定制界面,并能保存设置。
UI设计中的色彩运用研究
1 UI设计中色彩的功能
色彩作为视觉传达中非常重要的要素在UI设计中具有非常重要的作用,可以归纳为以下几个方面。
1)显示界面的整体架构
一个UI界面总是借助图形化的外观直接作用于客户的视觉系统。用户接触一个UI界面,看到的往往是一个由底色、其他几何色块、图标、按钮等元素构成的图形符号系统。用色彩可以非常直观的凸显出背景、导航栏、状态栏,按钮等构成元素,并显示出UI界面的逻辑架构。
2)明确视觉层级关系
UI设计中不同的内容属于不同的层级关系,如菜单于菜单间的同级关系、内容间的从属关系等等。用同色系色彩、不同色相色彩间的差距可以非常直观地区分内容的层级关系,还可以通过色彩间的强对比突出关键内容。
3)营造界面整体风格
UI界面虽然是个复杂的视觉图形系统,但通过主色调、辅助色、装饰色之间的对比调和关系会呈现出明显的风格倾向。用不同的色系或者同色系色彩之间的对比与调和关系,可以塑造出不同的界面风格。如适合男生的金属质感的黑色、灰色、蓝色系,女生喜欢的梦幻甜美色系、糖果色系。界面风格定位于品质已经成为用户体验中最重要的部分之一。
2 UI色彩设计方案
在进行UI设计时,要通过对产品及用户体验的分析确定明确的色彩搭配反感,形成“标准色彩规范”,在这个基础上再进行具体界面、线框、图标等细节设计。标准色彩规范中要规定出最主要主色、辅助色、装饰色的色号,方便设计师的设计稿的色彩统一。
1)主色调
主色用量基本占据全部用色的75%,基本决定了整个界面的视觉风格。主色选择要符合产品本身的气质、诉求和色彩心理学规律,可在主色的基础上通过明度与纯度的变化衍生出同色系色调作为主色调范围。
根据色彩在视觉中的能量值,一般主色倾向于选择饱和度高、明度低的色彩,往往会在在同一界面中占据较大的面积或明显的凸现于背景。
2)辅助色
辅助色起到辅助主色的作用,在全部用色中约占据20%。用与主色同色系色彩作为辅助色可以呈现柔和、整体、统一的视觉效果;而用主色邻近色作为辅助色可以让界面有丰富的变化,产生活泼感;用主色调对比色作为辅助色可以让主色更为突出。
3)装饰色
占全部色彩方案的5%的装饰色起到点缀、提醒的作用。并界面增加个性化、富于趣味的视觉元素。装饰色要与界面整体色调相区别,一般在明度、饱和度上要有明显差异,一般会用明度或饱和度高的颜色。