SAGI读书会 | 当我们谈论UI时我在谈些什么？

**本文转自：**SAGI GAMES 公众号

原文链接：SAGI读书会 | 当我们谈论UI时我在谈些什么？

**原作者：**叶子、April

终生学习是SAGI的价值观之一，读书分享会即是践行它的形式之一，充实自我的同时也可以带给别人丰富知识的乐趣，今天让我们走进UI美术设计师的读书世界吧！

**主讲人：**龙哥

         （UI设计师）

**主题：**当我们谈论UI时我在谈些什么

**参与人：**美术、策划、技术、支持、测试等部门35位同学

读书分享会的起因

某一天龙哥在群里发了一张UI图作为视觉的范例，有不明白的同学问了一个很“刁钻”的问题。

后来龙哥认为自己作为一名专业的UI设计师回答的不太专业，没有真正体现出UI设计师存在的价值，于是就有了今天这个分享会。

从专业角度分析UI设计

所以为什么不对？先说结论：

40%原因构图难看、60%原因识别困难。

1.构图难看

学画画的时候画面四周的位置称为留白，假设按钮是一张画布，按钮文字是内容。那么如果构图不合理就会造成下图这种难受的感觉。

2. 识别困难

UI设计师其中一个核心目标是将用户的认知负荷降至最低，让玩家熟悉的良好的的进入认知放松状态。期间不可盲目增加多余的信息造成用户认知负荷。

3. 以小见大

如果按钮是最小的画板，我们需要保证文字内容的识别性就必须保证周边有足够的边距，面板与面板之间，不同内容之间的间距也是尽量保证充足。

UI排版技巧

1. 亲密性原则

彼此相关联的元素应该靠得更近，用空白作为无形的分界线来区分各模块之间的关系。

2. 基础排版逻辑

与画布边界的距离C > 模块之间的边距 B > 列表之间的边距A。

3. 网格系统

庞大的游戏系统有非常多的模块和各种各样的内容，如何定位所有内容，让它们保持有序且多页面规则一致，这就需要网格系统作为工具来做质量监控了。

4. 凭感觉

很多优秀作品都没有刻意地遵守传统的网格系统。纯凭感觉反而显得画面更加灵动，但是打破规则前得知道规则，做到设计无尺但心中有尺。如同毕加索画的抽象不代表他没有美术基础。伟大的作品都是多年经验的结果。

UI设计师的痛点

分析完UI设计师所具备的专业技能后，龙哥又总结了UI设计师的痛点，并且根据该痛点列举了对应的解决办法。

1. 弹窗尺寸多样

解决办法：制定版面数量，再根据情况增加尺寸，建立资源清单并与质检同事拉平认知，一律没有按照规则实现的界面都可以提单子。

2. 按键颜色乱用

解决办法：制定按钮规则及使用说明。

3. 查无此PSD的“原创界面”

解决办法：系统美术策划开发在进行任何一个环节时一定要与UI设计师对接需求再实施。

4. 文字易读性和对齐方式

解决办法：解决内容视觉呈现的问题，让用户快速了解页面上的信息；解决用户对信息内容的理解问题，考量是否简单易懂、逻辑清晰。

5. 资源乱用

 解决办法：明确新旧资源使用规则，减少模块混用。

互动环节

一位同学提到：“想搞清楚什么界面是好看的不如搞清楚什么界面是丑的”。龙哥回复说：“好看的界面没有标准，但是定义什么是错的，不走这些弯路也可以慢慢摸索出一条正确的路来。”

总结

1. 效果图做得漂亮只能算假漂亮，落地到游戏里才是真漂亮。

2. 多沟通，配合开发的痛点调整设计习惯，开发同学也要多向你的设计师提出你的困扰，双向奔赴。

3. 制定界面规则和按钮规则并与测试同学把规则拉平，建立良好的审核依据。

4. 不要过分苛责，实现80%=完美实现。

总而言之，UI设计师的作用不仅仅是为了让事物更好看，而是为了更好用！

在SAGI，读书会打造的是一个灵活、自由自愿、爱好居先、强调自我表达和交流的沟通渠道。非常感谢龙哥给大家带来的此次分享会，让大家学会了更多UI设计相关的专业知识！

参考资料

1.《设计力就是沟通力》

2.《三个现象揭示认知心理学与用户体验的关系》

3.《UI设计中网格解析和运用 》