淘宝2017设计升级：手淘首次以设计为主导的版本升级

(4)节奏韵律

个人经验判断一般眼球同时获取信息不超过 3 个，加上手机屏幕宽度有限，规划模块分割尽量是 1 至 3 列的空间展示，由主到次的业务级别往密排列，有规律可循。

• 视觉：弱化和减少视觉分割和格子，由大及小的V型业务模块的视觉流。
• 业务：从疏到密的业务排序，有业务级别的规律展现模块。

设计概念稿

(5)高效浏览

整体纵观的视觉浏览体验顺畅，考虑整体性的韵律感及浏览商品的高效视觉流，减少用户眼睛太多纵横交错及断点的转动。

设计概念稿

3、内容立体：结构立体、动态传达

在纵向纬度上，增加信息展示空间、丰富业务展示形式，让信息结构更加多元立体化，比如主图片更大、卡片异形效果等。通过入口自身形式和风格动态传达业务特色，比如视频、电影、直播内容，富媒体的本质还原，动态引起用户好奇心，展现形态丰富的内容流。还有页面动效逻辑的转场、界面滚动的缓和动画也需要一并升级，达到手淘整体立体生动的效果。

设计概念稿

商品详情页

4、最优平衡：不同系统/业务处理，最优呈现决策

第一点根据不同系统能提供的效果特性做各最优的设计处理，进行最优的平衡决策，比如iOS系统可以做毛玻璃效果，可应用在界面里做最好的视觉呈现。而Android系统不能做毛玻璃效果则变通设计手段，平衡各种细节，尽量达到同样期望通透柔和的效果。

(1)iOS

1)底部导航栏升级，图标统一细线条，增加淘字新功能认知，以及社区的发布加号也统一圆形。

2)底部背景样式在iOS系统下根据毛玻璃效果展示，滚动透背效果更加。因为毛玻璃效果自带灰色样式，已经有了上下模块之间的区隔效果，所以去掉了背景的顶部分割线。

(2)Android

底部背景样式因系统无毛玻璃效果，设计上则做白色微透明度效果，顶部加半透明灰色的分割线，整体会稍微通透柔和。

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!