网页中超过95%以上的信息都是通过文字的形式呈现。 然而，页面文字并非毫无章法的随意呈现。事实上，更具可读性、视觉效果以及独特排版和布局的网页文本设计，更能吸引用户，提升用户愉悦度。这也是为什么越来越多的设计师日益重视网页排版设计的重要原因。
BS界面是基于浏览器的界面，随着人们对于用户体验要求的不断提高，BS界面的设计要求也越来越高，
接下来为大家分享一下我收集到的案例：
（以上图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
ui界面设计之网站设计案例欣赏(一)
先来了解一下项目的背景。Conduira online是一个线上的教育平台，为准备考试的用户提供有用的工具和资源。这个平台目前有一个侧边导航栏，上面有11个选项。后来由于平台的变化，将主导航的选项缩减到3个——主页、实习和课程。
导航的数量变少了，团队又迎来了新的问题：是应该继续保留侧边导航的设计样式还是切换成顶部导航的样式呢？
为了做出最合理的选择，我们需要回答三个基本的问题。
在选择导航时回答这个问题很重要。这里介绍一个有趣的的交互概念叫做视觉固定（Visual Fixation）：注意力一直保持在同一个地方。
在顶部导航中，一个视觉固定点通常只适合一个选项。然而，侧边导航上的单一视觉固定点可以同时容纳两个选项。
结果很明确。与顶部导航相比，用户在一次视觉观察中可以在侧边导航上查看和感知更多菜单选项。当然顶部导航也有自己的优势，为每个菜单项赋予各自的权重，而不是让它们的重要性被其他选项分散。
对于具有过滤选项或带有二级菜单的电商网站，视觉固定的概念起到了非常重要的作用。因为在这些情况下，我们希望用户能够在单一的视觉点上尽可能多的选择。
Tips：这里的选择仅仅取决于界面上有多少选项。如果主导航的菜单项不多于5个，只需使用顶部导航，这样能够更好地控制用户在整个平台上的体验旅程。
用户在浏览网页或App时会有各种各样的浏览顺序，其中一种就是「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. 记录
使用产品的过程中，会遇到很多情况，有些是可预期的，有些是不可预期的。有些让人觉得很好用，有些却会让人受挫。将这些情况都记录下来，有助于分析产品的可用性程度和满意度。
上面这些只是举例说明，在竞品当中可能遇到的一些问题，也可以去反思自己的产品是否也会这样让用户感到困惑。有时候，太熟悉自己的产品，会自认为产品很完美，会理所当然认为「大家都这么认为」……
记录问题、原因，感受并截图为证（有必要可录屏），后期可追溯。写得越详细越好，后面整理的时候会更清晰。
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 邮件，一经发出，封封有回应
文章来源：优设 作者：鱼子酱聊设计
这几天在工作中处理了一个历史遗留问题：弹窗适配，几经折腾终于落定发包。于是我也趁着这个机会把弹窗体系梳理研究了一遍。
我们常见的弹窗有对话框，提示框，有时候在需求沟通中经常会听到产品同学说，给这里加个弹窗，那里加个提示框吧。实际上，这个弹窗到底该不该加？这个弹窗承载的是提示说明文字内容，还是需要引导用户下一步操作？接下来我们从弹窗的属性来聊聊我们的弹窗到底在什么时候加比较合适？用什么形态展示体验会更好？
常见的模态弹窗有这几种：对话框、动作栏、浮层。
对话框：对话框主要是给用户提供选项、相关的操作。另外，在一些对话框中，也可以展现图片、头像、步骤图、其它输入项等。
动作栏：常见的动作栏一般会出现屏幕下方，比如选择某个内容时候，出现的选择。
浮层：弹出窗口，浮动于顶层窗口，气泡。
非模态弹窗：是指不强制用户操作，他的作用相当于内容信息提示，他的出现不打扰用户的当前操作，并且有时间限制，在一定时间里能自动消失。比如「xxx 功能已更新哦」，这种提示是不需要用户点击操作，让用户看到就可以了。
常见的非模态弹窗有这几种：toast/hud、snackbar、notice（通知）
toast/hud：iOS 用户更习惯于在中间感知反馈信息，通常在信息提示完 3 秒左右后会消失，安卓通常会出现在屏幕顶部或者下部，不会遮挡主体内容。需要注意的是 toast 只有文字，hud 是可以带有图标的。
snackbar；可以理解为加强版的 Toast
notice：系统消息、通知推送，也是不干扰用户行为，有消失时间，是非模态的弹窗。
了解完弹窗体系后，我们就可以针对具体场景来看产品同学说加个弹窗到底合适不合适？我们可以从下面的几个使用场景来看用什么样的弹窗合适。
1. 重要打断用户操作
在一些重要操作，避免用户操作失误。不过目前很多人都觉得这类弹框有利有弊，有的地方出现得不合时宜，打断了用户的使用状态。所以在设计这类弹框时要非常谨慎，得通过多研究确认是否有必要出现。
对话框相对来说比动作栏更重要，因为在视觉中心，更能强烈引起用户的重视，对于十分重要的内容需要打断用户上一步任务的，采用对话框的弹窗，对于不是特别重要信息露出又需要终止用户上一步动作的情况下，一般采用动作栏弹框。
2. 定制化广告弹窗
如功能更新、升级、优惠券弹窗。这一类一般是强制用户看到的，要展示出与众不同的特色，在视觉上比较突出，会使用模态的弹窗浮层形式。
3. 给予一定提示
比如提示用户状态、信息、反馈，确保用户知晓自己所处的状态，并可以做出相应的措施。一般使用非模态的弹窗。
出现在用户操作完之后的反馈，比如提醒用户页面正在加载中、保存成功、已删除、已刷新等等。
可以不用弹窗的反馈例子：完成页
比如已支付成功、下载完毕、签到成功，这一类是告诉你上个动作结束了，下一步不需要进行引导了，这种反馈大多数都不采用弹窗形式展现了。
1. 层级关系
弹框是内容和导航的补充，用于通知、操作菜单、成功或加载状态的 toast，他是写在蒙层上面的一层内容。
2. 适配方式
下面我们需要了解的是这几种弹窗在开发那的实现形式。我们可以理解为 2 种形式：
一种是开发直接用系统的接口，缺点是具有不可定制，形式美观度不够好。
另一种是开发用代码会单独写出一个模态弹框系统，这套系统与整体设计语言具有一致性，可以复用在各个任务中，可以定制化设计。
需要注意的是，代码写出来的模态样式要考虑在不同机型的适配情况，考虑不同机型的边界。这个适配也有两种实现形式，一种是固定宽高尺寸，展示在不同机型尺寸中，另一种是常用的等比例缩放。这个就需要开发与设计进行密切的沟通，能尽量合理地在不同机型展现更加合适，避免出现极限的情况。
我们是这样操作的，为了避免尺寸比例混乱的情况，会设计一个弹窗的宽高尺寸范围，开发同学代码写出的这套弹窗的适配在各个机型中，是在一定缩放比例下，适用各个不同情况下的视觉展示。这套弹窗可以调用在首页引导、升级等各个页面的弹窗设计中。
文章来源：优设 作者：咏舍
本系列文章旨在由浅入深、由理论到实践地介绍 VR 设计。无论你在做哪个领域的设计，都能通过这个系列了解 VR 设计的特点。本文是第一集，深入分析 VR 界面的文字设计。
文章来源：优设 作者：爱奇艺XRD
蓝蓝设计的小编 http://www.lanlanwork.com