如何从站在设计的角度从表现层去优化一张页面。表现层决定了界面上的元素能否很好的被用户感知，然后达到产品或者设计的目标。

案例：医疗界面首页

先来看一下优化前后的对比吧，页面层级也不算复杂，主要是基于视觉层面进行考虑。我们先来分析问题：

导航栏区域

搜索框在全页面中的视觉层级较弱，而且不明显。当目标不明确的用户到此页面时，无法快速找到搜索入口，搜索图标与文字大小也不匹配而且输入框的提示问题字体颜色也较弱，文案固定的情况也无法为无目标的用户提供参考价值。

重要功能

1.功能入口的两个颜色搭配起来，显得过于陈旧。饱和度也不统一，蓝色饱和度低，绿色饱和度高。2.卡片中的两个图标样式不统一；3.文案排版没有规范，辅助文案大小不统一。

功能入口

五个图标的视觉大小不统一，而且设计形式过于单一，图标的颜色也偏脏了，像是几年前的设计风格

Banner

首先从设计风格来看，淡蓝色与深棕色搭配并不协调，很突兀；信息排版的文案也没有突出重点，行动按钮也不突出。其次这样的banner在医疗产品中出现，有很强的的营销感，并没有传递出一种专业的感觉。所以应该简化装饰，突出内容，尽可能弱化营销，让banner看起来更像是产品自身内容，这样用户才有可能点击。

名医推荐

信息排版没什么大问题，但是这里的屏效太低，一屏就能只能看一个半，其他推荐的医生曝光太少。并没有达到设计目标。所以应该换一种排版，尽可能的展示更多推荐医生。其次设计风格上，投影太生硬，太黑。

名医课程

如果是产品内部的营销课程，那么该模块的设计过于普通且没有吸引力，对于用来说就是一个普通的列表。所以设计师在设计形式上就必须要花多的功夫去思考，如何去向用户传递专业和信任感，而不是这样常规的排版。

案例修改

针对以上罗列的问题，下面进行一些修改，属于主观表达，仅代表我自己的想法。不足的地方欢迎大家指正，互相进步。

顶部导航优化

为了在首页中突出搜索框，添加了主色描边，强化了提示文字。并且在页面头部加了一些弥散渐变，丰富视觉。当然强化搜索框的形式有很多，加投影、改颜色等都可以。这里仅演示一种方法

功能入口

调整颜色色相与饱和度，统一左侧文案信息排版规范，将两排文案精简成一排，提升阅读效率。右侧图标采用了辨识度更高的图形，利用内阴影，提升整体质感。

功能入口二

调整图标颜色为产品主色，并且利用不透明度变化提升图标设计细节。可能有的同学会说每个图标用不同的颜色，识别起来会不会更轻松，这样做当然没问题。但是一定要控制好颜色的数量，最好不超过4种，过多页面就会很花，反而增加了用户识别负担。那什么情况可以用同色的图标，如果想页面看起来更统一，或者功能属于统一属性等，就可以使用同色系的图标。

Banner

前面提到，为了区别于常见banner形式，我们最好设计成看起来是产品自身的功能入口，用户看到后才不会养成惯性一闪而过。所以降低了营销感，突出内容本身。

名医推荐

为了提升名医的曝光，将布局改为四宫格。梳理信息优先层级，将擅长内容替换为更关注的科室。提升了信息的识别效率。

名医课程

区别于普通样式，可以加入医生形象，传递专业感。并且加入了蓝色渐变，以此来提升该模块的吸引力。“111人正在学习”也符合大众的从众心里，以此来吸引用户点击。

大家在做完一张页面后，最好是花时间来自审一下：1.这张页面的主要目的是什么，想传递出哪些信息。2.信息展示的层级是否合理3.基础的设计规范是否满足4.界面的浏览顺序是否满足产品目标...

Powered by Froala Editor