- Photoshop CC UI设计案例教程(全彩慕课版·第2版)
- 王京晶主编
- 520字
- 2024-11-28 16:38:17
1.4 UI设计的风格表现
![](https://epubservercos.yuewen.com/27463F/31246607503107206/epubprivate/OEBPS/Images/63996-00-017-2.jpg?sign=1739557965-A2XLu1cObnWehUU6TEbkIk7EatyCmVhp-0-60c369151f40760ace525fc1e3785957)
UI设计的风格在2017年由以拟物化为主转化到以扁平化为主,因此UI设计的风格主要可以分为拟物化和扁平化两大类,如图1-6所示。
![](https://epubservercos.yuewen.com/27463F/31246607503107206/epubprivate/OEBPS/Images/63996-00-017-3.jpg?sign=1739557965-AiKKFofI8WElUpEKhDTj0g88lDJ6z7gl-0-9b0485d06ca5c15ecf3f67354c0b5828)
图1-6
1. 拟物化风格
拟物化风格主要通过高光、纹理、阴影等效果模拟现实物品的造型和质感,将实物在UI设计中再现,拟物化图标如图1-7所示。
![](https://epubservercos.yuewen.com/27463F/31246607503107206/epubprivate/OEBPS/Images/63996-00-018-1.jpg?sign=1739557965-QDDmmHRPFaj7c6rHVgJj9tHqtFaOtyrw-0-8ab1f32c15ef76bc505b737923ef0d31)
图1-7
拟物化风格优点如下。
• 识别度高,用户的学习成本低。
• 视觉震撼力强,在屏幕中模拟实物效果往往会表现较好的质感。
• 用户体验良好,可以令用户与真实世界联系。
拟物化风格缺点如下。
• 设计费时,需要花费设计师大量的时间。
• 功能较弱,过分强调拟物效果,忽视UI的功能。
• 占据内存,拟物效果转化为图片将占用大量的加载时间。
2. 扁平化风格
扁平化风格去除了诸如透视、纹理、渐变等冗余、厚重和繁杂的装饰效果,运用抽象、极简和符号化的设计元素进行表现,扁平化图标如图1-8所示。
![](https://epubservercos.yuewen.com/27463F/31246607503107206/epubprivate/OEBPS/Images/63996-00-018-2.jpg?sign=1739557965-h2gm1efoy53CvQxGXlVuv8kCzx1BdDwy-0-32d81fdbdb15a9c805402ffd90d735b1)
图1-8
扁平化风格优点如下。
• 高效便捷,扁平化设计具备一致性和适应性,因此设计更加便捷。
• 信息突出,减少用户认知障碍,产品更加易用。
• 简约清晰,比起拟物化设计的沉重,扁平化的轻量设计使界面焕然一新。
扁平化风格缺点如下。
• 缺乏情感,界面传递的情感有时会过于冰冷。
• 不够直观,用户需要一定的学习成本。
• 用户体验降低,扁平化设计的代入感较弱。