扁平化网页设计的表现大多体现在配色、字体以及布局排版方面，这三样结合得当都能制作出漂亮的网站。在国内很多企业网站的布局架构几乎是一样的，最多就是LOGO和一点颜色变化，看不出什么特色和创新。

作为设计师，应该多花点心思在创新上，比如网页上的布局，其实它是可以变化多样的，正如今天为大家分享yi xie布局排版好看的网页设计作品，大家可以参考这些布局的设计，从中获得一些灵感。

附加精美流程图设计与赏析。

（以上图片均来源于网络）

（精美流程图设计）

  蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

  更多精彩文章：

       ui界面设计之网站设计案例欣赏(一)

       超赞的创意页面排版设计，打造“视”不可挡的网页设计

一、导航的定义

牛津词典上有对Navigation一词在互联网领域的解释：

the way that you move around a website or the Internet when you are looking for information

翻译为：你在浏览网页时四处移动寻找信息的方式

也就是说用户看到的，影响其寻找信息的因素都可视为导航。

二、为什么需要导航

交互上：

用户在使用传统方式阅读时，所处的空间是单向的，只能向前或向后翻页；

而在网页领域，所有的内容都存放在各自的URL里，信息在多维度多空间里相互交错，各有联系，可跳跃的阅读方式让用户很容易失去位置感。

试想一下我们在大型商场里晕头转向的场景，会常常抱怨其导视系统的糟糕，网站有过之而无不及。

业务上：

从潜在用户想要了解某个产品时，导航就开始起作用了

影响点击量：网站排名高低，搜索带来的点击量

影响转化：网站的易用性，访问者转化为潜在客户和客户的概率

设计者创造易用的表单，展示有用的信息，建立流畅的交互，这些都要靠导航来引导用户达到。

三、从信息构建模式给导航分类

1.内容

内容涉及到的东西很多，内容之间的相互关系也不确定，因此不同内容导航需要不同的导航模式

1）种类

不同行业，不同业务重点对内容的分类方式不同

种类可以是符合大众认知，具有并列关系的信息，

也可以是按照设计者的意图创造出的种类，并区分其优先级

种类导航的出现无形中建立了用户心中对某类产品的预期信息架构，使其在浏览信息时更有方向性，例如在浏览一家服装店铺时，用户在进入导航列表前就对种类有了预期，诸如男士上装，男士下装，女士上装、女士下装、配饰，包袋等。

2）字母

以字母顺序排列信息。适用于信息量超大，且不存在主次、重要级关系的内容。常见于联系人列表，地区导航，介绍人名，合作伙伴等场景。

3）自然属性

以时间，地理位置等属性组织信息架构。

时间：展示在一段时间内发生的事情，以时间为导航可以直观地感受到信息的变迁，立体感更强。例如一个企业的发展历史

地理位置：展示在不同地理位置的事件信息，空间感更强

2.层级

也叫做结构导航，根据信息的上下级关系、主体信息架构等因素将信息有序排列。分为全局导航和局部导航。

全局导航往往指页眉和页脚，存在于网站的大部分页面，便于用户随时跳转。 

页眉：用户进入网站关注到的点，将网站进行功能分类后，将导航文字放置在页眉上

页脚：此空间是为隐私和法律链接保留的，还会加上联系方式，也有许多内容繁重的网站会把站点地图放置在页脚。

雅各布·尼尔森把全局导航在网站中的作用形象地比喻为机舱座位下的救生衣 ，你只要知道它哪 ，而不必时时关注它，需要时立即找到穿上即可。

局部导航是是更深层级的导航，不作用于全局，存在于特定的功能区，可分布在页面各部分。

3.功能

业务上必要的一些功能入口，通常贯穿全局，例如很多网站的个人信息，用户需要在大部分时刻都可直接接触到该功能。根据用户的心理模型，这类功能会存在于页面的右上角。

4.搜索

用户使用较多，也是最重要的导航方式之一。当带有明确的目的性或无法通过内容，层级导航找到想要的信息时，用户会在搜索框内尝试输入一些信息。

而让用户主动搜索会出现下面的情况：用户无法清晰表达或错误地表达其想要搜索的内容，导致系统无法匹配上对应的信息，

为了让搜索导航更有效地发挥其作用，出现了自动填充，模糊搜索，推荐搜索，搜索历史，搜索纠正等一系列导航功能，这些功能都是为了想办法将用户引导到他可能需要的页面上。

5.网站地图

以类似地图的样式来展示网站页面之间的层级关系，并提供相应的链接。可视性强，便于用户找到想要的信息。

四、导航的常见样式

1.文字与图标

考虑到排版布局，样式美观，除了用文字本身的含义用作导航外，图标也经常被用作导航，分为纯图标导航和文字+图标导航，这里图标的风格会很大程度上影响这个页面的视觉效果

2.横向导航

将导航文字横向有序地排列，独立性强，占用空间较少，可放置的导航条目有限，但这个局限性也可以成为优点，它要求设计师创造出简短，易于理解，且满足业务需求的标题。

当内容过多时会选择在单个导航下放置下拉显示二级导航，下拉显示的二级导航可以很长或采用滚动显示的方式，这种临时的模态导航可以最大限度地利用到屏幕空间。

很多网页的横向页眉导航会保持滑动时固定的样式，便于用户时时找到主页面的入口。

3.竖向导航

占用空间较多，通常放置在页面左边位置，用不同的底色或分割线将其与主内容分开，内容文字一般采用左对齐，便于阅读，导航层级过多时会采用点击展开的样式，上下滚动的常用交互也让竖向导航容纳的内容更多。

部分竖向导航是可隐藏或收缩的

4.混合导航

在拥有复杂信息的网页中，会将横向导航，竖向导航等其他样式混合使用，

5.面包屑

面包屑导航是位于页面顶部或底部的一行内部链接，在不同层级的链接之间用“>”分隔，可让访问者快速返回上一版块或根网页。许多面包屑导航都将内容最宽泛的页面（通常为根网页）设置为最左边的首个链接，并在右侧列出更具体的部分。

占用很少的空间并提供主导航实现不了的深层次定位功能。

面包屑的使用让网站的结构更加清晰，强化用户的心理层级模型，并实现跨层级跳跃

6.分页与无限滚动

分页显示的内容数量固定，有时用户可自定义内容数量，此外页面上通常有当前页，任意页，上一页，下一页，首页，末页的链接。具有定位性，当用户需要回到之前浏览过的某个位置时，可采用分页的形式

无限滚动希望用户只注意当前页的内容且不能快速到达页面的底部，适用于无法预测用户何时能够找到需要的信息的情况。在一些图片展示，内容推送的网站上设计者不知道用户想要的内容，同时也要展现网站内容丰富，资源库深不见底的特质会采用交互上更简单的无限滚动模式。

7.突出的版式

一些设计者想要用户优先注意到的内容，会采用突出的版面设计，通过改变文字图形的大小，颜色等与其他一般性内容形成对比或使用海报，弹窗等形式试图引导用户行为。

五、导航设计的建议

根据上面第三和第四点，分别从信息层和表现层给出导航设计的建议

信息层

1.信息结构尽可能扁平

多花一些时间去考虑信息体系结构，可根据首页规划全局的导航，首页是用户在网站中导航的起点，考虑如何让用户尽可能方便地从网站上的宽泛内容（首页）转到他们所需的更加具体的内容。

2.重视导航的顺序

当同一级别的导航数量很多时，顺序变的更加重要。根据用户的认知习惯，开头和结尾作为关注度（看到的）和保留度最高（刚刚发生的）的地方，其内容更加突出。

3.SEO优化

良好的网站导航结构可以帮助搜索引擎了解哪些是网站站长认为重要的内容，尽量用一些具体的描述词语而非大而宽泛的词汇，例如“产品”，“服务”。虽然搜索引擎的搜索结果是在页面级别提供的，但它也希望了解页面在网站这个更大层面上的角色。导航中关键词的使用会影响其在搜索引擎中被搜到的质量。

4.创建网站地图

用于显示网站结构的一个简单页面，通常包含网站页面的分层列表。如果在网站上查找页面时遇到问题，用户可能会访问此页面。此外搜索引擎也会访问此页面，以便使抓取范围尽量覆盖网站的全部页面。

表现层

1.一致性

同一类型导航的视觉表现与交互操作在整个网站页面中要保持一致，清晰一致的导航可以让用户预见每一步操作的结果。

2.清晰性

颜色与大小：文字颜色与背景颜色的对比，标题与内容的字号大小，这些最基本的元素直接影响导航的清晰度

留白与装饰：与平面设计中原理一样，留白让网站页面布局平衡，张弛有度；装饰与留白相结合，让导航表现得更精美，也有助于视觉分割

强调与弱化：有些导航起引导作用需要突出，有些起辅助作用需要弱化，强弱对比结合丰富了视觉层次，并让导航起到它该起的作用

3.凸显超链接

将可点击的超链接文本与常规文字在样式和交互上进行区分，常见做法有下划线，文字颜色，加粗，鼠标悬浮变色。

4.在常规位置放置导航

网页发展的几十年让用户对网页产生了一些常识性认识，例如用户会在进入一个网站时去页眉或侧边栏寻找主导航，尽量遵循这些常规用法。

5.导航数量不宜过多

无论是全局或局部导航，数目越多用户处理和记住信息的难度越大，可以通过分组分层来提高信息浏览效率

6.侧边栏

侧边栏导航会占据一部分的屏幕空间，将其与主内容部分进行分割有助于用户，例如用反差较大的背景色形成导航区与内容区

加入导航收缩功能，以便更好地利用屏幕空间，特别是在一些小尺寸屏幕上。

六、导航设计审查：

在做完网页设计后可以根据浏览网页的一般习惯，通过以下几个方面对导航设计进行简单审查

问自己以及团队其他成员以下几个问题

1.这是什么网站

2.网站有哪些主要内容

3.导航看上去是否像是导航，可点击的

4.导航的名称是否会引起歧义

5.现在处在网站的哪个层级

6.如何进退

7.具体的功能是否会在预想的地方出现

8.怎么进行内容搜索

借助工具

9.使用Google Analytics对网站的访问情况进行回顾并进行一些评估

例如一些页面的浏览量极低于预期或相较于同类页面浏览差距过大，就要考虑是否是指向该页面的导航出现了问题。

总结

导航的最终目的是简化获取信息的过程，具体以何种方式表达还需要取决于业务内容，但总体上要以用户易接受的方式呈现。用户若是能在获取信息的过程中按照设计者所想的方式前进并感受到畅通无阻的快感，导航便是成功的。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

网页中超过95%以上的信息都是通过文字的形式呈现。 然而，页面文字并非毫无章法的随意呈现。事实上，更具可读性、视觉效果以及独特排版和布局的网页文本设计，更能吸引用户，提升用户愉悦度。这也是为什么越来越多的设计师日益重视网页排版设计的重要原因。

BS界面是基于浏览器的界面，随着人们对于用户体验要求的不断提高，BS界面的设计要求也越来越高，

接下来为大家分享一下我收集到的案例：

（以上图片均来源于网络）

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

  更多精彩文章：

       ui界面设计之网站设计案例欣赏(一)

先来了解一下项目的背景。Conduira online是一个线上的教育平台，为准备考试的用户提供有用的工具和资源。这个平台目前有一个侧边导航栏，上面有11个选项。后来由于平台的变化，将主导航的选项缩减到3个——主页、实习和课程。

导航的数量变少了，团队又迎来了新的问题：是应该继续保留侧边导航的设计样式还是切换成顶部导航的样式呢？

为了做出最合理的选择，我们需要回答三个基本的问题。

主导航中有几个选项？

在选择导航时回答这个问题很重要。这里介绍一个有趣的的交互概念叫做视觉固定（Visual Fixation）：注意力一直保持在同一个地方。

在顶部导航中，一个视觉固定点通常只适合一个选项。然而，侧边导航上的单一视觉固定点可以同时容纳两个选项。

结果很明确。与顶部导航相比，用户在一次视觉观察中可以在侧边导航上查看和感知更多菜单选项。当然顶部导航也有自己的优势，为每个菜单项赋予各自的权重，而不是让它们的重要性被其他选项分散。

对于具有过滤选项或带有二级菜单的电商网站，视觉固定的概念起到了非常重要的作用。因为在这些情况下，我们希望用户能够在单一的视觉点上尽可能多的选择。

Tips：这里的选择仅仅取决于界面上有多少选项。如果主导航的菜单项不多于5个，只需使用顶部导航，这样能够更好地控制用户在整个平台上的体验旅程。

主导航与选项优先级的关系？

用户在浏览网页或App时会有各种各样的浏览顺序，其中一种就是「F型模式」。

看起来像这样：

F型布局的特点是将注视力集中在页面的顶部和左侧:

• 用户首先以水平移动的方式浏览内容区域，这个动线构成了F型布局的顶栏；
• 接下来用户扫描页面左侧的垂直线，进行第二次水平移动浏览。随着路径越来越长，阅读覆盖的区域一次比一次短，构成了F型布局下面的部分；
• 最后用户以垂直移动的方式浏览整个页面的内容。

这种模式的含义是同一页面上的第一行文本比后几行文本受到更多的关注；每行文本左边的几个字比后面的文字接受度更多。

因此，在顶部导航中最左边的选项比其他选项具有更多的视觉权重，因为它位于主要视觉区域，优先级更高。

侧边导航采用了垂直移动，这是用户浏览网页的一个自然方向，但是选项优先级的排序是个限制。当选项的优先级相同时，可以使用侧边导航，这样用户就可以完整浏览列表并确定对他们重要的内容。

是否考虑使用二级导航？

如果是的话，可以考虑利用以下两种设计样式：

水平导航——在页面顶部设置一个主导航，在主导航下面设置二级导航进一步来区分内容。

侧边栏——在顶部设置一个主导航，然后在侧边设置一个侧边栏菜单来处理其他内容。

总结

顶部导航和侧边导航之间的选择实际上取决于以上三个基本的问题。

另外由于现在的设备有了更大的屏幕尺寸，如今许多设计趋势已转向侧边导航，因为它看起来更干净并优化了更多的屏幕空间。

最后将导航的选择归结为两点：

• 主导航包含的选项数量;
• 是希望用户根据优先级浏览项目，还是希望用户可视化地浏览并根据其偏好选择项目。

文章来源：优设    作者：Clip设计夹

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

在这个项目中，主要任务是为旧金山最古老的玩具品牌 Jeffrey’s Toys 设计一个全新的品牌电商网站。

新电商网站最主要的目的是吸引顾客前往线下店铺选购商品，同时也希望通过快递和门店自提的方式来完善线上销售流程，拓展消费群体。

该网站需要巩固品牌核心业务价值观：传统，有趣和创意。该网站还需要通过强调其庞大的库存体量和手工精选商品来将 Jeffrey’s Toys 和其他电子商务零售商区分开。

该网站的主要业务目标包括：

• 能快速定位商品

• 每一个商品都有单独的详情页

• 用户能成功购买一个或多个商品

• 为爆款商品引流

用户分析

1. 用户画像

谁才是这个网站真正的用户？当我接到这个任务的时候，客户已经绘制出了3个用户画像，每个用户画像都有特定的需求和痛点。

△ 客户绘制的三个用户画像

基于三个用户画像，我确定了该网站要满足的用户需求，同时也考虑了Jeffrey’s Toys的需求。

确定的主要需求是：

• 通过清晰的商品组织分类来提供流畅的电商购物体验

• 通过商品搜索使用户能够快速找到想要的商品

• 通过实用的商品推荐来体现 Jeffrey’s Toys 的专业以及庞大的库存

• 通过与用户建立品牌关系来树立信任

• 通过产品细节信息来确保用户选购合适的商品

• 通过商品评论来辅助用户作出消费决策并允许用户进行商品反馈

• 通过的下单结账流程简化购买行为并节省用户时间

2. 竞品分析

为了获得启发，我确定了3个主要竞品，特别是旧金山的精品玩具店；还有3个玩具零售市场的间接竞品。直接竞品我分析了包括 Ambassador Toys 、 Amazon 和 TANTRUM 。间接竞品分析了 Lululemon 、Ikea 和 CVS 。竞品分析的目的是比较并找出这些电商网站的共同特征以及 Jeffrey’s Toys 能够脱颖而出的潜在机会。

竞品分析最重要的收获是了解了不同的电商网站的商品选择模块以及网站整体的布局。这些信息有助于巩固我第二阶段的研究。

△ 比较直接竞品和间接竞品的特征

2. 思维导图

在完成竞品分析之后，我把这个项目中用户的需求和客户的需求列成了长长的信息清单。之后我又通过思维导图来理清了在这个项目中用户的需求和客户的需求。思维导图帮助我将信息组织成更清晰的想法，同时在各个想法之间建立层次结构关系。

△ 用来理清信息和想法的思维导图

信息架构

接下来我通过卡片分类法来构造网站的导航系统，卡片分类法是一种利用人们现有思维模型的研究技术。在构造导航系统时，我了解到94种商店中最畅销的商品库存信息。拥有如此庞大的商品库存，就很有必要通过清晰易懂的方式组织、分类库存信息，以便用户能够快速的找到他们想要的商品。

1. 卡片分类

△ 卡片分类的初期阶段

开放式卡片分类：我要求9位参与调研的用户通过他们自己觉得合理的分类规则将94种商品分类，然后给每个类别加上他们认为能够准确描述该类别的标签。这样做的目的是对于网站潜在的商品分类方式及类别名称有一个大致的了解。

封闭式卡片分类：基于开放式卡片分类的结果，我从最常见的类别标签中创建了13个预定类别。然后，我进行了封闭式的卡片分类，我邀请了20位参与调研的用户将商品逐一分类到我之前预定的13种类别中。封闭式卡片分类有助于让我在进行设计之前能够清楚判断这些类别是否符合大部分网站用户的分类逻辑。

△ 通过卡片分类得到的13种商品类别

2. 站点图

根据卡片分类以及竞品分析的结果，我绘制了网站的站点图来明确整个网站的框架结构。这是为了确保所有产品都放置在用户期望的位置，同时使购物体验更加直观。

△ 站点地图

3. 系统架构图

为了对用户将会如何浏览网站有一个全面的概述，我绘制一张系统架构图。这样做的主要目的是为了了解网站应该给用户提供什么功能以及功能拓展的广度。我还通过系统架构图来探索电商网站和实体店铺之间的联系。

△ 系统架构图演示用户将会如何浏览网站

4. 用户流程

在确定了我需要给用户提供的体验「全局」之后，我为每一个用户画像创建了不同的用户流程，通过不同的用户流程来使购物体验更加符合他们的需求。构建用户流程的目的是确定每个用户为了实现各自的预期目标经过的页面和操作步骤。这不仅能使我专注于每个用户的操作，也使我能够在设计网站的时候将功能拆分，以便给用户提供更佳的购物体验。

我绘制的第一个用户流程是关于用户画像是 Jenny 的。Jenny 最主要的目是为自己的孙子购买初级魔术玩具。Jenny 的用户流程（如下图所示）表明了她是如何搜索初级魔术玩具，以及为了成功购买她可能采取的几种不同路径。

△ Jenny 的用户流程

Debbie 和 Jenny 都希望能有一个的下单结账流程，所以很有必要在用户流程中绘制出下单结账流程。下图的用户流程显示了Debbie在选定一个特技自行车之后该如何进行结账下单。通过允许她登录自己的帐号，自动输入她的结账信息来简化她的结账下单流程。

△ Debbie 的用户流程

开发阶段

1. 草稿

在我整理了前期获取的所有信息之后，我就开始着手设计网站。基于之前整理出来的用户流程图，我开始绘制几个主要页面的草图，同时快速思考出几个不同的网站布局方案。之后我邀请3个用户参与了用户调研，以验证这些方案是否同时满足客户和网站用户的需求。

△ 网站首页和品类页面的初稿

2. 线框图

基于用户对草图的反馈和我个人的想法，我开始使用Figma来绘制线框图。整个过程中，根据优先级不同，优先考虑最能满足网站用户的功能。

△ 网站首页和产品详情页的线框图

原型制作

1. 主页

首页我尽可能的保持简洁，避免用户进入网站时被过多的信息干扰而不知所措。

首页放置了全局导航、辅助导航和搜索栏，方便用户快捷的找到自己想要的商品。首页还放置了新品推荐，因为新品推荐能够展示品牌丰富的库存，同时能为用户提供有用的购买建议。我想通过介绍 Jeffrey’s Toys 丰富的历史来树立用户品牌联系，所以在首页我还放置了「关于我们」部分，用户点击还可跳转到具体的介绍页面查看更多关于品牌故事的信息。在页脚，我放置了其他的用户可能需要的信息。除此之外，我还将用户交流系统放在页脚，这样是为了获得用户想法并在店铺进行活动时通过用户参与提高店铺活动氛围。

2. 商品类别页面

当用户点击商店按钮或者是某个类别之后，用户将会前往一个列出了该类别下所有商品的商品列表页。有个用户画像想要给他的孙子买一个合适他孙子年龄的玩具，所以页面需要一个品类筛选器，同时支持商品按照不同的属性例如年龄、价格和品牌分类也很重要。除此之外，我还通过面包屑导航来方便用户定位页面位置。

△ 商品类别页线框图

3. 商品详情页

在商品详情页，我希望能够提供尽可能多的商品详情来确保这个商品是用户想要的。

在页面下方，网站会基于当前商品给用户推荐其他相似商品。在商品详情页，产品评论区占了很大一部分，因为用户可以在产品评论区反馈商品信息，便于树立用户信任，同时用户能够通过其他用户的评论来作出更明智的购买决定。为了简化下单流程，我设计了一个购物车预览页，用户在购物车预览页可以预览商品信息，用户每次将商品加入购物车后都会出现购物车预览页，在购物车预览页面，用户可以很方便的点击「选好了」按钮而进入结账下单流程。

△ 商品详情页线框图

4. 购物车预览页

当用户点击「选好了」按钮或者是购物车按钮，用户将会进入到一个如下图所示的购物车预览页。这是结账下单流程的第一步，用户在购物车可以管理他们所选的商品，作出合适的调整。用户在下单时，可以选择到店自提或者是物流配送，设置到店自提是为了引导用户去 Jeffrey’s Toy的线下店铺，同时降低运输成本。

△ 购物车预览页线框图

5. 结帐页面

客户提供的三个用户画像的主要痛点之一就是想要有一个的结账流程，所以我得确保结账下单体验要尽可能的流畅。作为一个回头客，用户可以选择登录自己的帐号，并自动保存物流信息和支付信息。我决定在一个页面上承载全部的结账流程，这样方便用户在结账流程中任何时刻都能编辑信息。顶部的进度栏显示了下单结账流程有多少步，用户当前在哪一步以及用户还剩下多少步骤。

△ 登录页

△ 下单页

△ 订单查看页

6. 其他画面

我还创建了一些其他页面，例如订单确认页面。订单确认页面明确告知用户结账流程已经完成了，用户还能在订单确认页查看有关订单的其他信息，以供参考。

我创建了一个店铺联系页面，当用户在网站找不到想要的商品时，可以在店铺联系页面查询线下店铺商品情况以及店铺的营业时间、位置和联系电话。

除此之外我还创建了一个「关于页面」用来着重强调 Jeffrey’s Toys 与其他电商网站例如亚马逊的区别。我还在这个页面介绍了Jeffrey’s Toys 长达60年的独特历史，以增强用户对于品牌传统、有趣和创意的商业价值的印象。

△ 订单确认页

△ 联系方式页

△ 公司介绍页

7. 可用性测试

在完成线框图之后，我就开始绘制网站原型以便进行可用性测试。这使我能够评估用户将会如何与网站进行交互，也能让我评估网站是否满足了用户的基本需求。在进行UI设计之前，通过中保真原型进行可用性测试来获取潜在用户真实、关键的反馈是很有必要的，可用性测试还能巩固网站的功能需求。

我邀请了4位用户进行可用性测试，为了让他们吻合用户画像中的用户特征，我指定了三种用户场景来让他们完成测试。这三种用户场景包括：

• 您需要为您的女儿购买一个玩具。您会怎么查找商品并完成购买。

• 您可以通过什么方法知道 Jeffrey’s Toys 下个月将要举办的店铺活动。

• 当您在网站上没有找到您想要的玩具时，您将如何查询并购买。

这些是我通过可用性测试得到的用户反馈：

• 总体而言，用户能够轻松地找到想要的产品和信息

• 在结账流程中，促销活动部分会分散用户的注意力

• 部分用户不想通过电话来查询商品信息，需要提供其他的查询方式。

• 部分用户觉得前往线下店铺的引导部分还可以增强，目前的引导不够。

△ 可用性测试得到的反馈

8. 后续步骤

这个案例研究展现的只是电商网站设计的开端。后续我将会继续进行可用性测试，并进一步迭代我的设计。如果有更多的时间，我将会着重探索更多从网站引导用户前往线下店铺的方式。我也将会继续丰富网站页面并将Jeffrey’s Toys的视觉风格融入到网站中。下图展示了我最初设想的UI设计风格。UI设计我希望秉持简洁、创意、传统的设计理念。

△ 首页

△ 商品分类页

△ 商品详情页

编辑总结

本文以玩具购物网站这个小案例，清晰地记录了一个较为完整的产品设计流程。不论是设计方法，还是记录方法，都可以借鉴运用在工作、汇报和作品集上。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

今天分享一个很多设计师头疼已久的问题，关于网页响应式布局原理和设计方法。文章主要包含三个部分：

• 响应式页面是什么
• 响应式布局的规则
• 响应式的设计流程

所以废话不多说，我们直接进入正题吧！

响应式页面是什么

在过去，网站通常就是为了电脑大屏幕展示而设计，如果用手机访问，只能在巴掌大的屏幕里看缩小版的页面。虽然还有手机专供的 WAP 页面，但因为太简陋也无济于事。

随着智能手机、3G、4G、HTML5 的普及，使用手机访问网站的人越来越多，为了让用户在手机上看到更合适的布局，且兼顾开发的效率，响应式的概念就被提出了。

通俗解释，就是通过一套代码，可以无缝匹配符合电脑、平板、手机预览效果的前端技术。比如下方 Nike 官网，就是应用了响应式设计后在不同客户端、分辨率下的效果。

虽然响应式的应用越来越广泛，但是从零开始去写一个响应式效果的网站对于程序员来讲是非常复杂的，因为当中包含了大量的逻辑、判断、适配内容。

所以，今天市面上看见的响应式网站，多数使用了一些开源的代码或者框架。而应用最广泛的，就数 Bootstrap 了。

之所以提这个，是因为既然开发使用了别人写的框架，那么对于我们的设计稿也就上了紧箍咒，我们需要根据框架的要求来设计界面，这会稍后具体解释。

还有个问题，就是为了实现平板、手机和电脑不同的预览效果，并不是只有响应式布局一种技术，还有另一种技术 —— 自适应。

通俗点说，自适应就是为不同客户端分别提供一套独立的前端代码，和响应式使用一套代码适配多种客户端不同。

响应式适合应用在一些简单的官网、展示类页面，展示的内容大致相同。而自适应适合应用在需要在不同客户端类型有较大差异的网站，这样只使用一套前端代码就完全行不通了。

比如爱奇艺的官网，为了符合用户体验，在移动端网页布局中精简替换了大量的内容，和电脑版已经没有太直接的联系了。

两种做法并没有好坏之分，只有适不适合项目之别。了解了它们的不同，我们就可以进一步学习响应式的规则了。

响应式布局的规则

响应式布局的规则并不是特别复杂，只要注意两个问题：

• 分段响应规则
• 组件宽度适应

1. 分段响应规则

敲黑板，响应式的响应，面向的核心对象是浏览器窗口的宽度，而不是设备类型。所以打开使用响应式的网站，我们通过改变浏览器的宽度，就可以看见不同的展示效果，比如下图的星巴克官网。

我们可以发现，浏览器宽度每达到一个数值（Breakpoint）的时候，页面的排版和样式就会发生明显的变化，而这就是响应式设计最重要的功能 —— 分段展示。

也就是说，响应式规则就是为页面分配不同的宽度区间，每个区间有各自展示的样式，用来应对不同的场景和设备类型，常见的适配区间大致如下：

包含图片截图 320-800 ：移动端收集屏幕 800-1200：平板或上网本屏幕 1200-无穷：一般的电脑显示器

面对分段式的布局、样式变更，我们就要关注到底发生了哪些变化。总结起来，可以简单的归纳成三种组件的调整：内容增减、布局调整、样式调整。

第一种，内容增减。即部分模块在不同的分段内会有显示和隐藏的状态，尤其是一些网页端的内容觉得在小屏幕上展示会太多了，就在小屏幕场景中隐藏掉。

第二种，布局调整。主要是模块的排列和顺序发生变化，常见的就是模块一行的列数发生改变。

第三种，样式变更。即针对不同的分段设计完全不一样的样式，最多应用在导航栏的设计中，会为最小的分段使用 iOS 的 Tabbar 或安卓的 Menu 样式。

所以，归纳起来，就是页面针对不同的分段展示不同的结果，即页面中的组件触发了对应的变化类型。每个组件都可以应用不同的变化类型，而无需进行统一。

2. 组件宽度适应

分段式响应，是响应式布局的第一层逻辑。而在触发关键值（Breakpoint） 之间的区间，我们拖动窗口的宽度，会发现组件的宽度也随之改动，这就是 —— 组件宽度适应。

组件宽度适应在手机 UI 的适配中非常重要，即完成不同屏幕宽的手机适配所应用的逻辑，所下面我们简单讲讲它的规则。

组件的宽度适应模式主要有两种类型，一种是容器宽度适应，一种是容器比例缩放，比如下面的图例。

容器是一个比较抽象的概念，类似设计软件中的编组，它集合了所有下级元素，但本身并没有实际的内容和样式。在响应式规则中，下级元素并不会和这个容器等比变动，出现下面这种错误的效果。

正确做法是会定义下级元素针对父容器的响应方法，做到容器变更的同时其自身的显示也是合理的。比如相对容器左右间距一致、对齐方向一致、尺寸固定等设置。

而这种规则的设置，就是 Sketch/Figma/XD 中的响应式设置功能。只要设置得当，就可以获得一样的宽度适应效果。

如果对软件响应式功能了解不全面的同学，就可以自己多搜索一下对应的说明，我就不在这里过多的展开了。

再总结一下，响应式的规则就是页面组件先遵循当前分段展示的布局效果，并在这个区间内支持小范围宽度的变更和适应。

响应式的设计流程

响应式设计是一种源自技术的概念，而不是单纯的设计风格、方法，所以设计响应式设计其实就是 「面向编程设计」。

设计界面要吻合编程的真实方法和需求，而不是根据我们想怎么做就怎么做，所以整个流程不能只站在设计师自身的角度考虑，而要和前端程序员紧密沟通，首先确定响应几个宽度区间，以及它们对应的数值分别是多少。

然后我们就要完成对应数量页面的设计，因为前面我们说过，分段响应规则中会有明显的样式变动，这就要求设计师是一定要给出设计示例的，而不能依靠口头描述或程序员自由发挥。

完成这些设计稿以后，我们再进一步确定同一个区间内，组件的宽度适应规则是什么样的。多数情况下，这个阶段使用口述就可以，如果规则比较多，那么就可以在标注阶段把你要实现的效果记录上去即可。

全部设计稿和规则都沟通完毕以后，才进入切图导出的阶段。要提醒一次，在一些特殊的情况下，响应式的背景切图会和普通页面的背景切法不一样，尽可能让前端程序员检查一遍导出的文件。

只要根据上述的流程，在遇到不确定或者不清楚的情况，就和前端程序员做沟通，那么很快就可以将项目输出出来。

结尾

响应式这个概念虽然高大上，但并不是任何项目都要无脑往上套的。因为框架规则上的限制，导致我们很难在响应式页面中使用一些特别复杂、高级的视觉样式，导致最终呈现的效果往往非常简单或者过度依赖图片的质量。

所以，如果在功能较为复杂或需要复杂视觉支撑的网页中，就可以选择应用固定页面内容宽度的设计来完成。

文章来源：优设    作者：超人的电话亭

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

   蓝蓝设计的同事们，在积累了一定经验的同时，也在不断的学习和丰富关于网站及数据可视化的表达方式，搜集资料，作为大屏及数据可视化界面设计资料的参考，分享如下：

希望这篇文章可以帮到您！

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

——-- 网站ui设计 --——

（图片均来源于网络）

  蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

    更多精彩文章：

编者按：这是 UI 设计师 Diana Malewicz 的第二篇 UI 设计分享。这一次，她要设计的是一个控制面板的界面，如何控制不同UI元素的平衡，如何从零开始构建，相当值得学习~

欢迎来到我的「UI设计指南」第二篇！如果你对于我的第一篇文章印象不错的话，那么这一篇应该也会合你胃口：

当然，请注意一点，我创建 UI 界面的过程中，绕过了通常 UI 和产品设计应该有的「用户调研」——「用户研究」——「体验分析」这样的前置步骤，而是直接开始创建干净、一致的 UI 界面。在真实的设计项目当中，开头的这些步骤是无法忽略的！

基本思路和低保真线框图

这一次我们要设计的是仪表盘界面。那么我们从基本的想法开始。

这一次，我们将会设计一个服务于医疗行业的控制面板（实际上，这个设计的初衷来源于我的姨妈，她是一名医生，不仅要治疗病人还要处理大量的文书工作），而整个设计我将会在 Sketch 中完成。

通常，我会从一个非常低保真的线框图开始。我会创建一系列的矩形线框，然后将他们按照需求和大小进行排列，直到最终满足我的想法为止。我选择了一些随机的、但是相近的色彩，确保我能看清位置就可以了。

然后我针对哪些内容在哪里显示，进行了基本的说明。

这就是一个非常原始的界面框架了。

将要分析的竞品排了个期，从最难最不熟悉的开始。为什么从最难的开始，可能是个人习惯吧，吃掉最难的那个，后面就会更上手。突然想起之前读的一本书「吃掉那只青蛙」，很不错的一本书，有时间去温习下。

一个产品，其实会有很多功能点，有核心的主要功能，也有一些辅助功能，也会有一些让你忽略，但关键时刻很需要的应急功能，而这些点都需要去整理出来。

分析前-熟悉产品

这一点很重要，要先熟悉产品。如果对产品都不熟悉，那还是先不要做竞品分析。因为很难判断竞品的功能和风格是否也适合当前产品，因为对产品的不熟悉，会产生误判。

当然，产品的目标人群，产品定位，适用范围等等，都会影响产品分析。

所以，花时间熟悉自己负责的产品，是不能跳过的。

开始前的准备

1. 制定时间规划

最好事先做好时间规划，可以有一整块的时间，这样分析产品时，思绪也会比较完整和连续，可以更专注。计算大概分析一个产品需要花费的时间，最好不要用零碎时间来做，这样只会增加时间上的代价，也会增加挫折感；

2. 确定分析的目的

在「竞品分析」中，想要得到的结论和重点是什么。比如重点可能是产品的报表功能、产品的代码审核功能等等，目的的确定能让分析更有针对性，减少干扰。无目的随意分析，得到的结果也会是零乱不堪，最后只是在浪费时间。

3. 寻找帮助者

每个产品，都有其不一样的特性和产品逻辑，你不一定能够完全 cover 到，甚至有些点就是比较难理解的，特别是偏技术性的名词，这时若有技术同学的帮助，就会如虎添翼。所以最好可以事先找一位产品相关的技术同学，询问这段时间是否有空，帮助你解答一些问题。

个人建议：能够在网上查到的资料，就不要先问人，除非时间成本特别高。一方面也是提升自己解决问题的能力，另一方面，也是节省彼此的时间。对方愿意帮你解决问题，不代表你要把所有问题一股脑倒给他，自己了解后再问，也是对对方的尊重，大家的时间都同样宝贵。

4. 其他tips

如果是内部公司产品，提前确认是否需要权限，提前申请好，减少正式开始后，还要等待审批时间。外部产品可以提前找好网站，可以咨询的客服入口，如果是付费竞品，咨询是否可以向财务申请报销等等。

好，现在正式开始吧！

1. 像个用户一样去使用产品

很多时候，设计师的职业病，会让我们过多注重视觉享受，而忽略作为用户，想要的有时候只是功能可用。今天不管你把「扫一扫」功能做得多美，美得像个艺术品一样，可是当扫码付款的时候，怎么也扫不出来，那种站在店家前面忐忑不安，怎么也无法完成付款，后面一堆人等你，你仿佛听见后面其他顾客窃窃私语地讨论着发生什么事情。那种场景我相信你不想经历，同样我们也不应该让用户来经历。

我的项目主管，一直都有提醒我，要像个小白来使用和设计我们的产品。这句建议，也一直在提醒着我。如果站在高姿态来俯视用户，我们就很难真正的「懂」用户，进而很难设计出真正满足用户需要的产品。

这是竞品分析，但是我们也需要转换自己的角色，变成用户。这样能更明白究竟竞品带给用户是便利，还是麻烦。有时适时抽离「设计师」的角色，会让你更能去体会用户的感受。

所以，先去用这个产品吧，然后才会有然后。

2. 如何去使用竞品

一个产品的使用，总是有它的使用场景，手机端的就更多样了，简直无所不在。B 端产品可能会相对少，一般是在办公场景或是特定场景。

可以像个编剧一样，给自己写点剧本，加点情节，塑造一个角色，假设竞品是电商方向，你可以想像，自己是一个刚毕业的社会新人，你可能没多少钱，你可能刚拿到你人生第一桶金，你想买件衣服犒劳自己，或许你会是数码控，你关注已久的佳能单反在双 11 中有优惠等等，然后再去预想接下去的情节，在购物方面会考虑的问题，或许是好用，或许是有趣等等。

也可以做任务式去使用产品，比如以电商为例，任务可以是买件喜欢的衣服，从搜索产品，到找到喜欢的衣服，添加购物车，提交订单，等待发货，收货，确认收货。这一个完整的流程走下来，就会体验产品功能是否好用，搜索结果是否符合预期等等。

3. 记录

使用产品的过程中，会遇到很多情况，有些是可预期的，有些是不可预期的。有些让人觉得很好用，有些却会让人受挫。将这些情况都记录下来，有助于分析产品的可用性程度和满意度。

• 愉快的：可能是一个友好的提示，减轻你的认知负担，也可以是一个贴心小 loading 动画等等
• 受挫的：点击没有反馈，提交后没反馈，不知道执行成功与否等等
• 难以理解：产品中专业名词太多，没有附带解释和帮助文档，完全不知其所以然
• 产生误解：以为是 A，结果是 B
• 一脸懵：页面太乱，不知从哪里下手

上面这些只是举例说明，在竞品当中可能遇到的一些问题，也可以去反思自己的产品是否也会这样让用户感到困惑。有时候，太熟悉自己的产品，会自认为产品很完美，会理所当然认为「大家都这么认为」……

记录问题、原因，感受并截图为证（有必要可录屏），后期可追溯。写得越详细越好，后面整理的时候会更清晰。

4. 各个击破-功能了解

在熟悉整个产品后，就需要对产品的各个功能进行分析了解、梳理。了解竞品的核心功能是什么，核心功能在解决用户什么问题，是否真的解决了用户的痛点，其他功能又在整个产品当中充当什么样的角色。

将竞品的功能与本产品功能对比，不只是对比有无，更进一步地去想，为什么有这个功能，为什么没有这个功能，有或没有是否会提高用户的使用效率，用户的留存，用户的体验等等。

功能多不代表好，如果功能不能给用户带来益处，其实它的存在只是增加开发成本而已。

整体总结

其实竞品分析中，最难的是总结归纳。做了一堆的分析后，结论是什么呢，这个结论如何写呢？

可以先从设立分析目的开始，找到中心轴线，然后再慢慢延展开来。在要做总结报告时，你会欣喜地发现最初设立目标是多么的重要。

文章来源：优设    作者：箴盐设计

互联网时代的人们早就受够了信息爆炸，我们每天都会经系统推送、应用通知、微信、电话、短信等各类渠道收到大量消息。有多久你没有查收自己的邮箱？就算打开邮件，又有多少推荐内容让你有兴趣进一步了解？是 EDM 老了没用了？真正的原因，可能是我们一开始就错误地忽视了 EDM 设计。

对于 95 后以及更年轻的群体来说，EDM 确实是个上了年纪的概念。EDM（Email Direct Marketing）也叫 Email 营销、电子邮件营销。企业向目标客户发送 EDM 邮件，建立同目标客户的沟通渠道，向其直接传达相关信息，用来促进销售转化。

这个起源于上世纪 80 年代中期，正式诞生于 90 年代的早期互联网产物现在已经三十多岁了。时至今日，EDM 早已成为了全球公认的网络营销重要方法之一，其卓越效果为互联网人数十年的实践所证实。但 EDM 在我国的应用还处于非常低级的水平，不仅没有系统的理论，在实践中也存在许多误区。

在这样一个重视审美与强调更新及时的时代，EDM 邮件朴实无华的外表与「一旦发出就固定呈现」的内容特质显得有些格格不入。作为用户体验设计师，我们可以做什么让 EDM 不落伍呢？

避免成为垃圾邮件

首先，我们可以在设计层面上避免 EDM 邮件被邮箱软件识别为垃圾邮件，不带敏感词语或内容、淡化商业广告色彩、减少数字与附件使用都有助于降低被邮箱系统屏蔽的风险。我们更可以在全量发送前，对指定邮箱进行小范围测试以确保邮件发送成功率。

其次，从其历史来源来看，早期的 EDM 来源于垃圾邮件，这使人们对其本能地缺乏好感，存在排斥心理。因此 EDM 的节奏和时机必须做好控制，对邮件发送的各类数据做好统计，掌握用户的阅读习惯，能更好地提升邮件的打开率。

保持最佳邮件格式

邮件内容需要设计为一定的格式来发送，常用的邮件格式包括纯文本格式、HTML 格式和 Rich Media 格式，或者是这些格式的组合。一般来说，HTML 格式和 Rich Media 格式的电子邮件比纯文本格式具有更好的体验效果。但 Rich Media 格式的电子邮件易造成邮件过大，并且无法确保用户在客户端均能够正常显示，所以在设计时我们优先选择 HTML 格式邮件。

确保跨端体验

与网页不同，我们无法针对不同设备做邮件内容相应的适配设计，兼顾设备特性的通用模版也就成为了设计时的必要关注点。对用户来说，一封邮件阅读体验很差，那么无论邮件的内容多么精彩、多么吸引人，最终的结果也可能只会被丢弃在一边。因此，我们通常会按照移动端尺寸对邮件界面进行设计，注意字体大小、最佳尺寸以及链接按钮的大小等。

除此以外，邮件中链接的定义也应得到我们充分的重视。由于邮件中的链接我们同样无法预先针对不同打开设备进行单独编辑，在有条件的情况下我们可以对链接所跳转的页面进行响应式设计以确保高质量的跨端浏览体验，或者我们也可以采用默认跳转路径而后重定向的传统方式。

与「我」紧密相关

EDM 营销与一般的营销方式最大的区别是：EDM 是一对一的沟通，让用户感觉到尊重，让他感觉到这是为他所建立并且是他所独享的沟通方式。在标题、正文的文案上强调「我」，在内容上也应如此。用户在意什么，我们就发送什么。把握住用户关注的信息，帮助用户收集支持 TA 做决策所需的信息。当我们发送邮件给用户，给予其操作行为的反馈或提醒时，不要浪费这最好的营销机会。优先提供给用户与之行为或特征相关的服务与帮助，其次通过个性化服务或产品推荐促进购买或注册转化，有助于我们将营销机会转化为实际销售成果。

兼顾质量和效率

做好个性化对 EDM 内容模型要求颇高，但从设计角度讲，我们完全可以以原子设计思维实现邮件内容模块的低成本创建与复用。以通用设计模块为「壳」，内容与组合规则为「核」，快速响应 EDM 的运营需求。

以上 5 点就是我结合近期项目经验所得。EDM 虽老，但设计可以让 EDM 老而弥新。祝经你精心设计的 EDM 邮件，一经发出，封封有回应

文章来源：优设    作者：鱼子酱聊设计