手机淘宝是一个产品层级交错、架构复杂、入口繁多且用户量巨大的app。这样一个app，在产品设计之初，从产品架构到交互形式再到视觉设计需要考量的因素都非常多，而这三者的关系是后者基于前者的结构与结果而建立。因此，在这样一个牵一发动全身的app上做改变，最大的要点无疑是“克制”。这次优化设计主要是由于本人在使用该app的过程中发现贯穿整个app的设计语言在细节上不够统一，有的地方甚至没有达到清晰传达信息的目的。本着保守克制的原则，本次优化未涉及其他业务入口的图标，而仅针对部分页面内用户点击率相对较高的系统性图标主要围绕“统一性”作修改并对app内存在的某些相关问题作思考建议。

        截图手机屏幕分辨率为1920*1080，Android平台，APP版本号6.2.0。

第一部分：底栏标签页图标

       整个App中贯穿始终的就是底栏的标签页图标。首先确定的就是线描图标的大致风格。观察整个app大部分图标之后，改版的图标由现有图标演变，依然为线描的表现形式，基本特点是形状不封闭，端点为圆头，尽可能简化描边线条数量。对于包含active与inactive两种状态的图标在active状态使用app主色或辅色填充。

       为简化线条，首页图标将描边线条减少到2条，并在左侧开一个豁口，符合大多数图标未闭合的样式；当前的微淘图标视觉上因为左右两侧各有两条线条，导致中间部分的图形过小，显得图标繁杂拥挤，整体上与底栏其他4个图标风格不符，因此将两边的线条各减少一条，更简洁；社区图标的修改在于简化了中间的问号，app中其他有的地方也有涉及到问号图形的图标，只有这个图标里的问号图形有所不同，因此替换成最常见简单的问号图形；不仔细看可能不会发现，购物车图标在选中状态与常规状态下的形状是有出入的，这应该是设计师的疏忽导致，优化的图标保持了两种状态的一致；我的淘宝图标当前的设计显得过于开放简洁，优化后的图标与其他图标样式更和谐。

第二部分：首页图标

1.    首页的图标重设没有对顶栏的4个图标进行修改。单纯从视觉角度来讲，扫一扫和消息两个图标并不是合理的设计，其下方的文字使得button非常拥挤，但是首页的顶栏是整个app点击率最高的部位之一，这里的文字应该是使得button能够被更快地识别的作用，必定是经过产品和设计师们深思熟虑的，因此采取保守态度不做修改。

2.    而相对不那么关键的其他分区的小图标就有可优化的余地。对淘抢购、有好货、爱逛街、必买清单4个同层级的图标进行了简化，使得风格更统一。另外，个人认为四者的采用的颜色也有改进的地方，四个图标从颜色视觉上看，有好货采用的颜色是最显眼的，其他三个的颜色差别不够明显，因此加强其他三个图标的颜色的区别。

3.    超实惠、天猫必逛、特色好货属同一层级；热门市场、我要日报、淘宝直播属于同一层级（？不确定）；每日好店、淘部落、猜你喜欢属于同一层级。这三个不同类别分别采用了不同的展示形式，图标样式也不同。可改进的地方在于： 超实惠分区内每个单独细分类别的brand 图标与二级展示文字都采用与超实惠本身相同的颜色；天猫必逛分区仅fashion、hot图标采用与其相同的颜色；特色好货分区仅左边两个宝贝的global、life图标和耳机展示文字采用与其相同的颜色。如此不统一的规范实属不应该。

4.    淘宝直播四字字体和字号与热门市场、我要日报的不一致  ；淘宝直播是16年上半年就有了的业务，如果说是出于为了突出，那么现有的淘宝直播图标、三个细分区内均有的直播图标以足够达到该目的。唯独淘宝直播四个字这一点实属不能理解的设计；更明显的问题是，这三个图标条栏只有最右边的更多箭头图标是对齐了的，其余该对齐的地方均没有对齐。即便这三个分区有层次级别之分，也不该出现这样差异。

第三部分：微淘标签页

1.   微淘标签页由于内容分为了5个tab， 相对于首页视觉上简洁一些。这里5个图标除了“上新”图标之外整体风格已经很统一，这里只对“上新”图标做一下修改。

2.   对于该页面内feed里的点赞与评论图标亦作修改，以更符合整体风格；

3.    点击feed页面单独页面，可以发现右上角的店铺图标与其右的更多图标在视觉上不平衡，店铺图标明显大于更多图标。如若单纯从平衡此处两个图标视觉出发，1.简化店铺图标 2. 修改更多图标大小；

第四部分：问大家社区标签页

此页整体布局与微淘页相似。不同的是，顶部的tab 由非固定的8个有黄色背景色的button组成，图标样式风格也明显不同；底部的图标也采用了醒目的CTA的形式；另外左上角也加了一个其他页面都没有的个人头像。如此特殊设计一个标签页且将其置于5个标签页的最中间，明显可以看出该页面业务内容在整个app的规划战略中所处的层面是很重要特殊的（加强社交布局？）。

因此，该页面的重设仅作微小的优化：

1.    截图可以看出，当前页面可明显看到的button只有4个，第5个图标仅露出了非常小的部分，用户第一眼很难捕捉到后面的button，这个问题势必是在button设计的适配过程中疏忽导致。微淘页面的tab button是固定的，用户如果先浏览的是微淘页，然后浏览该社区页，如果遇到的是这样不够清晰的button栏， 很容易就按照已经形成的心智模型浏览下去，亦即认为这里的button也是固定的。因此需要修改button的宽度以适应在不同屏幕分辨率下第5个图标都能够显示一部分但不显示完整，打破用户已经形成的心理认知模型，减少用户学习成本，第一眼就能够得知该栏是可滑动的。

2.    仔细可以发现，当前选中的tab button不但背景颜色是相对更深的黄色，而且button底部还有高度为6dp的颜色更深的黄色，从视觉上看，这三种不同程度的黄色的差别作为强调识别并不足够清晰（第一个颜色的HSB值分别是42 84 100；第二个颜色为42 100 100；第三个颜色为40 100 100。前两者改变的是饱和度，后者改变的是色相）。如果第二个颜色相对背景颜色足够醒目，完全不必要再加上第三个颜色的区分方式。

3.    Tab button的图标选中状态与为选中状态的差别还体现在图标本身的颜色填充里：8个图标的选中状态的颜色填充方式并未全部统一，甚至可以说是完全混乱。加上图标本身相对较小，有的同一个图标填充前与填充后的视觉差异太小。但由于填充的黄色是与底部“晒好物”、“问大家”图标的填充颜色一致的。因此对于是否取消填充这种黄色这里采取保守态度。优化主要对填充方式做改变，“装修”图标线条添加一像素圆角。 

4.    经过对比，该页面右上角的全局消息图标所处的位置（不管是否有消息提示红点）与其他页面的全局消息图标不对应。而此图标是独立于本页面的，也就是说完全没必要刻意改变它的位置。设计师大概是为了左右两边的头像图标与中间搜索栏的水平距离保持一致而疏忽了。重设采用方法的是调整头像、消息图标与搜索栏的距离，使消息图标保持与其他页面一致的位置。

第五部分：购物车页

购物车页面的“编辑”、“领券”采用的是文字形式，全局消息是图标形式。在整个app中，直接用文字形式作为button的很少。此处应该是出于文字是最直观、学习成本最少的方式的本意。这样的做法个人认为有值得探讨的可能。单纯的文字形式尽管明了可用，但是作为一个CTA的button，这样做是否足够好用？比如app bar的编辑二字，用户能够在第一眼看到的时候就明白这是一个编辑“整个购物车”的“button”吗？出于这样的考虑，单个店铺领券、编辑适当减小字号并添加一个圆角边框，以更直观地体现可点击性。

第六部分：我的淘宝页

这个页面集中了用户个人信息与订单、工具、设置等功能。也是button最多的页面。这样一个页面内的图标承担着很大的功能指示作用，怎样在高效传达信息的同时保持同层级button的内容关联性与风格统一性、不同层级button之间不偏离app整体调性是需要考量的问题。

1.    设置页面主要承担用户个人账户、app相关设置、退出账户等功能。个人认为完全没有必要采用文字形式。采用图标形式与右边的两个图标视觉上更讨好眼睛，也就是更好看；同时设置button作为一个绝大部分app里都有的组件，采用很常见的图标并不会增加用户学习成本。（除此之外，设置是否可以考虑整合到用户头像？当前的方式是点击用户头像进入用户个人资料设置页面，而当前的设置button里也包含了个人资料；那么是否可以从视觉角度出发，去除左上角单独的设置button，代之以用户点击头像进入设置页面？）

2.    相比之下，换肤图标就 是一个在没有文字辅助的情况下用户并不能高效辨识的图标。因此将其改为更常见的图标，降低学习成本。（还有一个疑点就是为什么这里出现了换肤图标，下面的必备工具栏内也有换肤button？）

3.    然后是用户个人头像。头像本不属于本次重设范围内，这里尝试优化当前的展示形式，将头像、用户昵称、淘气值改为横向展示效果。目的是当前的展示方式下，用户头像的上边缘是高于app bar下边缘的，这就导致在滚动该页面的情况下，会出现头像向上滑到一定位置时突然被app bar截断的不好的体验。重设后的展示避免了这种情况，并且完全不增加页面被占用空间，相反倒适当填补了当前的大块空白背景。

头像下方4个H5页面入口图标，这种针对特殊活动的非系统性图标最大的要点就是突出创意性并注意互相之间的统一，而与其他系统性图标的统一性就不是那么重要的考量了，不在本次重设范围之内。

4.    必备工具栏内的图标亦不做重设，仅提出可以改进的几个点。点击查看全部工具，可以看到，有的图标之间并没有非常紧密的关联性但是图标采用了非常相近甚至相同的颜色，这样容易给用户造成这样的图标之间的是有关联的心里预设。这样的环境中图标的颜色具有很强的视觉引导性，设计师需要把控其间的差异。

总结：

整个流程下来，会发现有很多大大小小的问题。

1.    关于怎样优化的问题：有的是不需要太多考量可以直接优化的（比如没有对齐的情况），有的是需要考虑其他因素的（是否会影响点击率？图标关系到成交率？）。不管哪种情况，结合图标当前所处的大、小环境总体考虑才不会顾此失彼或者出现头重脚轻的情况。

2.    关于文字形式还是图形形式：将信息图形化的目的主要是为了提高辨识度；在保证准确性的前提下追求统一性、创意性是多数时候的做法，所以问题就是中间的界限如何限定。如前所述的设置button，文字形式固然是最直接准确地传达信息的方法，但是当前的环境是其右的两个图标都是图形形式，这个时候没有理由不图形化。

3.    关于屏幕适配：社区页面出现的那种情况可以通过改变button的宽度解决。设计之时需要考虑屏幕分辨率带来的二次问题。

4.    其他：分析该app的过程中发现了很多规范上的问题。当然因为产品内容本身涉及到非常多的部门，同时还要考虑业务对设计方面的间接要求，种种因素导致统一性上受到牵制（比如app辅助色传达不清晰，有的同层级页面app bar背景色不一致，pop-up弹出窗图标样式、背景色不统一等等很多问题）。当一个产品团队合作成员数量很多的时候，设计规范怎样让设计师及相关成员更好地协同工作以保证app的统一性是很值得思考的问题。

可以更详细地分析这个APP。本人了解到的是手机淘宝团队是有设计规范的，只是单纯从用户的角度来看、来使用的时候，并没有感受到设计背后的规范带来的直观优秀体验。庞大的逻辑需要更严谨的执行。