
实例002 UI设计组成部分
在如今UI设计领域,常规整套设计主要由ADS、画草图、低保真原型与高保真原型、Axure、图形界面设计等几部分组成。
1. ADS
ADS(Application Definition Statement)即应用定义声明,它由3个部分组成:用户(audience)、定位(differentiator)、方案(solution)。
在设计过程中一句话简短说明应用(APP)的作用,它能为(哪些)用户(在说明情况下)解决(什么)问题?从而展现出它的定位,然后列出最主要的功能。功能图如图1.1所示。

图1.1 ADS功能图示
2.画草图
由于ADS是基于文字表达的一种方式,为了能更清楚明了地表达意图,这时就需要以画草图的方法来解决,既然是草图就无须精确的表达,只需要特别注意将整体的布局及重要的模块表现出来即可,同时可以根据实际情况绘制彩色或者灰度的草图,如图1.2所示。

图1.2 草图效果
提示
如今更多的公司采用草图设计模板,它集快速、高效等多项优点于一身,而且由于模板采用了硬质不锈钢结构,可多次利用。图1.3所示为Android 4.0 UI设计模板实物展示。

图1.3 Android 4.0 UI设计模板实物展示
3.低保真原型与高保真原型
低保真原型是指将草图通过Axure、Mockup和Visio等交互设计软件在计算机上生成大致框架效果图,高保真原型则追求细节(如屏幕尺寸、色彩细节等),高保真原型的制作比低保真原型更加耗时,所以通常在低保真原型得到确认后才开始制作。框架效果如图1.4所示。

图1.4 框架效果图
4. Axure即Axure RP
Axure RP是一个专业的快速原型设计工具,Axure代表美国Axure公司,RP则是Rapid Prototyping(快速原型)的缩写。它主要负责UI设计过程中的定义需求和规格,使设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。Axure RP作为专业的原型设计工具,它能快速、高效地创建原型,同时支持多人协作设计和版本控制管理。
Axure RP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师和界面设计师等。
5.图形界面设计
在高保真原型完成的基础上,对其进行视觉细化设计,具有针对性地为图形添加阴影、高光、质感等效果。图形界面设计如图1.5所示。

图1.5 图形界面设计