芯片|专访莉莉丝《Dislyte》用户体验设计负责人:何谓「潮流」?( 四 )


竖屏的交互框架设计与横屏不同 , 竖屏布局设计的tips:
1、遵守自上而下的阅读习惯 , 可参考书籍海报的排版布局 , 尽量接近用户获取信息的习惯 。
2、高频操作区需要放在用户手指容易触及的区域 , 提高易用性 。 非高频操作的控件可以合理布局在上方 。
3、与横屏不同 , 一个横向区域尽量只显示一个信息 , 避免叠加造成的布局混乱和多语言适配的问题 。
4、界面布局避免一刀切 , 可以根据不同的需要保留一定的布局灵活度 。
5、竖屏的布局在信息展示上比较有优势 , 更容易做出平面设计构成感 , 可以多参考海报与书籍排版方式 , 增加设计感 。 但在同一空间内没有横屏这么容易展示内容叠加的信息 , 例如宽广的画面环境与氛围 , 硬做易造成信息呈现的混乱 。
UX在开始设计时 , 要先确定好界面框架 。 以上是以Dislyte项目为案例进行说明 , 不同类型和特点的游戏需要根据自身情况设计符合项目需要的交互框架 , 深入了解游戏类型和核心玩法能帮助快速确定一种合适的框架结构 。
切忌设计过程中不断调整框架结构 , 如前期只有少量界面需求 , 率先根据内容设计了一个框架 , 但是随着内容量的增多、功能的完善觉得之前的框架不合适了又重新改一个框架或者新增一个类型的面板 , 如此反复造成大量的人力成本浪费 , 因此在项目开始设计之初就必须优先确定一个合适的框架结构 , 就算需求内容还不完善 , 根据设定好的框架结构后期的变动也不会太大 。
黄金比例有三个常见的用法 , 分别为:黄金分割、斐波那契螺旋、三分法 , Dislyte采用了更为简单实用的三分法 。
需要注意的是 , 黄金比例仅作为设计师的辅助工具 , 切忌生搬硬套 。 如果一开始就去想着我一定要在设计中运用黄金比例的话 , 思维容易受限 。 黄金比例最好是用在最后设计的修正上 , 我们可以根据黄金比例去调整元素的位置 。
在排版上 , 有四大排版原则:亲密、对齐、对比、重复 。
1、亲密性:将相关项组织在一起 。 在一个页面上 , 位置接近就意味存在着关联 。 因此相关的项应当靠近 , 归组在一起 。 2、对齐:每个元素都应当与界面上的另一个元素有某种视觉联系 , 一个界面建议对齐方式不超过2种 。 3、对比:如果界面上的元素不相同 , 那就干脆让它们截然不同 , 以吸引用户眼球 。 如字号的对比 , 图片大小的对比 。 4、重复:让视觉要素在整个作品中重复 , 包括统一颜色方案、字体字号、文本行距、项目符号、对齐方式、图片风格等等 。
亲密性案例
以上从六个维度(1.美术风格/2.设计关键词&情绪版/3.配色/4.质感/5.图形纹饰/6.构成和排版布局)分享Dislyte如何做一个符合国际审美的现代潮流风格的UI界面 。
设计是为了解决问题而存在 , 游戏UI界面设计亦是如此 。 希望通过具体的案例和思考能授人以渔 , 通往终点的方法和道路有多种 , 在游戏用户体验设计中应以用户为中心 , 回归游戏本身才是不败的真理 。
DislyteUI截图

02深耕游戏美术设计十余年 Q:聊完项目 , 我们聊聊您个人吧~ 能不能给我们说说您是怎样进入游戏行业的? Kian:我本身就很喜欢画画和做设计 , 很早开始学美术 , 大学也选择了设计相关专业 , 并在2010年进入游戏行业 。 当时国内的游戏行业的工业化还不够成熟 , 不区分原画和UI , 很多公司也没有专门设立UI岗位 。 所以我也从事过原画的工作 , 虽然这并不完全是个人的主观选择 。
我在大学期间就开始接触iOS系统的游戏开发 , 那会儿做了一款陀螺仪拳击游戏 , 这款游戏最后在App Store顺利上线 。 从那时起 , 对游戏美术这个领域开始感兴趣 。 虽然我还不是很确切的理解游戏UI , 更不知道用户体验 , 但是开始在心里种下了一颗种子 。