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

(4)节奏韵律

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

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

设计概念稿

(5)高效浏览

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

设计概念稿

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

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

设计概念稿

商品详情页

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

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

(1)iOS

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

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

(2)Android

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

第二点根据业务不同特性以及强调的功能特点而殊加处理，比如搜索业务强调的是搜索，那么就要突出搜索的样式，我们这次改版搜索背景色调为透明透底色，融合美观，也不会过于突出(见首页效果)，但是在进入搜索场景下这个核心功能的搜索框背景就不能那么透明了，而是要  清晰突出。还有店铺页面的搜索亦如是，因为店铺可以定制背景图，考虑图片比较花哨不可控的情况，搜索框背景色透明值要低。

5、框架统一： 整体框架，统一认知

（编辑：ASP站长网）