01 — 为什么从一到零 1. 回顾:从零到一的ZUI ZUI 诞生于2015年,秉承着简单好看的设计理念,ZUI 拥有独具个性的画框锁屏、自由型图标、简洁的界面风格以及便捷的 U-Touch、流畅不卡顿的系统体验。一直以来,ZUI 给用户塑造了良好的口碑和专业的形象。 2. ZUI为什么要从一到零
我们不难发现,各个手机系统发展到今天,内容凸显成为第一原则。UI 元素不再与内容竞争,而是帮助用户更好地识别信息,操作功能。 ZUI 现有版本“风车”的概念具有较好的一致性和品牌识别度,但面对现有的软硬件以及UI 设计趋势还是存在一定的问题。比如:形式感过强的图形影响内容的呈现;两段式的导航栏分割感过重等等。 因此,在 ZUI 10.0 大版本迭代升级之际,我们需要回归清零思考:如何让界面中主要内容更好地被用户识别。 02 — ZUI 10 如何清零 1. 制定设计目标
我们基于手机软硬件的发展趋势,以及系统的设计趋势发现:面对更大的屏幕和更多的信息,形式感过重的图形会影响内容获取。为此 ZUI 不断思考设计方向,如何在更大的屏幕上让内容层次清晰,使用户更易获取关键信息。 所以,我们认为这次改版的首要的设计目标应该定义为:设计为内容服务。即通过一定的设计手法,更好地呈现 ZUI 系统里所有可见的信息和功能。 2. 去标题栏,打造透气有空间感的布局
点击可以看到GIF效果 在界面布局上,我们打通了标题栏以适应手机全屏体验;列表高度增大,去分割线,通过更多的留白营造界面整体透气感,但却疏而不松;字号层次拉大,通过对比让主要信息更加凸显。整体来看,界面中“内容”显示得更加舒适,信息查找更加快捷。
3. 去形式感图形,运用可延展的张力弧 图形上,我们希望能有一种图形元素:它不仅简洁,而且图形上具有很好地延展性,可以柔和自然地表达我们的设计理念,使页面能够在聚焦主要内容的前提下,又富有艺术感。
设计上,我们常常追求“有张力”的效果。我们发现自然中也存在着张力。张力弧的灵感来源是液体张力的效果,打比方一滴水滴在一个介质上,水滴通过受力点O与介质的夹角就形成了一个弧线,我们对这美妙的形态称之为张力弧。
我们将张力弧这一概念运用到界面中,将它作为区分信息的天然分割。简洁优雅的弧线具有独特的设计美感,在界面中得到了完美诠释。张力弧不是静止不动的,在页面切换中会根据承载内容的不同上下移动,甚至大小缩放。张力弧不仅延展了页面的边界,更让用户对弧线的边缘产生无限遐想。此外,弧形作为系统设计语言,具有很好地品牌识别度,可以被运用到品牌宣传周边产品上。
03 — 设计优化,从零再到一 在去掉装饰重新调整界面布局后,我们打磨细节,从色彩、图形、字体等方面提升设计品质。 1. 全新的色彩体系
我们继续沿用蓝色作为品牌主色,绿色作为辅助色主要用于开关、单选多选等控件,红色作为强提示信息色。我们精简色板,去掉相似和不常用的颜色,从原来的16个精简到7个,可以覆盖手机绝大部分场景的色彩需求。
我们提高整体色彩的饱和度,在刺激用户的视觉感官同时,便于聚焦内容。色彩的样式定义为三类:小图标和文字使用纯色,圆形按钮等使用微渐变,大面积的背景使用渐变色。不同元素根据大小不同,使用不同的色彩样式,让界面看起来更加生动,富有节奏。
2. 更具亲和力的图标 ZUI 10.0 的系统图标绘制更加专业规范。图标尺寸变小描边变粗,整体更加统一、圆润、精致。图标表意更加精准,帮助用户快速理解。
桌面图标以化繁为简,聚焦本体为设计原则,简化了图形:以圆形和圆角矩形为主,搭配少量自由型图标,但仍保留具有品牌特性的元素(如:短信图标的拟人效果)。颜色上更加和谐一致,表意更加直观。新版图标配合全新的桌面布局,干净整洁不显杂乱。
3. 更专业的时间字体
数字字体设计更加专业:字体加粗后识别性更高,各数字间距统一,并适用于各类不同壁纸。
04 — 总结 ZUI 10.0 以“为内容服务”为设计目标。在不断探索行业趋势和总结前版本问题后,清零再思考,去掉繁复影响内容呈现的元素,让页面中主要信息更为凸显。在细节上优化色彩、字体、图形,回到一个全新的“1”。ZUI 10 的设计提升体现着对用户更深入的理解,无论新旧用户,都能感受到ZUI全新的变化。
感谢阅读,以上设计内容均由 ZUI 用户体验设计中心原创设计,版权所有转载请注明出处,违者必究,感谢您的合作。
|
- 首页
- >
- 版块
- >
- ZUI 专区
- >
从1到0的 ZUI 10.0 设计之道
[分享] 从1到0的 ZUI 10.0 设计之道 |
|
最近发表
2019-7-12 17:06
2019-6-29 17:53
2019-4-17 17:12
2019-4-2 14:10
2019-4-1 20:09