确保用户成功且无压力的登录体验需要我们不断地思考。
大家好，我是Clippp。今天为大家分享的文章是「登录页」设计。几乎所有的登录页看起来都大同小异，通过输入账号和密码就能够进入，但仔细思考会发现，每个登录页都有差异化的点，而这些点正是产品无一物二的地方。
登录体验是指用户通过入口进入应用、网站或服务，建立自己的身份。
登录流程通常由主登录流程和恢复流程组成，其中主登录流程包括填写用户名、手机号、密码等，恢复流程包括忘记密码、重置密码、其他登录方式等。登录体验的目标是确保用户成功登录帐户。
使用简洁、常用的页面布局和文字，有助于用户轻松执行熟悉的操作。保持设计简单也有助于将体验轻松扩展到不同设备和屏幕尺寸。
▲ Pinterest采用了居中对齐的重叠式登录页设计，用醒目的红色按钮来突出登录动作，还支持Google和Facebook作为其他登录方式。
登录页是强调品牌的首要接触点。登录操作最好于中心位置，页面上的其他元素应谨慎增加，避免注意力从登录任务上移开。
设计思考：
用户花在登录页上的时间越少越好，要让用户尽快发现产品中的优点和价值！
登录(或恢复)操作应引起用户的全部注意力：
最好将登录页表单放在页面中心位置；
不需要复杂或冗长的文字解释，例如可以利用简单的“输入密码”来提示用户完成操作；
要求用户一次只做一件重要的事情，例如将找回密码这种复杂的流程分解为多个步骤进行。
▲ Facebook保留用户的登录信息，并将恢复流程分为几个逻辑步骤。
▲ 亚马逊将辅助恢复选项放在“更多帮助”中，这有助于使主要操作保持重点。
设计思考：
使用卡片式布局；
将操作分为主要动作和次要动作；
使用尺寸大而突出的登录按钮；
尽量减少次要操作的次数，以避免使页面出现混乱。
在登录过程的每个阶段，用户都可能会失败。输入错误的邮箱，忘记密码或网络问题等，所有这些问题都可能导致登录意图急剧下降。
因此清晰及时的反馈设计对用户来说很重要。
▲ 信息输入错误时会提示错误具体的原因。
▲ 密码输入有误时，Facebook会在下方增加“使用Google登录”选项。
设计思考：
鼓励用户尝试合适的替代方案；
登录失败后，将用户导航到单独页面并组织其他登录方法；
展示最有效的登录方法，并在发生问题时及时对用户做出反馈。
除了输入账号密码这种登录方式，最好提供一种或两种附加的登录方式以便用户选择，同时防止忘记密码造成无法登录的情况。
添加过多的登录方式会使页面混乱，降低登录意图，附加选项应该限制为2或3种方式。
▲ Medium登录表单的设计尽管很清晰，但过多的登录方式会阻碍用户的选择和判断。
▲ Airbnb登录页能看到大量的辅助登录方式，过多的选项可能会导致用户的认知负荷。
设计思考：
当前无密码登录正在迅速普及。在很多移动App中，基于手机号的身份验证已成为常态，指纹和FaceID也出现在许多地方，从而实现了无缝和安全的身份验证流程。
找到产品最适合的登录方式，并将其作为主要选择能有效提升效率！
登录涉及用户输入敏感的个人数据，例如手机号、邮箱、密码等，用户愿意输入信息意味着他们信任这个平台或产品。
虽然减少与用户的摩擦很重要，但有时网站也会提供额外的身份验证来确保用户信息的安全。
▲ B站利用文字验证方式来增强用户帐户的安全性。
设计思考：
登录表单应该代表品牌的形象，任何视觉上的变化都必须慢慢进行，因为完全改变视觉设计可能会导致缺乏信任。
登录意图是一种体验，在这种体验中用户角色和类型可以无所不包。
可以尝试以下方式来定义用户的范围以便更清楚的了解用户：
登录渠道：与PM合作找出在登录流程中用户交互和退出的关键阶段。
登录入口：用户是通过邮箱、搜索引擎还是通过应用跳转到登录页？
常用设备：手机、浏览器等设备可以为用户带来个性化的体验。
用户群组：利用年龄或地理位置等方式也能进行分离用户群主的划分。
通过分析具有代表性的登录页设计来展示登陆页的多种设计表达。
▲ Google采用多阶段的登录方式，邮箱和密码分两步进行输入。这种格式对谷歌来说有一些安全优势，也可以在下一步为用户提供个性化的选择。
▲ Uber的登录页采用简单的样式，注重使用体验，引导用户输入手机号来进行下一步。
▲ Facebook利用右对齐的登录表单很好地集中注意力，左边的空间被用来展示品牌的信息和形象。
▲ 亚马逊的登录页从视觉设计上看有些陈旧，但却是管理用户注意力的一个很好的例子。黄色的“继续”按钮和简洁的页面使登录看起来简单而快速。
▲ Figma的登录页位于画面中心，顶部首先展示的是以Google登录，这可能是Figma首选和推广的登录形式，页面整体的设计利用线框组成，非常简洁高效。
文章来源：展开 作者：Clippp
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
网页的第一印象至关重要，它在很大程度上决定用户是否有兴趣浏览下去。而这个第一印象则是由网页的首屏部分所决定，它是最直接传递出网页的功能与印象的媒介。
一个好的首屏，也能让你在同质化严重的情况下，脱颖而出实现弯道超车。好的，今天就让我们一起来研究一下，网页首屏部分的组成、方式以及设计手法吧。
说到首屏大家肯定第一反应是这样的一个形式，有小伙伴可能会说，这个不就是个 Banner 吗？那也是很多设计师的误区，网页首屏中存在着大量的交互元素在其中。
我们现在来看第一个网页，这里就包括了五个互动的按钮在其中，这个是 Banner 所不具备的功能，接下来我们快速的浏览一下，这个区域的主要组成模块。
这个网页，是一个简单的组合形式，我们可以划分为全局导航栏和形象部分。
这两个网页是类似的形式，我们称之为大尺寸页眉，即这整个区域都是页眉的区域。
这其中我们又可以细分为：全局导航栏、全屏图片和形象文案部分。
我们顺着这个思路继续分下去，看到这个网页的首屏部分，包括了全局导航栏、形象文案和社交链接。
但具体我们的首屏高度要设计多少呢？这里我们可以参考 w3school 网站的数据。其他的尺寸我们直接忽略掉，剩下的我们看到 1366×768 像素的尺寸是一个最常见的尺寸。
这里我建立了一个 1920X1080 高度的画板，点击标记区域的 “视口高度” 将数值改为 768 像素，即可。
右面的画板上就出现了一个虚线标记的地方，这个就是我们的视口高度。
有很多小伙伴问我，老师什么是主页？什么是着陆页？它们是相同类型的东西吗？答案肯定是否定的。
我们以这个网页为例，它是一个游戏的专题页面，并不是这个网页的主页。
而是这个网页的着陆页，用户点击搜索推广、信息流或其他形式的广告打开的第一个页面。着陆页可以是网站上的一个页面，也有直接把主页当作着陆页使用的情况。
进入的才是这个网页真正的主页部分。
如果还不理解，我们可以一本书籍为例。这个书籍的封面可以理解为首页。而它内部的每一个页面都可以理解为着陆页。每个页面都有自己专门的关键词，这样就不需要用户，每次都是从首页进入了，方便用户使用。
着陆页可以着重用来介绍专题活动或者产品。
这个着陆页作为整个这个网站的介绍专题页出现。用户在搜索时，可以根据关键词直接搜索到这个网页。
这个着陆页也同样是起着介绍专题的作用。
着陆页也常被用介绍产品，这样我们在搜索这个产品的时候，就可以更快的找到了。
很多情况下，网页首屏的形式不断地被强调，而首屏的功能性却总是被忽略。这样就会出现影响用户使用的情况，因为网页最重要的作用就是传递和收集信息。
所以设计师在设计一个网页的首屏部分时，应该更多的去考虑这个网页想要的提供的功能是什么，而不是一味的追求形式感。当然不同的行业，所要求的网页的功能也是不同的。接下来的部分我们主要来探讨一下这个问题。
一个网页主要受到三个因素的影响。行业、功能和形式。这三个元素又在互相影响。
首先，行业决定了功能性。我们用医疗这个大行业下的，医院类型、保健类型和医学院类型的网页来说明。
首先我们来看医院类型的网页，这种特定的行业类型，要求的网页功能就会比较全面。
首先就是为了方便用户提供的预约功能。
在这个基础上，网页中还会加入导航功能，这是为了让用户更容易去找到这家医院。
网页设计者还会添加问诊功能来方便用户直接进行查询。
这个网页我们就看得更加详细了，同样是添加了一个问诊功能。
我们来总结一下，除了最基本的形象功能外，医院类型的网页还添加了预约功能、客服功能、导航功能和问诊功能，其本质都是为了可以更好的服务客户。
到了保健类型的网页时，这个功能就会相应的发生变化，由于是保健的性质，更多是从招揽客户这个点而出发的。
所以这类的网页，虽然同属医疗行业，却有了不同的功能，这里更多的是发挥着这个网页的形象功能，增加信赖感。
这个网页则是直接把服务流程放在了首屏部分，可以让用户最容易地理解整个服务流程。
这个网页也是同样的设计逻辑，通过展示形象来吸引用户。
保健行业的网页，几乎都存在着预约功能，这样主要是提供了一个用户和商家互动的渠道，也是契合这类型行业的实际需求。
最后我们来看一下，医疗学校类型的网页。
因为是属于教育行业，所以更多是一个形象功能的展示。
这个网页是一个护士的招聘网站，他就用过轮播视频的方式，让用户能最直观地感受到护士这个职业的内容和价值。
教育行业的网页，则更多的是一个形象功能，向客户传递自己的价值观。
前面说了行业决定功能，以此类推，功能确定着形式，我们主要以旅行行业的网页进行说明。
这个网页主要是向用户展示环境以及服务，也就是我们前面说的形象功能，所以在设计的时候直接做了一个全屏的形式，最好地向用户展示自己的信息。
这个网页也是同样的功能，展示自己的形象，将自己的景色展示出来，这样可以让用户最直观的看到。
这里则是在展示形象功能的基础上，添加了一个预定的功能，网页的形式也发生了一定的改变。
这里还可以将预定功能的形式放在页眉和主栏的交界处，创造一定的层次感。
这是一个酒店的网页，在设计的时候，添加了一个销售的功能，这样在设计的时候网页形式也相应的进行调整。
而最后到了形式的部分，它并不决定任何事情，而是反过来促进行业。
化妆品的行业对网页的美观度要求很高，当我们浏览到这样的网页时，并不会增加我们购买的欲望，甚至这样的网页起到的是一个反作用。
而当我们就浏览到这样的化妆品的网页时，他是可以提升我们购买力的。
我们放在一起对比一下，是不是孰优孰劣就一目了然了。前面我们说了，行业决定着功能，功能决定着形式，形式反过来促进行业。所以最终呈现给用户的网页是一个多方综合的结果。
在确定了行业和功能的前提下，就需要我们多去了解网页的设计形式有哪些。这里，给大家介绍一下现在时下流行的设计形式——等分屏式。
等分屏式很容易理解，就是将网页一分为二，AB 两个部分，它们既可以展示相同的信息，也可以展示不同的信息。以这种形式设计的网页，被称为双专栏型的网页。
最常见的形式为一半图片，一半文字。这就类似于我们的画册结构—— 图字组合。
第二种形式则是，左右都有图片，它们既可以说明同一件事情，也可以截然不同—— 图图组合。
第三个则是大图小图的对比形式，这种形式会赋予网页一定的艺术感和时尚感 —— 大小图组合。
图字组合的形式，和我们在观看画册习惯基本相同，一半图片一半文字，可以很好的传递出网页的信息，方便用户理解。
这个婚戒的网页，使用这个形式，更加增添了高级感。
它们也是可以左右进行一个对调的，这个网页同样是依靠这种形式，传递出一种简约高级的感觉。
这个网页使用的是图图组合的形式，左右照片连贯，讲述的是一件事情，给用户一定的联想和视觉冲击力。
这里左右选择的是一个关联性的图片， 创造了一定的故事性，同时也传递出来这个网页的产品。
大小图组合，更加可以凸显出来网页的时尚感。
上述的三种组合，并不是永恒一成不变的，就拿图图组合来说，我们可以通过移动网页的分割线，创造出很多形式。可以选择缩小图片的范围，更多的去展示文字的信息。
也可以选择放大图片，这些大家都可以根据实际的需求进行操作。
大小图的组合，也可以不局限于规规矩矩的排列形式。
我们也可以在规则内，任意移动小图来创造出新的感觉出来。甚至可以将小图拆分，创造出更加活泼的版面结构出来。
这个饰品的网页就是利用这种形式，多角度的展示了自己的饰品。
这个网页则是用这种形式，创造出一定的故事性，提高用户继续浏览这个网页的兴趣。
我们也可以更进一步的，把大图也调整，重新布局在页面中，就可以创造出更多的版面形式了。
使用这个形式的网页，提升这个网页的活泼度和设计感。
这样调整了图字组合和大小图组合，我们就可以得到了 5 种完全不同的形式网页了。
通过上面的思路，我们也可以尝试去结合不同的组合，也可以创造出很多新的形式。更多的组合形式就需要小伙伴们自己去尝试和发现了。
到这里大家有没有一个感受，就是网页设计其实是可以非常灵活的，形式也是多种多样。
文章来源：优设 作者：研习社
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
产品设计的初期，为了让产品覆盖到更多终端，需要对网页设计进行响应式和自适应设计，制定界面适配规则时，你是否也有过如下疑问
宽度单位我是用百分比还是px？还是rem？区别是什么？
什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、设备像素、css像素？浏览器窗口大小和设备大小和分辨率大小区是什么区别？
什么是响应式网站，自适应又是什么？两者有何区别和联系？
百分比宽度布局和流式布局和前者的关系是什么？
既然响应式这么流行，为何淘宝、京东等没有去做，而是单独开发了一个移动端版？这里面有那些坑需要避开？
历史长廊
在早期，硬件设备落后，网页使用的是绝对静态布局为主，绝对固定宽度的布局被称为是静态布局（StaticLayout），也有叫固定布局（Fixed Layout）。
后随时代变迁，技术发展。因浏览器的增多，开发者们忙于兼容各种浏览器。在这个期间，实际已经有了针对各设备适配的解决方案，只是未成为主流，这种新布局方式叫自适应布局（Adaptive Web Design，简称AWD）。
在当时，大多指的就是宽度自适应布局。在这种新思想下，又出现了两派的具体解决方案：百分比宽度布局和流体式布局（Fluid Layout）。
在当时，大家都还没有响应式布局的概念，但此时出现了一个新的词--渐进增强。渐进增强出现后，另一个词优雅降级也随之出现了。这里只是举个典型的例子：gmail和qqmail。这两个都是百分比宽度布局，都属于自适应布局，但有区别。
qqmail就是css hack的完美体现，你用任何一个浏览器，几乎可以看到同一个样子的邮箱，为的是用户体验统一。gmail则使用了渐进增强，你的浏览器越新越强，你看到的效果就越好，为的是用户体验增强。再后来，Google发布了Android，移动互联网爆发，html5标准发布。
互联网大战从PC打到了手机。手机虽然屏幕变小了，但是却提供了更丰富的功能，用户要求不断提高，网站更加看重的是用户体验了，所以，谷歌式的渐进增强被广泛认可，结合自适应的思想，出现了响应式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。
描述响应式界面最著名的一句话就是“Content is like water”——无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。
现如今，为何需要考虑多设备的兼顾呢，依然是因为时代发展与生活方式的变迁：
即便是PC或Mac用户，有查显示只有一半的人会将浏览器全屏显示，而剩下的一般人使用多大的浏览器，很难预知；
台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加，“主流设备”的概念正在消失；
屏幕分辨率正飞速发展，同一张图片在不同设备上看起来，大小可能天差地别。
结合自身产品用户访问浏览器分辨率
鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现。
因此我们需要在了解基本布局方式的特征下，选择适合自身产品的布局实现方式。
静态式、自适应、流体式、响应式布局，A+R混合布局的特点对比如下
静态式布局：
窗口缩小后内容被遮挡时，拖动滚动条显示布局。不管在哪种设备，哪种浏览器上浏览都是一个样。移动设备上则显示太小或不全。
自适应布局：
用自适应技术(Adaptive)我们可以开发和提供不同的布局来为类似纯触屏或者混合触屏设备这样的一类具体场景提供最好的体验。
分别为不同的屏幕分辨率设备设计不同的样式布局，相当于多个静态布局组成的一个系列合集，每个静态布局对应一个屏幕分辨率范围，页面通过百分比自动适配设备屏幕分辨率和可视窗口大小，当可视窗口改变时，不会出现横向滚动条，UI，图片，文字会自动缩放，元素内容、布局、交互方式基本不变。
弹性布局：
以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。
流体式布局：
属于自适应的一个子集，也是通过百分比自动适配设备屏幕分辨率和可视窗口大小，不同于百分比自适应的是随着窗口大小的改变，页面的布局会发生小的变化，可以进行适配调整，这个正好与自适应相补。
响应式布局：
如果从广义上讲，响应式布局实际上就是更好、更机智、更灵活的去实现自适应，他们都算是一种弹性布局。再通俗点讲响应式重在于「响应」它会随着设备属性（如宽高）的变化。
页面的设计和开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和删格、布局、图片、css media query的使用等。
狭义上讲，响应式网页设计指的是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
R和A上的区别
当响应式设计在基于预定义断点之上用CSS或者JS调整布局和内容。调整方法提供基于用户代理和设备类型的预结构化模版。
他们之间主要的区别是DOM结构，当采用响应式思维开发时，HTML代码在各种情况下都会一样（除非你用JS移除某些DOM节点），而在自适应开发中我们可能会有不一样的代码结构和体验。
R采用流体＋断点，在断点之间，页面依然会随窗口大小自动缩放（通过fluid grid），直到遇到断点改变界面样式布局甚至内容。R一般来说需要在网页设计初期就开始（通常采用mobile first策略），所以旧的网站要做RWD很可能要完全重建。
A只在针对几种分辨率（如320，480，760，960，1200，1600px）进行优化，在断点之间的自动过渡比较少。而A则采用保留现有桌面网站（desktop version）而对于更小的分辨率做针对性的优化（适应），减小重构的成本。
两种设计思维都是有效的，需衡量在项目中有多少组件、复杂性如何以及是否存在一种体验是适合所有用户的。开发web应用时经常会用到响应式设计，例如通过自适应开发来构建定制化体验。
两种方法各有利弊，但是如果同时使用它们到底会得到什么呢？A+R模型结合了基于单个主要临界点的自适应和响应式方法。
混合式布局就是为不同终端设备的屏幕分辨率定义布局（适配各种尺寸的PC、手机、穿戴设备等等），在每个布局中，页面元素随着窗口调整而自动适配，混合了百分比、像素为基本单位的组合方式。可以把混合式布局看作是弹性布局、自适应布局的融合。
自适应布局、弹性布局、混合布局都是响应式布局方式的一种。其中自适应布局的实现成本最低，但拓展性比较差；而弹性布局与混合布局效果都是比较理想的响应式布局实现方式。
很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能是保持简单轻巧，而且同一断点内（发生布局改变的临界点称之为断点，后面内容会讲到）保持统一逻辑。
否则页面实现太过复杂也会影响整体体验和页面性能。一般通栏、等分结构的布局适合采用弹性布局方式，非等分的多栏结构布局则需要采用混合布局的实现方式。
选型
如何考虑实践过程中的判断呢。一是看应用场景，二是看如何设计“响应式”方案。简单、轻量的页面直接用media query实现响应性就很好。比如blog、小型企业站之类。现在的CSS框架基本都具备响应性。
但请注意响应式不仅仅是响应式布局。对于大型站简单用media query是远远不够的。于是在同一个controller层上，识别UA，渲染不同版本的模板，组合相应的静态资源。这也算是响应式。开发及维护成本明显提高。
当各个版本间的差异很大时，维护成本很可能会大到无法接受。即便分开做，架构上也要调整，后端服务化，应用层app化。
根据不同公司的技术特点，调整的成本也难讲是否可行。对于大型站，分开做更清晰，同时用响应式组件解决复用、功能同步的问题。总之，根据场景响应式可以从各种层面，各种粒度上做。这是现代web开发的特点。
建议开发一套响应式电脑网站（过渡到平板端，不过渡到手机端）和开发一套响应式手机端网站（过渡到平板端以下的尺寸，不过渡到平板端）响应式布局有可能造成冗余的代码较多，对研发的要求也更高，比如如何更好地让图片，适配，UI动画自适应各种布局。
大站还是要考虑数据计算和承载的问题，会对桌面和移动端输出不同数据，减轻压力。
实践与技巧
首先，我们需要了解几种分辨率的差别。
ps：原生应用可查询横纵两个方向的像素密度，通常浏览器可查询1个系统像素对应多少物理像素。而设计角度通常需要参考的是所获取的系统分辨率
以一个SaaS类后台产品为例，对于基本流量来自Web端网页的产品而言，需要了解当下的浏览器分辨率现状 Web端不同屏幕分辨率占比情况，数据来源百度统计，如图所示：
如上所述，选择适配方式时，设计目标为：区分web与pad端可共享的设计布局大于手机端，且产品规划上web端为主流量来源，pad端属于短期兼顾。考虑技术维护成本与开发成本的平衡，于是判断需要选择A+R模式来完成产品的跨端设计。
自适应（A）方法能让我们在不同的设备上有不同的体验、内容甚至是功能。如将960px作为主要的自适应临界点，根据全局统计信息定义，我们会得到一些相似处：
左侧的可视区代表整个屏幕小于960px时的具体布局和内容
右侧的可视区代表整个屏幕大于等于960px时的另一种布局
在使用响应式（R）技术时，我们可以利用主要临界点创建两个互不相同的体验情景，每种体验里，我们都可以在可用空间内定义二级临界点去调整布局。
通过结合自适应和响应的方法，我们得到A+R模型。利用自适应技术，我们将致力于体验和功能，作出两种不同的情景设计。使用响应式组件，我们可以处理上下文内的UI组件和布局。
这种设计方法要求设计师真正了解他们想要提供的体验，以便于定义要遵循的模型。此模型非常适合那些在较少功能或结构完全不同的小型移动设备上运行的大型APP。就像你看到的，你的产品将具有很强的灵活性，但同时也很复杂。
因为你要处理不同的代码库和环境（非强制性）,Twitter、Facebook和Github将此模式应用在他们的移动网站上。如果你在移动设备上浏览这些网站，则可以根据移动用户的期望来检验它们是如何改变的用户体验的。
删格
栅格系统可以帮助我们设计，但却不能保证我们的设计。它有多种可能的用途，并且每个设计师都可以寻找适合其个人风格的解决方案。对于简化复杂的响应式布局规则而言，这是一项十分有效的辅助手段。
1. 列和槽（Columns and Gutters）列（Column）用于对齐内容。其中的槽（Gutter）是指相邻列之间的空间，把控页面留白,有助于分隔内容。
2. 页面边距（Side Margins）页边距是指内容和屏幕边缘之间的空间。将边距宽度定义为固定值，这些值决定了每个屏幕尺寸的最小呼吸空间。
3，用于组成栅格的列数称为列结构。8、12、16和20是响应式布局中最常见的几种列结构。而这取决于我们对产品的设计要求。12列结构是相对灵活的。它可以进一步细分，将内容排列在4-4-4或3-3-3-3大小的文本框中，也有部分设计系统采用来24列的形式，如Ant-D
4，断点是指屏幕尺寸的特定范围，列结构、列宽、槽宽和边距都取决于断点。在这个范围内，布局会根据可用的屏幕尺寸重新调整，以获得最佳的布局视图。
如果较小的屏幕有足够的可用空间容纳内容，则列将按比例缩小。如果一列的内容无法在较小屏幕上显示，该列将垂直放置图文内容。
5，网格规则，列跟槽的宽度是以网格作为基本单位来做增减，所以应该先定义好栅格的原子单位，“网红款”8点网格指的是设计页面时，也应该遵循8点规律。值得注意的是，列跟槽的值尽量取8的倍数，但不是非得是8的倍数。
产品中各类元素应该遵循这个倍数原则（图标、组件大小等），不同的设计系统根据自身需求，设定这个规则。例如在Material Design中使用的是2X网格。
6.流体栅格与混合删格
流体栅格有不同宽度的列，固定的槽和固定的边距。流体栅格有灵活的内容宽度，根据屏幕大小变化在流体栅格中，列可以增长或收缩以适应可用空间。
混合栅格既有不同的宽度，也有固定宽度。在现代布局中，一些元素超出了网格边缘，与屏幕边缘对齐。页眉、页脚、出血都是一些常见的例子。
如果内容宽度大于可用的屏幕尺寸，那么一个固定栅格就会转变成一个适应屏幕可用空间的流动栅格，以充分适应内容。
设计需在技术方案前介入，根据你的产品特点，进行设计方案评估，可借助的手段有删格，网格规则等，设计断点规则时，需关注设备的常见系统分辨率。
移动和桌面设计的差别远不止是布局问题。只要有足够的编程量，这些差别是可以通过响应式设计来解决的。事实上，你可以认为如果一种设计不能兼顾两种平台的主要差别，就不能算是合格的响应式设计。
但是，如果确实想要处理好平台间的所有差异，我们就回到了原点：进行两种不同的设计或者使用A+R的模型，在寻求合适的过程中，关注技术的革新。
A与B不是硬币的正反面，它们为了解决同一个问题而生，是同一种思想的延伸。
文章来源：站酷 作者：酷家乐UED
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语：UI设计师在日常工作中经常会进行Banner的设计，Banner代指任何投放于线上的各种尺寸的广告图，在设计Banner图时，需要考虑到多种因素，内容、受众、效果等等；本文作者分享了关于Banner应用和交互设计，我们一起来了解一下。
Banner是每个UI设计师家常便饭的项目，聊聊banner的那些事。
banner翻译成中文是横幅或旗帜，为了体现产品的中心意旨，利用鲜明的内容去表达最主要的情感思想或宣传中心，从而给整个产品起到宣传的效果。
在互联网时代，banner被广泛应用在pc网页、app设计等互联网平台间，作为设计师做一张banner乃家常便饭，如何才能设计一张高质量的banner呢？
创意新颖、风格贴切的banner能第一时间吸引用户眼球，有利于banner的触达，带来高效率的点击，创造更高的价值。
关键词：文艺、气质、素雅、安静、格调。
画面大量的留白；色彩以高级灰为主，饱和度和纯度低，明度高；字体多采用衬线体，标题文案突出，辅助文案偏小，整体突出高级感；画面点缀多采用精细的线条。
关键词：高冷、时尚、大气、品质。
色彩多以黑白灰；文字清晰简洁内容少；焦点主图很大，突出表现细节；画面精简，无点缀物。
关键词：传统、中国风、意境、韵律。
画面采用对称式构图，文字排版有采用竖排；色彩上采用中国传统颜色，采用物体的固有色，避免艳丽刺激的色彩；字体多采用书法字体，书法主要分为篆、隶、楷、行、草五种书体；图形活用中国风元素，剪纸、灯笼、折扇、祥云、梅花、水墨等作为辅助元素。
关键词：青春、活力、年轻、动感、时尚。
色彩饱和度和纯度高；排版多样性，视觉冲击力强；运用几何图形装饰在产品、背景、氛围装饰上。
关键词：可爱、甜美、卡哇伊、Q、呆萌。
色彩鲜亮透明，营造软萌可爱的感觉；字体采用少年字体、手写字体、卡通字体；点缀元素多使用卡通小元素。
关键词：促销、活动、节日、热闹。
画面整体氛围热闹，内容饱满，很少留白；色彩丰富，红色、黄色、橙色、紫色偏多；主标题文字偏大，字体刚硬，视觉冲击力强，点缀元素有光效、舞台、五彩的渐变、冲击性的线条或多边形等。
关键词：未来、科技。
科技类banner，文字和背景图非常具有科技感，画面具有空间感；色彩以冷色调为主，常见有蓝色、紫色、黑色；点缀元素有光效、金属、线条、光点。
关键词：场景、趣味、手绘感、扁平。
画面具有故事性和趣味性；色彩扁平的配色，上色没有高光和阴影；字体偏向年轻化，圆润、无衬线体字体；点缀元素以涂鸦的小装饰为主。
1）创意监控
产品在用户心中需要良好的正面形象，banner传播对内容需要进行严格控制，把握好政治导向关、价值取向关和格调品味关。广告内容需真实准确，不引起歧义。
2）情景约束
用户体验产品需要有愉悦感，banner需呈现积极阳光的正面情景，素材图片传达正向的情绪和氛围。
3）版权约束
避免法律纠纷，图片素材、文字等内容应该要有版权，banner中不使用来源不明的字体、图片、视频等素材。
1）确定文案
文案尽量简洁明了，用词准确、文案通顺、语言生动。用词准确是最基本要求，活动、权益、业务表述文字内容符合业务方需求，无错别字。文案通顺、表述清晰，适合产品目标群体阅读与理解。语言生动、精简、有吸引力，集中核心诉求点，亮点突出。
1）板式
排版结构：
banner由多元素组成，banner内在包含：色彩、构图、风格等，外在包括文案、产品配图、背景、点缀这几个部分组成，设计过程通过拆分一步步执行，思路清晰且效率高。
构图方式：
对齐构图
画面中相关内容遵循对齐原则，便于用户视线快速浏览，接受重要信息。常见的对齐方式左对齐、右对齐、居中对齐，建议banner中只使用一种对齐方式，多种对齐方式用户阅读视线分散，增加用户认知成本。
聚拢构图
画面内容拆分为文字区、图片区、氛围区，相关内容聚集在一个区域，其次聚焦一个视觉重点，弱化其他元素，视觉出现层级。
留白构图
根据产品页面留出适当的安全边距，保证banner在适配过程中不会出现重要信息看不全的情况。排版时，元素之间需要留出空隙，画面看起来有透气感，减少用户认知信息的负担。
降噪构图
色彩、文字的种类不宜过多，点缀图形运用不合理，会分散读者注意力，成为用户阅读的“噪音”。
重复构图
排版注意整体设计的一致性和连贯性，避免出现不同类型的视觉元素，使画面出现跳跃。
对比构图
banner中重点信息加大与周围元素间的视觉差异，通过颜色对比、字体的大小字重对比、构成的面积对比等方式，以便于用户快速获取重点信息，丰富banner的视觉层级，吸引用户。
构图样式：
对称构图
通过对画面的平均分割保证画面的平衡，对称构图给人有力、稳固的视觉感受。
居中构图
居中构图很好的突出主题，画面中规中矩，活跃感较弱；用户视觉焦点会聚集中心位置，视觉焦点需要重点刻画，周围元素弱化处理。
左右构图
左右构图分为2种，左文右图、左图右文。2种构图样式，区别在于用户的浏览过程中是先看文字还是先看图片。
当配图示意不明确时，建议使用左文右图的排版。
配图主要是根据文案内容绘制的辅助图形，用户只看图无法明确活动内容，建议采用左文右图的板式。根据“F形”阅读模式，浏览习惯往往从左向右从上往下，将文字信息放在左边有助于用户快速浏览，获取重点信息。
当配图示意明确，图比文字更加重要时，建议使用左图右文的排版。
用户根据图片即可明白活动内容，运营或业务方希望有吸引力的活动图片获取用户的注意力。
衍生构图
基于banner受限尺寸和高度，会衍生出一些构图方式，例如放射性构图、倾斜构图等。不规则的构图，设计上具有层次感，丰富的视觉呈现给人眼前一亮，更容易吸引用户眼球。
构成比例
banner大多为左右排版，图文比例4:6，接近黄金分割比例0.618，文案标题比例约2:1。画面中文案占比一定要大于配图，用户更关注是是内容本身。
2）配色
色彩体系：
暖色系
暖色系主要由红、黄、橙等构成的色调。容哟联想到阳光、火焰、热血等场景，给用户积极、活泼、温暖的感觉。暖色系色彩的饱和度越高，温暖属性越突出，用于电商活动，渲染气氛。
冷色系
冷色系主要由青、蓝等构成的色调。容易联想到海洋、冰雪等场景，给用户寒冷等感觉，适宜表现恬静、低沉、严肃、理性的内容，比如科技类产品。
同色系
同色系又称单色，这种色系的搭配在产品本身颜色比较统一的情况下，提取产品邻近色，作为画面的搭配色，让整体画面变得统一和谐。
类似色系
类似色相比同色系，它具有丰富性和可变化性，基于banner整体的主色调以后通过添加与主色相近的辅助色，是整个画面变得丰富活跃起来，同时这些配色方式也相对容易。
对比色系
对比色系，色相环上相距120度-180度之间的2种颜色（180度则为互补色），对比色之间的搭配能够给画面带来华丽、跳跃、浓郁的视觉美感，高纯度、高明度、等面积的搭配，会产生强烈的刺激感，干扰用户视觉体验。画面中往往会考虑补色之间的面积比例、纯度比例、明度比例、空间间隔的比例，平衡画面之间的视觉感。
创新配色
除了基本的色系配色系外，还可以尝试更多的配色风格。画面中有目的地运用色彩元素，丰富画面的色调。
色彩比例：
banner色彩需要考虑页面统一性；banner尺寸较小，信息色彩不宜过多，2-3种即可。画面主要由主色、辅色、点缀色组成，色彩的黄金法则60:30:10的法则，60%左右的主色、30%左右的辅助色、10%左右的点缀色。
3）字体
字体类型：
无衬线体
粗的黑体，具有官方严肃气质，自带有力量感，视觉冲击强烈，与速度线条、碎片、划痕等设计手法十分搭配。细的黑体，具有年轻、简约、细致的感觉。无衬线体易读性较强，常用于科技类banner中。
衬线体
衬线体装饰性较强，给人带来活泼、轻松的感觉。比较适用于文化、文艺、美食、女性、时尚等行业。
圆体/卡通字体
具有趣味性和活泼感，适用于儿童、宠物类、休闲食品、家居等行业。
书法体
有韵味和艺术感，视觉张力丰富，适用于中国风、艺术感等画面。硬笔书法字体：优雅、有亲切感，适合传统、文化等画面。
字体样式：
考虑字体大小、字重、颜色。文案有主文案和副文案之分，需要有对比性。字体的颜色选择需要考虑与背景色的搭配效果、banner主题间的关联，选择合适的颜色能凸显文案。
4）辅助图形
几何图形：
几何图形是banner设计中常见的辅助元素，它的多样性和简约性设计师十分着迷。几何图形可以创作无线的可能，用户对其有意无意地进行自我诠释。
圆形
圆形象征着圆满、融合、自然、和谐、无穷，在设计中具有非常强的包容性，由于其自身的可拓展性，将圆形进行拉伸、叠加、重复可获取丰富的图形。
三角形
三角形具有方向感、变化感，它的锐利给以垂直、刚强、庄严、向上的感觉，其长度有穿透感，象征崇高和无限。
方形
方形具有对称、有序、平静、专业属性，给人稳定安全统一感。
多边形
多边形的形状会给人带来稳重感，通过多边形凸显产品的尊贵感。
不规则图形
不规则的图形营造画面的氛围，突出主体元素，激发用户点击欲望。
流畅的线条：
流畅的线条给画面带来韵律感。
立体几何图：
立体几何载体让整体画面格调显得品质高。
5）动效
展现商品质感和工艺或者展示同商品不同状态时，动态banner比静态banner点击率高。呈现商品多样性和系列感需要静态广告。
1）传达
呈现出来的画面鲜明地表达活动主旨，文案内容，可用性。
2）美感
板式设计、配色、字体设计、风格、插图、点缀图案以及动效这些运用是否合理。
3）效率
整体复杂程度，后期banner修改和加工工作难度，可不可重复利用。
4）创意
画面主题是否突出，具有吸引力，刺激用户点击。
现实中多是单张banner图，而互联网产品中大多采用多张轮播banner。有限的屏幕内采用多张轮播提高空间的利用率，其次用户长时间盯单一广告会疲惫，轮播banner有利于吸引用户注意，激发用户探索欲望。
电商产品用得比较多，全圆角矩形或不规则矩形，此类banner运用在促销活动中，实效性特别强。
运营强度较弱，banner在页面权重较低的专题活动会用到白底模版化banner。排版左文右图，内容由主标题、副标题和小插图组成，例如支付宝首页中间位置banner。
需要吸引用户来参与运营活动，可以采用悬浮图标的形式，吸引用户的注意力，对页面布局不产生影响。
用于产品中同一个功能模块，多个不同入口，或者不同服务类型的商品入口。商城或者热门板块使用。包括：两个入口、三个入口、四个入口、五个入口、六个入口。
1）功能
banner在页面中所承担的责任是什么，活动运营、功能区入口、系统公告、还是第三方广告。
2）数量
banner位置所承载内容数量是多少，同时存在几个内容。
3）频率
banner采用的是静态banner还是轮播的方式。固定banner多久更换一次，轮播形式的banner，几个banner轮播，轮播的速率是多少。
4）层级
banner在页面中与其他功能区相比，banner位所属的信息层级是什么样。
1）静态/动态
静态banner。如果内容中有一个非常重量级的，其他的都是差不多的不怎么重要的，可以考虑只将重量级内容放在显眼位置的Banner上，且静态不轮播，其余内容放在别的运营位里。
动态轮播。轮播banner图注意帧数不宜过多，加上轮播指示器，提示用户banner的个数以及banner可以左右滑动。
2）尺寸
屏幕占比大的banner有更强的营销感和氛围感，常见电商平台的顶部banner。
屏幕占比小的banner会低调些，不会干扰用户阅读浏览页面，例如金融类平台。
1）图片大小
保证产品启动加载时间和操作流畅，上传广告图的大小建议在300kb以内。
2）图片格式
输出的格式：JPG、PNG、JPEG、BMP、GIF。
文章来源：人人都是产品经理 作者：界白
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一起深度用案例解析B端导航设计中的交互
hello各位在B端奋斗的小伙伴们，你是否会时常因为面对导航多种多样的形式从而面对需求时无从下手，你又是否因为虽然见过了很多的案例仍然不得导航设计的要领和精髓，没关系，今天我们就一起来解决这个在B端设计中困扰我们多时的难题，从交互的角度结合案例对导航进行一个立体的剖析
如果你准备好了那么就请系上安全带现在就发车
要探讨一个概念那么首先需要知道的是其精准的定义，才能展开研究，而所谓的导航（Navigation）的精准定义可以阐述为：是一种对信息的分类，帮助用户找到想要的信息、完成预期的任务
如果你觉得这个定义很抽象，那么不妨从这个角度去理解，如果说任何界面上的功能都能够找到在我们物理世界的隐喻的话，那么导航映射的就是我们物理世界中的路牌、导览、线路示意图等，因为立足于其功能而言，导航的作用用一种大白话的说法就是：告诉用户你从哪里来，你在哪里，你可以去哪里
由此我们对导航有了一个较为准确的把控，那么请在座的各位快速回答我一个问题，你能够告诉我以上6个内容那些不是导航吗？
3
2
1
OK公布答案，如果你的答案是2和6那么恭喜你，你对导航的理解是较为优秀的，2和6的名称大家想必也不陌生那就是：菜单，但是不夸张的说日常的工作中仍旧有不小数目的一波同学搞不清楚这二者的区别，那么如何对二者进行一个有效的区分呢
同样是从定义来入手，参照前面我们给导航进行的定义方式，菜单就是：是一种对动作的分类和集合，
帮助用户快速达到某个功能,也就是说当你对菜单的某一个栏目进行点击时会立马生成一个具体的动作，而导航则是对信息的分类与合集
那么明白了这点我们就可以对导航进行分类了，提到导航的分类大家一定会脱口而出一堆词汇如：顶部导航、底部导航、左侧导航、舵式导航、标签导航、菜单导航……没错这的确是一种分类，但他只是导航在外观这个维度的分类，并不是我们今天从交互、结构层去讨论的重点
而立足于结构来对导航进行分类又将是如何呢？较为科学的来说是以下几类：
全局导航
局部导航
辅助导航
内嵌导航
友好导航
远程导航
下面我们来对这6类导航进行一步一步的具体分析
所谓全局导航是指他可以覆盖整个产品的通路，往往表现为产品的一级分类（而且大部分情况都是一级分类），他不一定包含全局信息，但是一定可以让用户可以去到其目标的关键节点
所谓局部导航是指在同一个框架中，可以到这个节点上的上下级通路，他一定存在于严格的父子级关系中
所谓辅助导航就是提供用户在全局/局部导航不可达到相关内容的快捷途径（这个快捷途径在本产品内）
所谓内嵌导航也叫上下文导航，是指嵌入页面自身内容的导航，通常同在上下文超链接、引导搜索等
所谓友好导航是指它可以为用户提供一个便利的前进途径，在需要的时候能够找到入口信息，通常在不需要的时候成隐藏状态
所谓远程导航是指不包含在产品结构中，以独立的方式存在产品内，通常表现为网站地图、索引表（地址选择、品牌选择）等
在从结构的层面了解了导航的基本类型之后,顺便给大家提一提导航的外观，这里并不展开说，大家需要知道的是导航的外观使用遵循的是“同构异型”的准则，什么意思呢？同样的结构（比如同一组数据集：商品、商品名称、商品价格）可以嵌套进入不同的外观如：卡片式、列表、详情……这个视具体的业务情况、使用场景而定
常用的导航外观基本分为以上七种外观即：菜单栏、树状表、顶栏、选项卡、面包屑、文字链接、步骤
知道了导航的结构分类和使用场景，那么不妨来给大家一些关于导航本身的小贴士作为原则参考解决大家在实战中的一些问题
对于B端产品来说稳定相当重要！因为B端产品对于用户来说使用和学习成本、门槛较大，如果你很频繁地对其路径进行修改调整，用户就会因为产品不符合操作的习惯、心智模型对产品很容易滋生负面情绪，对于产品本身来说这样的伤害是需要尽量避免的
还是从稳定的方面来说，我们需要保证的是导航的变化不会因为产品的变化而发生很大的变化，举个很简单的例子就是当我们的产品的功能增多时，尤其是二级导航的项目增多，导致原来如果是横向布局的导航不得不改成纵向布局的导航，这就所谓的因为产品的变化发生很大的变化，所以在选择导航布局的时候就需要打下一个很好的基础便于日后的拓展
这是站在一个外观和交互共同的层面去看，导航的大小一定要足够，而且其位置一定要是用户认为足够清晰的，确保在视觉反馈的的层面对于用户来说是友好的，其次就是所有的可交互区域需要有积极的响应，与内容区要有对比，可以将其称为界面的热情度，这也是一个优秀界面的自我修养
一个页面中允许出现两个主导航，同一个界面中允许出现两个同样的导航项，并不是说一个项在导航中只能够出现一次，并没有那么死板
这对于To B 的设计来说十分重要，不同于To C的产品，B端产品的一个重点就是要符合用户的预期，所以我们一定要避免“因为有趣所以这设计”这个思路
界面上面所有的界面编排，所有的组件，所有的控件，所有的模式都是可以找到隐喻的，比如文字链和带“跳转”的文字链，它代表的隐喻是不一样的，所以我们就需要赋予其不同的外观和交互响应对应户进行反馈
回到最初导航的定义，它的本质是对信息进行分类，让用户快速完成任务，这也是导航的本职工作，很多时候不一定要拘泥于这个项目它应该严格存在于哪个层级之中这样的思路进行设计，而是根据用户的需求，如何将这个项目合理的分类于最适合的集合之中
这是一个立足于外观的点，根据大量的案例分析和眼动测试，目前市面上最为常见的按照信息权重布局的导航可分为：横向式、纵向式、纵横式，由于这部分我们不展开说，所以直接在上图整理了每种布局的特征、优劣势和应用场景
知道了上面的分类和注意事项之后，下面我们用一个具体案例来对导航的交互层面设计进行一个深度体验（因为此内容十分精彩也涉及到机密，所以不在这里做具体展示，以示意的方式来叙述），总共分为六步，看看这是否也是你工作场景中比较头疼的呢
需要搞清楚导航项的定义是因为导航项的定义决定了你的目标界面是什么，所谓的目标界面就是导航所引导你到的哪一个分类的信息处
所以我们首先先来整理一下导航中每个导航项的界面定义，这也是我们日常工作中对导航梳理十分重要的一步
当问题被罗列出来之后我们就会自然而然的产生各种各样的疑问，比如导航分类之间存在有的存在流程上的关系，但是有的分类却并不属于流程，这是为什么呢？再比如有的导航分类和导航项之间名字一样但内容却不一样这又是为什么呢……（想一想这是不是我们工作中也经常遇到的疑问呢）这都是后面我们需要去优化的地方
保留住上面的问题，我们来做第二步，这一步我们需要搞明白用户的使用路径，因为这样我们可以很好的给任务类产品做一级分类
通过基于不同角色的用户体验地图我们可以得出不同的用户操作路径，于是便可以很顺畅的得出这一套操作流程的大框架
基于业务中的任务链路推导出每一步的操作路径，于是我们就可以将用户的操作路径就可以提炼为一级导航
得出了一级导航，下面我需要角色的权限进行一下区分，这也是B端产品的必备属性
于是我们为每一个导航项进行了角色权限的梳理对应，那么一级导航中每个导航分类所对应的角色也瞬间一目了然，这里面多说一句，当用户用不同权限的账号登录产品时，能看到不同的内容这才是一个优秀的拥有权限设计的导航
到了这一部分对于一些完全没有接触过数据的同学来说理解起来可能会一些难度，我们首先需要知道的是：“相同的数据来源，可以帮我们区分界面性质，而且相同的数据来源，往往会有一组相同的界面来围绕”
在此需要记住三个概念：
1.元数据：数据属性的信息，用来支持如指示存储位置、历史数据、资源查找、文件记录等功能，例如一件商品、一个客户
2.记录集：指定数据库中检索到的数据集合，例如订单列表、发货列表
3.关系列表：对来描述对象和对象的关系，比如你和我是好友，你和我在同一个企业微信群
于是我们为导航项进行数据性质的区分归类，也就是说相同数据类型的实体往往围绕着某个元数据并且包含系列的界面，当我们这里整理完后发现，相同数据性质的实体（这里可以理解为导航项）貌似可以归类在一起，这是我们作为分类的一个依据
根据相同的数据性质将导航项归入应该归入的二级导航中，此时不妨和最初的版本进行对比，我们的一级二级导航相对而言已经通过改版清晰了很多
这一步其实是比较好理解的，很简单的法则：“高频次高优展示，低频次降低权重甚至隐藏”这是针对于二级导航中每个导航项的排布进行的设计。这里不妨把频次由高到低量化成为：实时关注、每天关注、每月关注、很少使用、极少使用这个几个概念，分别用五角星、三角形、矩形、圆形、菱形进行代表
而关于使用频次的高低甄别一般我们可以通过用户调研和数据埋点的两种常用方式来进行，这里并不展开讲
于是我们可以将使用频次作为一列新的参考放入导航项的表格中，瞬间清晰明了
根据使用频次调整每个导航项的顺序
这一步涉及的就是外观了，不妨回顾一下2.8中对于导航的三种常见布局，根据产品的操作复杂程度等综合需求，我们选择了第二种形式成为最终形式
文章来源：站酷 作者：核糖bro
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
做中后台产品的设计，基本都逃不开导航布局这个大框架。
基于用户的 Z 字形扫描行为，重要的导航应当选择左侧导航或顶部导航。
可是横着竖着有那么大差别吗？被人问道为什么这么选择，该如何回答？
今天给大家些灵感，从以下四个角度分析一下：
JR Kingsburg 曾经做过一次实验（A comparison of three-level menu navigation structures for web design），研究 3 层导航中，哪种组合使用效率更高。
这三层中，每一层都有横向和纵向两种可能性，所以实验总共有 2×2×2=8 种对照组：
他为这 8 种导航布局做了不同电商原型，让用户来买东西，并记录各种数据，结果发现了很多有意思的数据：
综合这些数据，看起来整体表现较好都是「左上上」、「左左上」、「左左左」。
科学虽然很严谨，却缺乏灵活度，例如本次试验的场景单一（电商购物），而且用来测试的界面未免也太简陋了吧！
所以我们再从其他角度思考看看。
从占据面积的角度来看，横向导航比纵向导航省地方，因为只要细细一条就好了。
然而，选项数量不多时横向是可以；选项多起来，横向导航就很拥挤了。
毕竟纵向导航方便滚动，横向导航很少有用户会尝试滚动查看的，「…」也不是什么方便的操作。
所以，如果确定选项少可以选横向，不确定或者数量多建议保险起见选纵向。
任何导航，都要占据屏幕不少空间，这对尺寸适配都是一件麻烦事。哪怕产品并不需要为移动端做响应式布局，只要是网页端，就得考虑窗口尺寸的变化问题。因为设计师的 Mac 和大量用户的 PC 甚至平板电脑之间，展示上的差异真的不小。
横向导航占据空间最小，同时也是最难做尺寸适配的。尤其是如果上面除了导航之外，还放有各种 logo、头像、图标、搜索…各种东西时。横向导航一般都有三种状态：展开、折叠和收起。但是纵向导航就简单了，只需要两个状态：展开和收起。顶多再让展开状态的宽度能够自适应变化或手动拉伸就差不多了。
这么看来，如果产品需要考虑很多不同尺寸适配的问题，纵向导航是最简单的选择，除非横向导航的内容不多维护起来不麻烦。
我之前为了研究确定按钮放在左边还是放在右边好，做了一系列实验分析，结果得出超出我预期的结论…放哪都没多大问题，统一就好。于是，我想这个问题也可以类比一下。
大部分网站都是横向导航，所以说如果产品是以网页版为主，且用户会经常穿插跳转使用其它网页，那么也使用横向导航比较符合习惯。
而无论 PC 还是 Mac，系统页面的导航在左侧的情况比较多，所以说如果产品是系统软件的话，纵向导航比较符合习惯。
然而，更更更更更重要的是，千万不要同一个产品不同端或不同子系统的导航不一样！用户很可能一会儿用这个，一会儿用那个，结果操作习惯换来换去，人都弄晕啦！还有，就是改版换导航肯定要让老用户不满，好不容易养成习惯改起来容易吗？所以说，决定导航布局时还是要谨慎才好哦。
文章来源：优设 作者：体验进阶
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
B 端的一些业务场景中常会使用地图元素来展示信息，但是 B 端的页面情况较为复杂多变，与 C 端的百度地图等使用场景以及业务具有一定的差异性。在工作中，我们对于地图页面的布局、交互统一性上的研究还是较少，所以我进行了业务场景下的列表与地图的关系的设计沉淀。
地图作为一种将地理信息以二维的手段展示的图像。日常纸质地图常常会分为两个模块：地图信息、列表信息。对于现 web 端的产品，地图也保留两者的信息区域并进行不同的布局排布，如百度地图等。针对 web 端的产品，因为有交互形式的出现，所以在地图上会存在更多的信息展示。
地图信息：
列表信息：
针对现在工作、学习过程中遇到过的具有地图元素的业务，我进行了整理并总结出了一些不同场景下存在情况以及现业务阶段存在的问题。
首先我总结了列表的信息与地图信息的关系，一共为三种不同的情况。
随后，我针对打点详情信息的复杂度进行了三种程度的区分：简单；复杂；极复杂（较少）
最后，我走查线上业务版本发现了一些现地图元素的一些问题。
1. 排版不统一
针对地图的两种布局，使用较为随意，并没有规定其合适的场景使用不同的排版形式。
2. 功能入口的交互不统一
针对于地图上的列表，常有功能有定位、查看详情，以及一些特殊场景下的特殊功能入口。然而，这些功能其入口常常不统一，点击列表，有时承载的是查看详情，有时是地图定位、甚者点击卡片不承载任何功能入口。
3. 地图打点与列表的对应混乱
有时地图上会存在多个列表的情况下，从而导致列表信息与地图上打点信息对应的混乱，这样会让用户感到信息的不明确。
根据以上存在的问题以及情况，我们总结了两点设计原则，针对地图模块进行了修改与推进。
地图中常包含了四类元素：列表：主要信息、地图、地图打点、打点的详情信息。
针对以上问题，我们从三个点进行了整理分析：列表的交互形式、地图与列表的整体布局、地图打点的详情信息。
列表交互：针对地图列表，点击列表的主要交互操作分为三种
地图布局：为了清晰整体的地图层级，我们将列表与地图分为了两种不同的形式
并且，根据整体的布局结构，我们将这两种布局形式中包含的隐形的逻辑从而进行了区分，将地图与列表进行了主从关系的分配。针对于第一种形式，地图为底，列表作为具有阴影的第二层结构，其包含了隐形的地图为主、列表为从的逻辑形式；
而针对列表与地图的左右排布结构而言，因为两者处于同其级别的元素，更具左右、上下的阅读习惯，其包含了列表为主、地图为从的逻辑形式。
而后，根据整体布局的逻辑形式，我们将上文总结的三种不同业务场景进行了分配，并提出了使用建议。
针对于地图（主）/列表（从）的布局情况：
针对列表（主）/地图（从）的布局情况：
打点的详情信息：上文我们根据打点的详情信息分成了三类：
针对这三种情况，我们提出了三种情况下使用的交互形式。
对于简单的信息来说，可以推荐使用气泡弹窗的形式；针对复杂的信息展示尝试用右侧抽屉的形式以及替换当前列表；针对极复杂的场景如需要展示画布或者列表的话可以考虑底部抽屉的展示形式。
针对气泡弹窗以及右侧抽屉，我们也提出简单的使用建议。
气泡弹窗：
右侧抽屉：
最后，根据上述总结的内容，我绘制了一张表格简单的流程图供大家快速的参考。以上结论，仅仅是一个初步的总结，对于更加的细节的点还需要继续进行研究迭代，例如简单于复杂的界限等。
文章来源：优设 作者：土拨鼠
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
接下来为大家分享一下我收集到的案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
--网站建设UI设计--
导语：TMS（运输管理系统）是一个物流运输平台，它是供应链管理系统（SCM）的一部分。广义的TMS平台涉及面较广，不同企业的业务模式不一样。本文所探讨的TMS是具有实际运营能力的第三方物流运营平台，它主要是一种通过技术的手段整合社会物流信息，优化配置物流资源，帮助货主降低物流成本并提供管理运输业务。下面从业务描述、系统架构和功能模块三个方面作一个简单的分析，一方面是梳理业务的作业场景，另一方面宏观认识产品的整体框架，分析具体功能解决的问题点。
通常来说，整个运输阶段分为三个阶段来完成：
货主提出运输需求，建立任务订单推给运营方。
客户下订单的方式有很多，比如电话、邮件、发信息、TMS系统、其他平台等。提出的任务需求，也称客户订单，它是货主和运营方的交互凭证，承担着需求描述、运单跟踪、应收结算等功能。
货主订单主要包含4方面的信息，收发货地信息、货物信息、用车信息、增值服务。
运营方按照一定的运输规则处理，做这个规则处理的过程，一般称之为计划，计划的形式有多种，主要有拼单、拆单、规划线路图、地图合单等，然后再将计划好的这个订单分派给合适的承运方。
最常见的手段是拼单，又称零担运输。将多个货主订单合并拼成一个派车订单，一般规则的处理条件有：订单量、装载能力、价格、路线、发货时间、收货时间等。
计划的手段除零担集货外，还有大单拆分、长单分段等，主要目的来达到成本分摊的作用。计划的手段有智能计算，和人工处理+半自动计算。
承运方接受订单，并将订单分配给司机，由司机执行完成运输任务，这个阶段又称之为调度。运营方将计划的订单分配给承运方，生成最终的运输订单，它是运营方同下游承运方的唯一标识，这个凭证会关联到订单的跟踪监控和应付结算等功能。
基础资料的建立，对TMS的需求任务单和调度非常重要，只有建立了合作关系，才能在客户需求订单上选择到正确（有合作关系）的客户，在计划调度的时候才能匹配到正确（有合作关系）的承运方。
录入货主、承运方的信息，以便于后期订单的生成， 这些信息的维护可以保证每个订单都有归属客户，方便订单的管理。
1）货主管理
客户资料会有专门的CRM维护。
2）承运方管理
有承运商、自营车辆和2C车主三种。 2C车主，个人司机管理模块，没有合作关系。个体司机加入平台，需要进行注册认证，只有认证通过后才能给这些司机派发运输订单。
司机的信息维护除了注册认证外，还有在平台的所有活动数据记录等。和承运方相比，此前不需要有固定的协议合同，相当于临时工的概念。
3）用户管理
运营方用户之间建立的合作权限关系。
在第一阶段，货主提出用车需求。需求订单信息包括收发货人信息、货物信息、用车信息和增值服务，详细描述在上面的「业务描述」中有说明。具体到TMS系统中，这里不但只是货主的信息录入，它还包括收发货人信息关联、地图定位、里程预估、上下游价格等。
客户订单它是货主和运营方的唯一标识，货主的订单状态有，待计划、待调度、已调度、等待提货，取货中、运输中、已完成等多个状态。
客户需求订单创建成功以后，就开始进入到运输业务的第二阶段，运营根据一定的规则处理，将订单进行自营车辆运输、派送给承运方或者转给2C车主，这边的基本流程为：
1）审单
TMS系统对客户的需求订单做分析，分析出有问题的订单，比如信息填写不完整、地址解析错误等。
2）计划
计划和调度是运输业务的第二个阶段，它关系到整个运输的最终成本控制，是整个运输过程最重要的核心组成部分。
计划的目的，是为了解决时效优先还是成本优先，更多的作业场景是在这两者间作一个平衡处理。运营方作计划的规则处理，会受到以下3个条件约束：
常见的计划优化手段有：装载优化、路线优化。 运输计划的方式有很多，总之在满足时效的同时，成本最低是计划的主要目的，主要手段有三种：
关于城配：
考虑到TMS中订单量大、位置信息较为复杂，纯人力计划效率低，有时不能够满足客户的需求。
所以一些企业会根据订单结合计划承运方作出进一步的优化「智能调度」，利用算法围绕货物、车、路线、时间合理规划策略，实现最优资源的分配方案，完成最终的运输工作。
3）调度
把计划的订单进行派发给相应的承运方，这个过程称之调度。派发的渠道有三个，分别是自营、合作承运商和2C车主。
承运方接单后，会将调度的信息同步到WMS，包含车辆提货时间、运送车型等。告知到仓库的目的 ，可以让仓库可以提前备货，节省提货时间。下面所说比价计价模式，就是在调度的时候，根据各个承运方给出的报价，会选择合适的、性价比高的承运方。
4）跟踪
订单跟踪是运输业务的第三个阶段，承运方已经开始执行配送任务，实时跟踪订单状态，并将状态信息回传给运营方和货主。实时获取订单的当前状态，比如位置信息、货物的温度等，也方便平台管理司机，以保障订单任务的顺利完成。
提货：
跟踪监控：
签收：
中转站：
5）回单
一种发货的凭证，证明对方已收到货，也是最终货主结算的凭证。
收货方签收订单后，司机需要上传回单并更改状态完结订单，考虑到线下是作业，回单的照片清晰、其他敏感信息等原因外，运营方需要再次确认后将回单再返回给货主。
回单也分电子回单和纸质回单，电子回单：大部分情况下都采用这种，司机将签收方的订单，拍照上传即可；纸质回单，需要将回单寄回给货主，当然回单还是会扫描记录到TMS系统中。
在客户订单签收之前，都可以上报异常，上报异常需要对异常情况进行详细说明，比如货损损坏情况，进而进行协调处理，界定赔偿责任等。
上报异常的渠道可以通过电话联系运营方，由运营方的客服部门进行对接，异常订单也会进入到TMS异常管理中，并对异常进行记录、处理、跟踪工作。比如上述所说签收方在签收的同时发现问题，也可进行异常上报。
根据不同需求维护不同的价格模板，方便使用和管理。上游价格模板，对商家进行收款的计价规则； 下游价格模板，对承运方进行付款的计价规则。
根据制定好的价格模板，规定价格模板的应用条件。对符合该条件的商家套用模板进行计算，价格模板的调用可以从不同维度，比如：线路、商家、货物类型等。不管下游承运商，还是上游的货主，不同的客户都会应用不同的报价模板。
在结算管理中，对生成的订单费用进行审核，实际业务的变动对最终账单核算也会有调整，审核无误后生成最终的账单，然后由财务人员对照账单进行上下游的收款和付款。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文章来源：人人都是产品经理 作者：亦果儿
业务场景拓展，字段增加又增加，原本眉清目秀的表单变得面目全非。
想要将这些复杂信息、组件组装成用户易填的表单，常常会让设计师陷入无限的纠结。本文章聊聊用户体验视角设计表单的思路，希望对大家有帮助，欢迎一起讨论交流。
结构如下：
表单是数据录入、数据展示的重要工具。
生活中随处可见，比如面试要填表单、办银行卡要填表单、入库要填表单…
互联网产品设计中也离不开表单，如注册、登录、商品录入、功能设置…
表单主要由这四类元素组成：标签、输入域、操作按钮、提示信息。
1. 标签
标签文本主要是解释输入项的含义，一般不宜太长，需要简洁明了，快速让用户理解。
标签对齐方式有左对齐、右对齐、顶对齐、内对齐，都有各自优缺点，不同场景酌情使用。
2. 输入域
输入域是表单的核心，是录入信息的核心交互部分，为了不同信息更易录入会采用不同交互组件。比如：单行文本框、多行文本框、单选框、多选框、数字输入框、金额输入框、日期、日期区间、人员选择、部门选择、图片、文件等，具体组件可以去查看 Ant design、ElementUI 官网。
3. 操作按钮
操作按钮是表单信息录入完成后，继续或取消任务的触发器。
为了让用户视觉聚焦和更快完成任务，操作按钮分为主次按钮，通常主任务操作为主要按钮，次任务操作为次要按钮，并且一个场景中通常只有一个主按钮。比如，提交和取消，保存和取消等。
4. 提示信息
录入提示：帮助用户更具象的理解录什么怎么录。
帮助提示：表单中如果标签信息无法让用户理解，可以提供帮助信息让用户更准确的理解，通常在标签的前/后有一个帮助按钮，点击/鼠标悬浮按钮出现有帮助信息的弹窗。其他还有页面帮助信息，新手引导帮助信息等。
错误提示：帮助用户理解哪里错了和怎么做正确。
表单设计目标：让用户更轻松获取表单信息，更容易懂，更快速完成表单信息录入任务，如果还能让用户过程很愉悦就更妙了。（用户体验视角）
设计方法：通过降低用户行为负荷，提高表单设计的用户体验。
行为发生的常规路径：通过视觉输入信息到大脑 （视觉）— 大脑消化信息（认知） — 采取动作（动作）。
视觉负荷：用户在屏幕上识别和寻找信息，都属于视觉负荷，信息获取越轻松视觉负荷越低。
认知负荷：大脑处理信息时理解、思考、记忆都属于认知负荷，复杂陌生信息的认知负荷需要消耗大量脑力；所以减少认知负荷的核心是减少用户思考，甚至是不要让用户思考，成为大脑潜意识认知的决策。
动作负荷：用户在使用产品时如果操作太繁琐步骤太多，有可能会中途放弃，这就是动作负荷带来的影响。所以在不大量增加视觉负荷和认知负荷的前提下，减少交互步骤可以降低动作负荷。
通过降低视觉、认知、动作负荷的“三招”，提升行为产生节点间转化率，让任务行为发生更容易。
误区：有些人陷入了设计极端，认为操作越少交互设计就越好，实际上用户能更好阅读并理解比少一步简单操作更重要。
补充：心理负荷在特定场景也是影响用户行为发生的重要因素，如隐私、健康、安全、财物等。
1. 降低视觉、认知负荷
表单的信息是视觉负荷和认知负荷的源头，所以如何设计信息易读易理解就尤为重要。
灰机的方法就是先盘信息，再梳理（该拆的拆，该合的合，该减的减），然后有节奏编排信息。
就像搬家后收拾房间，有一大堆东西需要整理，我们通常会先盘下有哪些东西，然后就是该丢的丢，该放在一起的放一起，最后分门别类放在房间的合适位置。
拿到表单信息后不着急动手，先了解此表单背后的业务场景，理解每一条信息字段背后的业务价值。这是有说服力设计的核心支撑。
通过拆、合、减的方法，归类组合信息。字段信息非必要就减掉，相关性高的信息放一起，梳理的目的是让信息归类更符合用户认知，让信息更易被用户理解。
技巧点：
有节奏展示
信息有节奏展示有利于用户更高效获取、理解信息。毕竟如果信息像机关枪子弹一样连续涌入大脑，谁都没耐心看，并且大脑消化也跟不上。
技巧点：
2. 降低动作负荷
通过减少用户行为成本，达到降低动作负荷的目的。毕竟录入信息方式越容易，就更容易完成表单录入。
技巧点：
文章来源：优设 作者：灰机
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
