UI设计

图书标准信息

• 作者 田雅岚；刘伟
• 出版社 清华大学出版社
• 出版时间 2023-04
• 版次 1
• ISBN 9787302633334
• 定价 49.80元
• 装帧 其他
• 开本 16开
• 纸张 胶版纸

【内容简介】

《UI设计》以培养全方位用户界面(UI) 设计人才为教学目标进行编写，理论和实践紧密结合，详细解读了用户UI 设计理论与方法。《UI设计》注重培养读者的产品思维、用户思维和交互思维模式与应用实践能力，内容涵盖UI 设计概念，以用户为中心的设计理念，交互设计，UI 视觉元素设计，软件、移动App、网页、游戏UI 设计以及用户UI 设计项目流程解析。
  《UI设计》内容翔实、案例丰富、图片精美，可作为高校和培训机构等相关专业课程的实验和实训教材，也适合对UI 设计感兴趣或未来想从事UI 设计相关工作的读者阅读。

【作者简介】

田雅岚，毕业于四川美术学院设计艺术学数字媒体专业，硕士研究生。重庆文理学院美术与设计学院教师。多年UI设计教学经验，教学内容随时更新迭代，让学生及时掌握前沿的新思想新技术和新标准。注重精讲精练，着重培养学生的实践能力和创新思维。辅导学生作品多次获奖，多篇学术论文和设计作品在国内核心期刊发表，获多项国家实用新型专利，住持并参与多项省部级科研项目。

【目录】

第1章　UI设计              1 

1.1　用户界面                   2 

1.2　图形 UI                    2 

1.2.1　Windows操作系统图形 UI的发展过程               2 

1.2.2　手机设备与图形 UI的发展     8 

1.3　UI设计                    11 

1.4　以用户为中心的设计         13 

1.5　交互设计                   14

第2章　以用户为中心的设计        17 

2.1　用户体验                   18 

2.1.1　用户体验决定成败         18 

2.1.2　好的用户体验原则         19 

2.2　用户研究                   20 

2.2.1　用户是谁               20 

2.2.2　心理模型和表现模型        20 

2.2.3　数字化生活方式           21 

2.3　建立用户角色的重要性           22 

2.3.1　开发者与用户不同         22 

2.3.2　设计要有针对性           22 

2.3.3　人物角色使“以用户为中心”落到实处             22 

2.3.4　人物角色可以减少争论，提高效率                 22 

2.4　产品规划前期                23 

2.4.1　产品规划时效            23 

2.4.2　明确产品价值和定位        23 

2.4.3　明确产品生命周期          23 

2.4.4　明确产品对象和终端        24 

2.5　积累用户需求池              24 

2.5.1　访谈或问卷调研用户        24 

2.5.2　用户使用路径分析          25 

2.5.3　根据业务模块穷举法        25 

2.5.4　其他渠道               25 

2.6　建立有价值人物角色类型      25 

2.6.1　人物角色数量            26 

2.6.2　人物角色需求分级         26 

2.7　人物角色简介               26 

2.7.1　人物角色要具体化         26 

2.7.2　编写人物角色简介         27 

2.8　编写用户情境               27 

2.8.1　用户情境的典型一天       27 

2.8.2　编写用户情境             28

第3章　交互设计              29 

3.1　人机交互                   30 

3.1.1　人机交互三要素           30 

3.1.2　人机交互现状与未来        30 

3.2　UI中的交互设计思维            32 

3.2.1　信息传递               32 

3.2.2　交互行为               32 

3.2.3　交互行为的变革           33 

3.2.4　情感化设计             35 

3.3　信息架构                 36 

3.3.1　信息架构师             36 

3.3.2　信息架构目标           36 

3.3.3　信息的选择与组织        37 

3.3.4　界面导航设计            39 

3.4　流程图                    41 

3.4.1　流程图的基本构成和常用符号                 41 

3.4.2　交互流程图             42 

3.4.3　制作流程图常用软件        42 

3.5　交互原型设计                42 

3.5.1　低保真原型设计           42 

3.5.2　高保真原型设计           44 

第4章　UI视觉元素             47 

4.1　色彩元素                   48 

4.1.1　色彩属性               48 

4.1.2　色彩搭配的黄金法则        50 

4.1.3　色彩搭配与界面风格        51 

4.2　文字元素                   54 

4.2.1　标题类文字             54 

4.2.2　正文类文字             57 

4.2.3　提示类文字             60 

4.2.4　交互类文字             60 

4.2.5　行为召唤语句            61 

4.2.6　文字动画               62 

4.3　图片元素                   63 

4.3.1　界面中图片的种类         63 

4.3.2　选择图片的原则           65 

4.3.3　图片常见比例            67 

4.4　图标元素                   69 

4.4.1　图标的概念              69 

4.4.2　图标设计原则            70 

4.4.3　图标设计的注意事项        72 

4.4.4　图标的视觉造型风格        72 

4.4.5　图标制作               74 

4.5　控件元素                   75 

4.5.1　控件与图标的区别         75 

4.5.2　控件设计的注意事项       76 

4.5.3　常见的控件元素           76 

4.6　视觉元素的交互状态            79

第5章　软件 UI设计            81 

5.1　软件 UI设计尺寸              82 

5.2　软件的欢迎界面               82 

5.3　软件的主界面                84 

5.3.1　Top Frame区            85 

5.3.2　菜单栏和工具栏           85 

5.3.3　功能模块区             86 

5.3.4　工作区                87 

5.3.5　状态信息区             87 

5.4　软件界面的设计原则            87 

5.4.1　界面与功能的适合性        87 

5.4.2　界面意图容易理解         88 

5.4.3　及时反馈信息            89 

5.4.4　防错处理               89 

5.4.5　风格一致和必要的个性化     90 

5.4.6　合理的布局             90 

5.4.7　合理的色彩             91 

5.4.8　适应用户群体和国际化       92 

5.4.9　效率               92 

5.4.10　可复用                93 

5.5　软件界面各元素设计的基本规则     93 

5.5.1　字体设计的基本规则        93 

5.5.2　菜单界面设计的基本规则     93 

5.5.3　命令按钮设计的基本规则     94 

5.5.4　工具条和图标按钮设计的基本规则              94 

5.5.5　提示信息设计的基本规则     94 

5.5.6　单选按钮设计的基本规则     95 

5.5.7　复选按钮设计的基本规则     95 

5.5.8　输入框和文本域设计的基本规则              96 

5.5.9　组合下拉框和列表框设计的基本规则              96 

5.5.10　多页选项板设计的基本规则   96 

5.5.11　数据表格设计的基本规则     97 

5.5.12　日期控件设计的基本规则     97 

5.5.13　软件对话窗口设计的基本规则              98 

5.5.14　软件消息框设计的基本规则   98 

5.6　窗口的交互规则              100 

5.6.1　一般规则              100 

5.6.2　焦点规则              101 

5.6.3　选择规则              101

第6章　移动 App UI设计         103 

6.1　移动 App UI设计概念           104 

6.2　移动 App UI设计的风格类型       104 

6.3　移动 App UI的设计原则         106 

6.3.1　审美完整性原则          106 

6.3.2　一致性原则             106 

6.3.3　直接操作原则           106 

6.3.4　提供反馈原则           106 

6.3.5　隐喻的原则             107 

6.3.6　用户控制原则           107 

6.4　移动智能设备               107 

6.5　移动智能设备的操作系统         107 

6.6　iOS系统 UI设计规范           108 

6.6.1　iOS常用术语           108 

6.6.2　iOS设计尺寸           110 

6.6.3　iOS适配              111 

6.6.4　iOS界面布局规范         112 

6.6.5　iOS文字规范           113 

6.6.6　iOS图标规范           114 

6.6.7　iOS交互注意事项        117 

6.7　Android系统 UI设计规范         118 

6.7.1　Android常用术语         118 

6.7.2　Android设计尺寸         119 

6.7.3　Android适配            120 

6.7.4　Android界面布局规范      120 

6.7.5　Android文字规范         123 

6.7.6　Android图标规范         124 

6.7.7　Android交互的注意事项     126 

6.7.8　Android的其他设计建议     126 

6.8　Harmony OS系统 UI设计规范      127 

6.8.1　Harmony OS常用术语      127 

6.8.2　Harmony OS界面布局规范    127 

6.8.3　Harmony OS文字规范      127 

6.8.4　Harmony OS图标规范      128 

6.8.5　Harmony OS其他设计建议    128 

6.9　移动 App切图规则与规范       128 

6.9.1　切图类型              129 

6.9.2　切图范围              129 

6.9.3　小触击区域          129 

6.9.4　切图命名              129 

6.9.5　AI切图演示            130

第7章　网页 UI设计           131 

7.1　常用术语                  132 

7.1.1　网站                 132 

7.1.2　网页                 132 

7.1.3　浏览器               132 

7.2　网页界面风格             132 

7.2.1　严肃稳重型             132 

7.2.2　综合流量型             133 

7.2.3　简洁大气型             133 

7.2.4　生动活泼型             134 

7.2.5　时尚个性型             134 

7.2.6　传统古朴型             134 

7.3　屏幕分辨率与自适应       135 

7.3.1　横屏                 135 

7.3.2　竖屏                 140 

7.4　网页的栅格布局              141 

7.5　网页布局参考              142 

7.6　网页字体                  145 

7.7　网页切图                  145 

7.7.1　切图的原则             145 

7.7.2　切图的技巧             145 

7.7.3　切图的类型             145

第8章　游戏 UI设计           147 

8.1　游戏的分类                 148 

8.2　游戏 UI的独特性            154 

8.2.1　视觉风格              154 

8.2.2　互动感受              155 

8.2.3　复杂性                155 

8.3　游戏 UI的职能               156 

8.3.1　实现功能切换           156 

8.3.2　实现反馈交流           156 

8.3.3　实现沉浸式体验          157 

8.4　游戏 UI设计前期工作           158 

8.4.1　明确游戏的世界观         158 

8.4.2　明确游戏的整体风格       159 

8.5　游戏 UI设计原则            161 

8.5.1　统一性原则             161 

8.5.2　易用性原则             162 

8.5.3　习惯与认知原则          163 

8.5.4　容错性原则             164 

8.5.5　及时信息反馈原则         164 

8.6　手游 UI设计的限制            165 

8.6.1　尺寸限制              165 

8.6.2　性能限制              165 

8.6.3　分辨率限制             165 

8.6.4　音效限制              165 

8.6.5　操控限制              166 

8.6.6　沉浸式体验限制          166 

8.7　手游 UI设计注意事项           166 

8.7.1　更高的易用性           166 

8.7.2　更及时的反馈           166 

8.7.3　更多样化的操作控制     167

第9章　UI设计项目案例         169 

9.1　“找到你”App产品定位         170 

9.1.1　行业背景              170 

9.1.2　调研手段              170 

9.1.3　用户需求              171 

9.1.4　定位分析              171 

9.1.5　建立人物角色与情境      172 

9.2　交互设计                  173 

9.2.1　产品框架              173 

9.2.2　低保真原型图设计         173 

9.3　视觉设计                  175 

9.3.1　标志设计              175 

9.3.2　图标设计              176 

9.3.3　高保真原型图设计         177 

9.4　后期测试与维护              180 

9.4.1　项目评审与测试          180 

9.4.2　意见反馈与迭代          184

参考文献                 185