![Photoshop CC移动UI设计实战从入门到精通](https://wfqqreader-1252317822.image.myqcloud.com/cover/648/22655648/b_22655648.jpg)
实例002 UI设计组成部分
在如今UI设计领域,常规整套设计主要由ADS、画草图、低保真原型与高保真原型、Axure、图形界面设计等几部分组成。
1. ADS
ADS(Application Definition Statement)即应用定义声明,它由3个部分组成:用户(audience)、定位(differentiator)、方案(solution)。
在设计过程中一句话简短说明应用(APP)的作用,它能为(哪些)用户(在说明情况下)解决(什么)问题?从而展现出它的定位,然后列出最主要的功能。功能图如图1.1所示。
![](https://epubservercos.yuewen.com/EC5BE6/11229194904796006/epubprivate/OEBPS/Images/figure_0016_0001.jpg?sign=1739266932-7nI8Xh3megFnywSzi4IuYdJ74zZWcMKe-0-cb9b07d74155e6375257d31ea64f3753)
图1.1 ADS功能图示
2.画草图
由于ADS是基于文字表达的一种方式,为了能更清楚明了地表达意图,这时就需要以画草图的方法来解决,既然是草图就无须精确的表达,只需要特别注意将整体的布局及重要的模块表现出来即可,同时可以根据实际情况绘制彩色或者灰度的草图,如图1.2所示。
![](https://epubservercos.yuewen.com/EC5BE6/11229194904796006/epubprivate/OEBPS/Images/figure_0017_0001.jpg?sign=1739266932-iRWCC5lekRwlkiesk5FbsvIhVcC8YubX-0-a7cf2bcde45ad9de70b9c78320c1ded7)
图1.2 草图效果
提示
如今更多的公司采用草图设计模板,它集快速、高效等多项优点于一身,而且由于模板采用了硬质不锈钢结构,可多次利用。图1.3所示为Android 4.0 UI设计模板实物展示。
![](https://epubservercos.yuewen.com/EC5BE6/11229194904796006/epubprivate/OEBPS/Images/figure_0017_0002.jpg?sign=1739266932-uvcvsGmMHLpu9sF3sqeT8j2ZNcm62KhL-0-744a3d9038fce03b197b5eab1617be48)
图1.3 Android 4.0 UI设计模板实物展示
3.低保真原型与高保真原型
低保真原型是指将草图通过Axure、Mockup和Visio等交互设计软件在计算机上生成大致框架效果图,高保真原型则追求细节(如屏幕尺寸、色彩细节等),高保真原型的制作比低保真原型更加耗时,所以通常在低保真原型得到确认后才开始制作。框架效果如图1.4所示。
![](https://epubservercos.yuewen.com/EC5BE6/11229194904796006/epubprivate/OEBPS/Images/figure_0017_0003.jpg?sign=1739266932-YVYKXWrh9STbct7W8jlQTeVvrI7ybEY2-0-2c45984f01de0d5922ac35cf3d728efa)
图1.4 框架效果图
4. Axure即Axure RP
Axure RP是一个专业的快速原型设计工具,Axure代表美国Axure公司,RP则是Rapid Prototyping(快速原型)的缩写。它主要负责UI设计过程中的定义需求和规格,使设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。Axure RP作为专业的原型设计工具,它能快速、高效地创建原型,同时支持多人协作设计和版本控制管理。
Axure RP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师和界面设计师等。
5.图形界面设计
在高保真原型完成的基础上,对其进行视觉细化设计,具有针对性地为图形添加阴影、高光、质感等效果。图形界面设计如图1.5所示。
![](https://epubservercos.yuewen.com/EC5BE6/11229194904796006/epubprivate/OEBPS/Images/figure_0018_0001.jpg?sign=1739266932-SzaZ1HW5h5mkpeE09zYk1Ia1rXsDiHxo-0-58555cfa2c893d3436aeecbe778a372c)
图1.5 图形界面设计