[分享] 从1到0的 ZUI 10.0 设计之道

发表于 2019-4-1 20:07   |   来自PC浏览器 显示全部楼层 [复制链接]   
3038 16  

01.jpeg


01
为什么从一到零


1. 回顾:从零到一的ZUI

ZUI 诞生于2015年,秉承着简单好看的设计理念,ZUI 拥有独具个性的画框锁屏、自由型图标、简洁的界面风格以及便捷的 U-Touch、流畅不卡顿的系统体验。一直以来,ZUI 给用户塑造了良好的口碑和专业的形象。

2. ZUI为什么要从一到零

02.jpeg


我们不难发现,各个手机系统发展到今天,内容凸显成为第一原则。UI 元素不再与内容竞争,而是帮助用户更好地识别信息,操作功能。

ZUI 现有版本“风车”的概念具有较好的一致性和品牌识别度,但面对现有的软硬件以及UI 设计趋势还是存在一定的问题。比如:形式感过强的图形影响内容的呈现;两段式的导航栏分割感过重等等。

因此,在 ZUI 10.0 大版本迭代升级之际,我们需要回归清零思考:如何让界面中主要内容更好地被用户识别。


02
ZUI 10 如何清零


1. 制定设计目标

03.png

我们基于手机软硬件的发展趋势,以及系统的设计趋势发现:面对更大的屏幕和更多的信息,形式感过重的图形会影响内容获取。为此 ZUI 不断思考设计方向,如何在更大的屏幕上让内容层次清晰,使用户更易获取关键信息。 所以,我们认为这次改版的首要的设计目标应该定义为:设计为内容服务。即通过一定的设计手法,更好地呈现 ZUI 系统里所有可见的信息和功能。

2. 去标题栏,打造透气有空间感的布局

04.gif

点击可以看到GIF效果

在界面布局上,我们打通了标题栏以适应手机全屏体验;列表高度增大,去分割线,通过更多的留白营造界面整体透气感,但却疏而不松;字号层次拉大,通过对比让主要信息更加凸显。整体来看,界面中“内容”显示得更加舒适,信息查找更加快捷。

05.jpeg


3. 去形式感图形,运用可延展的张力弧

图形上,我们希望能有一种图形元素:它不仅简洁,而且图形上具有很好地延展性,可以柔和自然地表达我们的设计理念,使页面能够在聚焦主要内容的前提下,又富有艺术感。

06.jpeg


设计上,我们常常追求“有张力”的效果。我们发现自然中也存在着张力。张力弧的灵感来源是液体张力的效果,打比方一滴水滴在一个介质上,水滴通过受力点O与介质的夹角就形成了一个弧线,我们对这美妙的形态称之为张力弧。

07.jpeg


我们将张力弧这一概念运用到界面中,将它作为区分信息的天然分割。简洁优雅的弧线具有独特的设计美感,在界面中得到了完美诠释。张力弧不是静止不动的,在页面切换中会根据承载内容的不同上下移动,甚至大小缩放。张力弧不仅延展了页面的边界,更让用户对弧线的边缘产生无限遐想。此外,弧形作为系统设计语言,具有很好地品牌识别度,可以被运用到品牌宣传周边产品上。

08.jpeg



03
设计优化,从零再到一
在去掉装饰重新调整界面布局后,我们打磨细节,从色彩、图形、字体等方面提升设计品质。

1. 全新的色彩体系

09.jpeg


我们继续沿用蓝色作为品牌主色,绿色作为辅助色主要用于开关、单选多选等控件,红色作为强提示信息色。我们精简色板,去掉相似和不常用的颜色,从原来的16个精简到7个,可以覆盖手机绝大部分场景的色彩需求。

10.jpeg


我们提高整体色彩的饱和度,在刺激用户的视觉感官同时,便于聚焦内容。色彩的样式定义为三类:小图标和文字使用纯色,圆形按钮等使用微渐变,大面积的背景使用渐变色。不同元素根据大小不同,使用不同的色彩样式,让界面看起来更加生动,富有节奏。

11.jpeg


2. 更具亲和力的图标

ZUI 10.0 的系统图标绘制更加专业规范。图标尺寸变小描边变粗,整体更加统一、圆润、精致。图标表意更加精准,帮助用户快速理解。

12.jpeg


桌面图标以化繁为简,聚焦本体为设计原则,简化了图形:以圆形和圆角矩形为主,搭配少量自由型图标,但仍保留具有品牌特性的元素(如:短信图标的拟人效果)。颜色上更加和谐一致,表意更加直观。新版图标配合全新的桌面布局,干净整洁不显杂乱。

13.gif


3. 更专业的时间字体

14.jpeg

数字字体设计更加专业:字体加粗后识别性更高,各数字间距统一,并适用于各类不同壁纸。

15.jpeg


04
总结

ZUI 10.0 以“为内容服务”为设计目标。在不断探索行业趋势和总结前版本问题后,清零再思考,去掉繁复影响内容呈现的元素,让页面中主要信息更为凸显。在细节上优化色彩、字体、图形,回到一个全新的“1”。ZUI 10 的设计提升体现着对用户更深入的理解,无论新旧用户,都能感受到ZUI全新的变化。

16.jpeg




感谢阅读,以上设计内容均由 ZUI 用户体验设计中心原创设计,版权所有转载请注明出处,违者必究,感谢您的合作。


17.png

16条回复
158****1733_1_1 来自 Lenovo Z5 发表于 2019-4-1 23:38:43 | 显示全部楼层
什么时候更新啊…
回复 支持 反对

使用道具 举报

renjian 来自PC浏览器 发表于 2019-4-2 10:30:45 | 显示全部楼层
图片都挂了呀!
回复 支持 反对

使用道具 举报

zui爱zui
回复 支持 反对

使用道具 举报

请随时关注社区论坛,谢谢
回复 支持 反对

使用道具 举报

云服务是用的乐同步吗
回复 支持 反对

使用道具 举报

花丛小刺猬-_- 发表于 2019-4-4 09:14
云服务是用的乐同步吗
10.0新版本直接登陆账号就可以同步
回复 支持 反对

使用道具 举报

良梦、若风 来自 Lenovo Z5s 发表于 2019-4-13 19:09:04 | 显示全部楼层
建议增加主题功能。
回复 支持 反对

使用道具 举报

181****6409_12 来自PC浏览器 发表于 2019-4-15 23:10:23 | 显示全部楼层
(我为了联想手机做贡献)
当前所用机型:(联想Z5   已经是254版本)        
建议描述:
1,加快开机速度联想图标不用用黑白开始可以直接用彩色。
2,小锁的图片增大20倍到50倍可以把日期时间框住 可以用色彩框。
3,图形图案密码9点 点增大或变成空心圆圈变彩色。
4,桌面设置里增加桌面循环滚动开关。
5,下滑时去掉整屛虚化效果。
6,右上角电量百分比显示太大显示一个黑点去掉。
7,增加双击锁屏功能。
8,手势操作全面屏手机。最科学的操作 还是应该从底边平分3等份,轻触点按触摸底边或是从屏幕底部上滑。从屏幕左侧底部上滑即可呼出多任务界面;屏幕中间底部上滑回桌面,右侧上滑则是后退,上滑悬停则是息屏, 下滑呼出快捷面板。用户可根据使用习惯对左中右三点上滑操作进行变换设置交给用户。根据虚拟按键的手势操作 底边平分3等份轻点触摸,更加方便快捷。    轻触点按或上滑可供用户自行选择。这样就完美了,就再也没人纠结了。这应该就是联想的忠实用户所要的。()
9,电话 短信 安全中心等设置内所有的字体加粗加大一点。(现在使用的字体小而清秀无法设置)
10,安全中心自启中心中 选择项中 去掉移除,就用开关设置。(现在所有的太复杂太乱)
11,夜间极致省电后转正常时设置的自启动软件为什么都不能自启动了。
12,照相功能在外转内存卡拍照时,慢了平时的5倍,(我用联想超级相机软件就无此现象)在早晚或灯下拍照时画面中间处有一片红。(希望赶快优化处理)
13,去掉上滑时的动画操作,去掉所有的动画虚化等效果。在这快速时代 不需要拖拉现象。

补充说明:(如有,请在此补充)  )  
回复 支持 反对

使用道具 举报

敢不敢再丑点
回复 支持 反对

使用道具 举报

日江春蓝 来自PC浏览器 发表于 2019-4-26 15:31:25 | 显示全部楼层
先在最新的是什么版本,在哪下啊
回复 支持 反对

使用道具 举报

zuk自由客2 来自 Lenovo Z5 发表于 2019-6-4 15:23:33 | 显示全部楼层
还得优化
回复 支持 反对

使用道具 举报

提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

L20哈 来自 Lenovo S5 发表于 2019-6-23 20:25:20 | 显示全部楼层
联想s5等了一年都还没升级   常老板的承诺就这么不值钱吗?
回复 支持 反对

使用道具 举报

不是升级之道,是升级之倒退。越升级手机问题越多。
回复 支持 反对

使用道具 举报

173****1069_15 来自 Lenovo K5 Pro 发表于 2019-6-25 10:25:04 | 显示全部楼层
zui的z是哪个单词缩写
回复 支持 反对

使用道具 举报

130****9410_34 来自 Lenovo Z5 发表于 2019-6-27 19:02:50 | 显示全部楼层
我们要主题商店
回复 支持 反对

使用道具 举报

高级模式
B Color Link Quote Code Smilies

本版积分规则