加入收藏 | 设为首页 | 会员中心 | 我要投稿 西安站长网 (https://www.029zz.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营 > 正文

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

发布时间:2017-03-16 16:43:32 所属栏目:运营 来源:淘宝用户体验设计
导读:副标题#e# 面对互联网产品的日益变化和用户的不断成长,淘宝在经历了移动互联网爆炸式的发展后,是时候全面升级了。寒冬已过,杨柳夹岸,艳桃灼灼,迎着春天的气息我们向用户呈现出一个全新的手淘客户端,期望向他们传达新的品牌理念,配合更流行的观感和更

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

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

设计概念稿

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

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

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

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

设计概念稿

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

商品详情页

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

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

(1)iOS

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

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

(2)Android

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

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

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

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

5、框架统一: 整体框架,统一认知

(编辑:西安站长网)

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

热点阅读