传统零售中，货架的陈列对销量的影响巨大。如何合理的分配有限的空间，通过促销品吸引顾客、从而促进最大利润产品的销售、清理滞销品和库存货，显得尤其重要。网上零售虽然理论上没有货架和空间的限制，但商品的展示机会从来都是不公平和不平等的。

有人总结b2c商品销量是二八法则，20%的商品贡献了80%的销量，但很多网站可能更加极端，10%以下的商品贡献了90%的销量。导致这种结果的原因之一是商品的展示机会严重不均衡。

总结下来，以下因素将直接影响商品的展示机会：

• 着陆页导致的流量分布不均。

通常b2c网站的主要着陆页面有3种：首页、专题页和商品详情页，人工主观推荐商品、seo和广告投放带来的流量倾斜导致部分商品展示机会太多，而更多商品却缺乏展示机会。

• 智能推荐系统给予商品展示的机会的不均衡

无论是基于内容过滤还是基于协同过滤的算法，都间接的放大商品展示不均衡的情况。

• 站内搜索给予商品的展示机会不均衡

站内搜索的查准率和查全率问题、搜索结果排序问题也将对商品的展示机会造成影响。

• 导航、分类、商品列表排序给予商品的展示机会不均

这是本文重点要阐述的方向

由于一般b2c网站用户通过导航、分类浏览到达目标商品页面所占的比例巨大，我们这里主要谈谈商品列表的排序方式。

目前大部分网站提供如下排序方式：

按销量排序

按人气排序（按浏览次数）

按新品排序（按上架时间）

按价格排序

按商品评论数量排序等等

这些排序方式多是单维度的，系统默认一种排序方式（当然还支持人工调整排序），同时支持用户自由选择其他排序方式。

商品列表中单维度排序的问题

1、单维度的排序方式容易造成商品销量的“马太效应”，如按销量排序，一开始卖得好的商品愈加卖得好，一开始卖得不好的商品和新品将再难有机会。

2、如果说默认按销量排序还能基本反映用户的需求，那么按新品排序就只能算是网站的一厢情愿了，老客才会更多的关注您网站的新品。

3、按价格排序和按评价数量排序也同样造成新品或畅销品缺少展示机会。

4、大部分用户很懒，只看默认的排序方式；虽然你自认为提供了多种明显的排序方式供用户选择，但多数用户只是懒得点击（这个比例有多少大家可以统计）。

我们知道，给予了用户不认可的商品过多的展示机会，或者没有给有潜力的新品足够的展示机会，都将带来销量的损失。当商品SKU少时，可以通过人工排序较完美解决商品列表排序问题。而当商品SKU数众多，商品上下架频繁时，人工排序就显得费时费力了。为了解决展示机会不公的情况，排序的原则应该是：

1、 尽量给予用户认可的商品更多的展示机会；

2、 给予用户不认可的商品更少的展示机会；

3、 从商家的角度考虑则是：把利润最高的商品展示给用户；

4、 给予有销售潜力的新品足够多的展示机会。

总结下来，这些事情还得通过系统+人工的方式操作。在下认为系统的默认排序因素应简单的包含以下5个方面：

1、 商品在若干时间内的展示次数 （这里用A表示）

2、 商品在若干时间内的销量（这里用B表示）

3、 商品的利润（毛利：销售价-进价）（这里用C表示）

4、 商品离当前的上架时间 （这里用D表示）

5、 商品若干天内的好评率 （这里用E表示）

1和2计算出的是商品平均x次展示机会的销量，如我们可以计算商品最近7天内每千次展示的销售量。但如果排序仅仅包含这两个因素会有明显的缺陷，如在相同展示量下，一个售价10万的钻石和一本售价10元的书销量理论上是无非相提并论的。所以我们需要适当考虑商品利润金额的问题。此外还需考虑上架时间因素和好评率因素。

商品的排序系数= B/A*C *1/D*E  （“B/A*C”表示平均每次展示机会带来的销售利润，“1/D”表示距离当前的天数的系数值）系数越大，排名越靠前。

举例一，某商品M，在若干天内展示了1000次，销量为5，利润为150元，离当前的上架时间为5天，若干天内的好评率是98%，则该商品的排序系数为：5/1000×150×1/5×98%=0.147

举例二，某商品N，在若干天内展示了100次，销量为5，利润为15元，离当前的上架时间为1天，若干天内的好评率是95%，则该商品的排序系数为：5/100×15×1/1×95%=0.713

最终，某商品N应该排在商品M前面。

这里有较多细节没阐述，算是写了个想法，也没最终实践过，欢迎批评指正！

推荐你看看类似的文章

• 2012/01/31 -- 目标商品辅助搜索——分类检索 (1)
• 2011/12/12 -- 底层数据库规划—搭建标签管理平台2 (1)
• 2011/12/05 -- B2C积分系统的规划（二）-数据分析 (2)
• 2011/12/05 -- 底层数据库规划—搭建标签管理平台1 (0)
• 2011/11/29 -- B2C积分系统的规划 (一) (1)
• 2011/11/28 -- 底层数据库规划之一搭建标签体系 (1)
• 2011/11/27 -- 电子商务b2c实战之三策略 (0)
• 2011/11/27 -- B2C站内搜索初探—写给不懂技术的你 (0)

以人为本的设计，不能不考虑普通人在一般任务执行中的耐受力问题。因为人的精力有限，再强大的需求，无力去完成也是枉然。精力的有效转化率，是衡量交互设计品质的重点。

1.公式
精力一般由脑力和体力构成。针对互联网产品，脑力居前（非生产类网站的体力消耗很低）。而脑力的组成又分为注意力、理解力和记忆力。本文将尝试以注意力为例分析交互设计的特点和注意事项。
注意力本身可以集中、分散和转移。集中一般出于明确的需求、潜在的兴趣；分散则由于信息干扰和不可控的时间；转移一般发生在需求探索阶段。
以网站信息结构内的各元素为单位，加上每个页面的所有视觉元素，可以得到网站总的注意力“项”。用户就是利用这些项去满足自己的需求，交互设计则是这些项的描绘者、组织者。如果假设注意力有限，那么每个项分享到的注意力应该是固定值。加上因为个体差异，兴趣和需求的等级不同，便得到了以下公式

注意力转化率计算公式

其中除了“需求强度”以外，“兴趣浓度”、“时间长度”和“可视项数量”三个值，交互设计都可对其产生影响。
2.兴趣浓度
用户在网络上的操作习惯和交互预期，有自己独特的心智模型，有时与现实生活中是不同的。比如现实中我们对图片的要求只是看，挂在墙上或拿在手上。而互联网首先是一个超链接整合平台，其次才是一个展示平台。所以上边的图片除了看，还被赋予链接的预期。人们对它的期待变得更加丰富。因此，赋予图片更多交互内涵可以直接提升用户的兴趣值。
对兴趣的两个典型设计思想是，图胜于表，表胜于文，还有拟物化设计，包括拟物的文案。可以说对象越具体，人们就越觉得安全和亲切。而亲切有礼的，符合物理定律的，对操作及时反馈的，满足情感需求的设计，都可以为兴趣加分。反之亦然。

不可用状态不是好的设计，尤其当激活它的条件比较多时

正是基于人们对图形化的向往，视觉设计才会对交互设计产生不可低估的影响。个人认为交互设计中凡是与兴趣相关的部分，视觉都应该成为重要的参考因素。比如控件的颜色，文案的排版，链接的展示方式等等。
3.时间长度
互联网交互设计和日常用品交互设计的一个重要区别，还在于两者的时间观念。现实中，时间是重要成本，经常影响人的决策和情绪。网络环境中，体力和人际负担被充分弱化，时间大部分只是个人脑力成本。如果需求和兴趣衔接的好，时间甚至可以忽略。
不说游戏这种极端的例子，以平常产品的加载时间为例，如果以兴趣为导向处理得当（进度条和微型漏斗等时间计算工具属于此列，而预加载则属于需求衔接），用户也不会产生太大抱怨。涉及到搜索、寻找、浏览等注意力分散的情况，用户几乎只关心项而不关心时间。
需要注意的是，流程性比较强的任务，开始和结束都要有明确的提示，以防止注意力溢出，造成不必要的精力损耗。

任务完成提示可以防止精力损耗

4.可视项数量
一般来说，交互设计的重头工作是项设计。如确定信息结构、元素词典、视觉形式等。为什么说可视项数量越大，注意力越小呢？这是由认知特点决定的。选项越多，步骤越长，人越需要耗费理解力。理解力带给人的压力比较大，需要求助于向内的注意力，把注意力的任务属性，转向逻辑属性，造成交互能力降低。加上对注意力转移所使用时间的预期，对鼠标和键盘操作的苛求（体力），人们普遍反感冗长的表单，页面跳转等情况。于是便出现了“响应式展开”、“弹出泡”、“弹窗”、“标签”等交互形式。

项的组织和展示方式是大课题

除了可以利用好的组织方式来“减少”可视项数量，元素词典、视觉形式也可以影响兴趣，利用兴趣来提升注意力。以元素词典为例，作用主要发挥在关键词上。如“推荐给你听”和“我们一起听”中的“一起”，“你可能会喜欢”和“朋友们也喜欢”中的“朋友”之类。阿拉伯数字的注意力明显高于中文数字。“删除全部”的反应速度也要快于“清空”。如果不考虑使用环境，“删除张三的微博”和“删除微博”，那个效果好？
5.总结
交互设计作为一门过程科学，需要一定的时间和精力损耗。从互联网领域看来，因为排除了体力因素，注意力变得尤为重要。以注意力转化率为契机，我们可以把交互设计向用户体验设计推进一步。
注意力和理解力的结果是记忆力，关于记忆力对交互设计的影响，下次再交流。

译者序：当我看到这篇文章的时候，还好发布的时间不算太早，主题很对我的胃口，因为我的Blog已经这么做了。但这篇总结的很全面，提到了一个新的名词“响应式Web设计”，作为Web内容应该去更加灵活的呈现在不同的终端上。这让我想起了之前写的一篇文章《未来我们只需要浏览器》，随着智能手机和各种Pad的发展，内容终端终究会发生改变，Web展现需要去适应这种趋势，并带来优秀的阅读体验。

响 应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说，这种设计概念，就是让原本1292像素宽，4栏的内容，能够很好地显示在1025像素宽的用户屏幕上，同时还能自动简化成2栏。当然，让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了。这种特殊的设计形式就被成为“响应式Web设计”。

响应式Web设计与传统的设计方式截然不同，开发人员（特别是新手）必须要理解它的优势和弊端。这篇文章正是为大家揭示一些实例的。（这里介绍一个叫“Media Queries”的网站，里面介绍了更多实例和演示）

数据表格是响应式Web设计的经典使用情景，实现它的想法与传统的设计理念有很大不同。数据表格默认很宽，当你要查看它全貌时，你得缩小表格，但这时字会变 的很小，很难去阅读。然而当你想看清楚上面的字时，就不得不再把表格放大，这时要查看完整表格就得横滚加纵滚。这么阅读表格也太KB了。或许重新格式化表格或以饼图形式展现是种解决方案。再不然，你可以弄一个迷你图，即使在窄屏幕里它也能适应。

响应式Web设计中的图像以流式图像为主，可以被上下文感知的图像所替代，这是一种更好的设计方式。这种技术的真正意义在于，能够让图像适应不同的屏幕分辨率，更大的或更小的。所以它与传统设计的理念和技术都有很大不同，合理使用会让你的网页化腐朽为神奇。

响应式Web设计实例

Simon Collison

Andersson-Wise Architects

Stephen Caver

Sparkbox

Food Sense

The Boston Globe

Think Vitamin

Sasquatch! Music Festival

Internet Images

Staffanstorp

Seminal Responsive Web Design Example

Naomi Atkinson

Forefathers Group

Spigot Design

New Adventures In Web Design Conference 2012

Illy Issimo

Arrrrcamp Conference

Robot or Not?

Earth Hour

Clean Air Commute Challenge

Launch Kit

Teixidó

Ribot

Deren Keskin

Sweet Hat Club

Glitch

dConstruct 2011

Adaptive Web Design

Authentic Jobs

Five Simple Steps

Splendid

Ryan O’Rourke

FlexSlider

El Sendero del Cacao

Do Lectures

St Paul’s School

Naomi Atkinson Design

Ben Handzo Photography

Stunning CSS3 Media Queries Example

Nordic Ruby Conference

Halifax Game Jam

ASU Online

3200 Tigres

Pixelab

Kings Hill Cars

8 Faces

Asbury Agile

Alsacréations

Sleepstreet

相关文章

1. 德国之旅-奥地利萨尔茨堡
2. 德国之旅-新天鹅堡
3. 德国之旅-纽伦堡
4. 德国之旅-法兰克福
5. 德国之旅-贝希特斯加登

　　在拜读和翻译了Android design设计指导后，对比Android 4.0与Android2.3及之前版本的app设计指导，总结了Android 4.0设计的10大改变：

1. 导航栏 (详见模式PATTERNS>导航Navigation)
　　由之前的物理按键导航（返回、菜单、搜索、主页）变成了嵌入屏幕的虚拟按键（返回、主页、最近任务）。

　　　　　　　　　　左侧为早期有4个物理按键的手机，右侧为新版只有3个虚拟按钮的手机

　　把菜单项和搜索项从导航栏去掉，把之前通过长按主页键才出现的最近任务直接展示在导航栏中。

　　　　　　　　　　　　　　　　　　　　　　最近任务的界面
　　把菜单收起的同时，在软件界面的操作栏上增加了“更多操作”（action overflow），如下图中的黄色圆点所示。

　　　　　　　　　　黄色圈部分为“更多操作”（action overflow）的位置和点击后内容的展示方式

2. 操作栏 (详见模式PATTERNS>操作栏Action bar)
　　操作栏从之前的app图标＋操作，变成如下图所示：
　　1向上＋2 Spinner＋3 重要操作＋4 更多操作。
　　其中，向上按钮，点击后是去到当前界面的上一个层级，非第一层级界面有此按钮，第一层级界面则无向上按钮；Spinner 是用于展示内容的下拉菜单，其内容包括视图的快速切换和显示相关内容的完整信息；更多操作（action overflow）是集合操作栏中不常用的和非重要操作的地方。

　　操作栏可以拆分成下图中的1主操作栏、2顶部栏和3底部栏。如果需要，顶部栏可以承载选项卡tabs，底部栏可以承载主要操作和被收起的更多操作（action overflow）。

　　在空间足够的横向屏幕展示界面时，被拆分的操作栏，可以灵活合并在一起。如下图中的手机端横竖屏操作栏所示。

3. 多面板布局 (详见模式PATTERNS>多面板布局Multi-pane layouts)
　　多面板布局更多的是针对平板电脑，把手机端的目录视图和详情视图两个层级的界面，甚至更多的页面，复合展示在同一个界面中，有效地利用平板电脑的屏幕空间，扁平化层级结构，简化导航。这点在iPad上已经运用得相当娴熟了。

4. 选择 (详见模式PATTERNS>选择Selection)
　　Android4.0中的长按与Android2.3及更早期的版本有很大的不同。早期版本长按操作后，是出现情境菜单的浮出层。在Android4.0中，长按后在操作栏的位置会覆盖一个临时的情境操作栏，不再弹出情境菜单浮出层。在临时情境操作栏的环境下，当前界面的内容项允许被单个处理，也允许被批量处理。

　　　　　　　　　　长按Android2.3及更早期系统版本的内容项时，出现情境菜单的浮出层。

　　　　　　　　　　长按Android4.0系统版本的内容项时，情境菜单栏覆盖在操作栏上。

　　　　　　　　　　　　　　　　　　在情境菜单环境下，支持批量操作。

5. 返回和向上 (详见模式PATTERNS>返回和向上Navigation with Back and Up)
　　返回按键用在手机全局的虚拟导航栏中，基于用户最近查看的界面历史，采用时间倒序的方式，连接界面间的关系。向上按钮用在操作栏的左侧，基于层级结构，点击后是去到当前界面的上一个层级，若当前界面已经是最高一级，则没有向上按钮。

　　　　　　　　　　黄色部分为点击向上按钮后的页面路径，红色部分为点击返回按钮后的页面路径

6. 主题样式 (详见风格STYLE>主题样式Themes)
　　推出三套默认主题：Holo浅色主题、Holo深色主题、Holo浅色底+深色操作栏主题。主推app在这三套默认主题的基础上做设计，以加快app研发效率，但只是建议使用，并没有完全强制。视觉设计师们可以重点看下STYLE和BUILDING BLOCKS这两章。

7. Widgets (详见开始吧GET STARTED>UI概览UI Overview)
　　在原apps页里，用选项卡tabs的方式增加了widgets内容。一改用隐晦方式添加widget的操作和把widgets零散放在桌面呈现的方式。在app设计中，应该提高对widget设计的重视程度。

8. 兼容性 (详见模式PATTERNS>兼容性Compatibility)
　　向后兼容，考虑到物理导航按键手机如何兼容Android 4.0系统和虚拟导航手机如何兼容Android2.3和更早期版本的apps。

　　在物理导航按键手机上安装android4.0系统，点击物理按键，在屏幕下方出现action overflow的内容。

　　在新的虚拟导航手机上安装为android2.3及更早版本系统设计的app，会在屏幕下方的虚拟导航的右侧出现action overflow按钮（如上图的黄色部分）。

　　在新的虚拟导航手机上安装android4.0，点击action overflow后的展示状态如上图。

9. 强调纯粹的Android应用设计 (详见模式PATTERNS>纯粹的Android)
　　在Android4.0 app设计准则中，特别强调为Android设计纯粹的Android app，切勿使用其他平台特定元素的注意事项，有以下5个方面：
　（1）强调视觉元素的样式要符合android系统；
　（2）不用其它平台特有的图标；
　（3）不在界面的下方使用选项卡tabs；
　（4）区分向上和返回，不在操作栏上使用返回样式的按钮；
　（5）不在内容列表里使用向右箭头。

　　Android系统里，选项卡（tabs）会固定放在屏幕上方，不会放在下方。这点与ios系统不同。

10. 其它细节
　　增加许多新的交互细节、信息展示和视觉样式等规范，详细见翻译。其中，有几点在此强调下：
　（1）新增了横滑移除内容的交互手势。在部分模块中，支持向左或向右横滑移除内容的操作，如最近任务和消息通知抽屉。

　（2）视觉的平面化，栅格风正在4.0中上演。
　（3）在writing style中明确指出写wording时，要直接使用第二人称“你”。

　　原文见http://developer.android.com/design/index.html
　　快速查阅，Android Design全文翻译 下载地址：http://cdc.tencent.com/?download=Android-Design-4.0

　　Android Design全文翻译由CDC D3多媒体小组（江宁、张云）出品。
　　感谢您的阅读！

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=5082)

原文链接：http://liuchenhuan.net/?p=701

从无到有的阿里巴巴无线端设计，经历了由前期的产品定位、产品形态探索、无线需求场景脑暴、产品拆解、分合的产品思路讨论、版本规划到手机行为、手机平台特性分析乃至信息架构的确定、细节的推敲…

无线端敏捷开发节奏快，如何低成本、有条不紊的迭代更新，版本规划以及产品的拓展性考虑尤为关键。九宫格聚合的工具平台形态和运营形态在我们客户端的定位中必然共存，但一期内容不足功能较少，过渡期既要保证目前版本的充实和架构合理，又要考虑用户习惯的延续和activity等的代码模块可复用。

在已有13年历史的网站（培养了稳定的用户群以及培养了一定的用户习惯）基础上，实际上我们并非从零开始。B2B的业务属性决定了无线场景的设计与网站的关联性，而用户使用时必然伴随部分网站习惯的迁移，因此在基于无线场景和手机端特性设计的同时，我们也同时考虑用户在网站端的认知映射。

作为项目owner，跟进后续流程的过程中有几点经验值得highlight：

1. 关于视觉适配难

相比于iOS平台, android硬件厂商众多，屏幕分辨率五花八门， 且dpi不同，我们这样做：
(1) 进行目标用户群使用手机比例调研(可通过问卷投放等方式)，选取一个主流分辨率和目标机(本项目中目标机为htc G7，分辨率480*800) ；
(2) 视觉设计过程中，实时在目标机并定期在其他分辨率手机上查看实际效果，并调整方案；
(3) 规范点九图(九宫格)的切片尤为重要。.9.png不但能最大程度低成本、高还原度的适配到android的各个屏幕，更是设计师和开发同学之间的沟通工具，避免在视觉－前端这一环节的设计走样。

2. 关于视觉切片资源文件大

由于功能模块相对独立的迭代开发，造成不同开发同学对于切片管理不统一，以至app文件大且运行过程中占用内存大，操作流畅度不佳的情况。在UI Check过程中，优化切片资源包，替换掉不规则渐变和纹理，尽可能复用样式，统一.9.png格式。

3. 关于UI Check

UI Check的目标不但是保证UI在开发环节的设计还原度，更是对设计方案的重要review。尤其手机操作流程性强，过程更为动态，转场动画、hover效果、gesture这些内容都需要高保真demo在真实的测试下确认调整和再优化。

最后，产品更新和体验优化是一个永无止境的过程。之后我们除了拓展更多无线平台(windows phone/iPad/…)以及新产品新功能追加，也会根据埋点数据和一手用研不断在迭代过程中同步优化体验设计。敬请期待！

下面为项目总结ppt中的部分内容，方便大家有个更加直观的了解：

感谢各位看官的时间，欢迎亲们更多的专业交流~~

　　用户活跃度是检验产品成功与否的重要指标之一，传统行业的商家极为重视门面的装潢，因为一个好的门面可以聚集人气，招揽更多的顾客。古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究，有一定的风水学说道理，更能彰显主人家的身份地位.由此可见，“门面’就如人的脸面之于人的形象一样重要，而WEB的登录页面就相当传统的“门面”。

　　现在越来越多的大型网站把登录和首页放在一起设计，由此可见登录页面的重要性，一个出彩的登录界面，将提升产品的品质，赋予产品独特的气质，登录界面也是一个发挥情感化设计，提升用户体验，拉近与用户之间距离的兵家必争之地，本文不谈趋势，不讲交互大道理，不涉及技术，就侃侃用户登录页面的一些设计表现形式。希望这些设计表现手法能给大家带来一些启发和灵感。

优雅大方
　　如果说iPad是介于传统电脑和手机之间的产品，那么tumblr则是介于blog和twitter之间的服务。相比twitter，它的功能更复杂、内容展示性更强、更加重视多媒体的应用。Tumblr做为轻博客的鼻祖，带来一种全新的视觉体验， 安东尼·德·圣-埃克苏佩里曾说过，“完美就是多一点则太多，少一点则太少。” Tumblr的登录页面没有过多的视觉干扰，优雅大方，一切元素的存在都是为了用户更好的登录，登录过程非常流畅。

精致的质感表现
　　iCloud是苹果公司所提供的云端同步服务，用户有5GB的免费存储空间。 负责Macintosh用户界面设计的柯戴尔·瑞茨拉夫回忆说：“乔布斯会一个像素一个像素地检查屏幕上的每个细节，确保相关的图像准确对齐。他非常重视细节，细致程度居然达到了像素的层面。如果发现问题，乔布斯就会立即冲着某个工程师大吼起来。”iCloud登录页面的设计继承了苹果公司对细节的苛求, 细致的纹理，微妙的阴影，精致的质感，完美的细节，金属光泽可以随着鼠标指针移动，底部的图标可以随着分辨率的大小自适应，改变排列方式，确保用户的浏览体验。

　　iCloud给我们上了很好的一课，有句大家都听过却未必做到的话——细节决定成败，丰富的细节可以提升设计的价值，也是判断一个设计高下的一条很重要的标准之一，精致舒适的质感纹理，给用户一种沉浸式，充满惊喜的登录体验，是一种很棒的表现方式。

小清新的插图
　　在网页设计中，插图非常具有表现力，它与绘画艺术关系密切。所以大部分设计职位，对手绘能力出众者格外青睐，许多表现技法都是借鉴了绘画艺术的表现技法。插画艺术与网页设计的的结合，具有独特的艺术魅力，从而更具表现力。越来越多的设计师，将插画运用到网页设计中来，生动有趣温情的清新插图，能迅速的抓住用户的眼球，让登录界面的更加具有亲和力，

　　163邮箱的登录页面就采用了大幅的插图,小邮差很快唤醒了80后等待来信的记忆，有故事的插图与用户建立情感的联系，唤起用户的心灵共鸣，让用户更有归属感。

　　Vimeo是一家提供高清视频存放服务的网站，在这里可以找到很多来自世界各地非常有创意的设计师。相信登录过Vimeo的朋友都对Vimeo的登陆页面记忆深刻。

人文关怀的品牌传达
　　设计以人为本，以人为本的设计不仅能提高产品的品质，还能提高设计的艺术水平，而登录页面是体现人文关怀，传播品牌理念的绝佳位置。

　　QQ邮箱登陆页面每一次刷新都能看到不同的内容，或用海子的诗，或用迈克尔.杰克逊的歌词，唤起用户的共鸣，设计手法简洁，主体信息突出，引导清晰，并没有多余的元素，界面中最重要的操作“登录”按钮使用了交通中通行的绿色，而没有使用常用的蓝色，细节设计非常考究，对每个细节都注入人文的关怀。

　　新浪微博将登录框设计成一条围脖的样式，用户的每一次登录都是一次品牌传达的过程，切合新浪力推的围脖品牌理念，织围脖的概念深入人心。

越来越大的登录框
　　越来越大的输入框设计，让用户输入起来感到心情舒畅，登录过程非常愉悦，在显示器越来越大的今天，mailchimp大输入框显的霸气十足，并且一反常态的可以看到自己的密码，第一次在WEB登录框里见到这种设计，非常贴心.正是这种不拘一格的设计，让mailchimp从一个内部项目蜕变成一个该公司最成功的商业产品。

简约而不简单
　　WEB设计的风格越来越趋向于简洁，登录页面大量地使用留白可以让登录框更加突出。最大程度的减少用户分心，从视觉的角度来看，简约的设计是平静的，砍掉了多余的元素，颜色，形状和纹理，不能使用让人眼前一亮的设计元素，只能靠空白去做视觉吸引力。布局的权衡及简化设计做的不到位的话很容易变的单调乏味，wordpress后台登陆页面采用适当的投影，灰色的巧妙运用，以及出错的抖动提示，让整个登录页面简约而不简单.堪称典范。

　　随着互联网的高速发展，移动互联网的到来，WEB设计越来越呈现多元化。尽管一个好的设计并代表产品就一定会成功，但却能为产品加分，为产品注入设计DNA，创造独特的风格和视觉感受， 好了，今天就先侃到这，作为用户使用的入口，希望这篇小文可以让大家对登录页面重视起来，设计出更多精彩的登录页面。

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=5037)

　　开关机作为手机常用的一套相关操作，设计思路也采纳了对称性交互原则，让二者遵循同样的流程进行，便于理解和学习，大部分手机的开关机都是通过同一套流程或者同一个按键控制，这种对称形式铺展一套有关工作流的方式即对称性交互。比如iphone的开关机过程：

　　这种对称性交互不仅可以加速用户对一些对称性功能交互的辨识与认知，提高易发现性，而且少数基本机构在不同层次上的重复出现也降低了用户的学习成本，提高了整个产品交互架构的一致性。

　　Alan Cooper在《About Face 3： The Essentials of Interaction Design》一书中总结了一条简单的经验：在哪里输出，就要允许从哪里输入。这说明用户习惯以相同的方式去执行逻辑相关的操作。

　　Circle(圈子)是Google+社交服务里的一大亮点，在将联系人添加或移除出某个circle的时候，两者的交互方式是对称的。如下图：

　　将联系人卡片从列表中拖放到circle中完成添加圈子操作

　　将联系人卡片从circle中拉出来完成移除圈子操作假使从圈子中移除联系人的交互过程换做“选中目标然后在页面上按下Remove按钮”一定会给用户带来流通不畅，思路堵塞的感觉。

　　再来看看Balsamiq的Tree list，在查看(输出)和编辑(输入)模式下，两者的表现并不一致，用户不能在编辑时看到编辑完成后的状态，这也是一种输入输出的不对称。

　　相比之下，Axure在这方面的表现就要更胜一筹，用户能进行行内编辑，所见即所得，输入输出保持了高度一致。

　　以上这些实例可以看出，适当情形下采用对称性交互可以改善人们对产品功能的认识与了解，获得更好的用户体验，比如：在同一个地方进行登入登出操作;行内编辑，所见即所得;导入导出交互过程对称;输入输出交互过程对称;在添加的地方进行删除;以同样的方式进入或退出沉浸模式等。

　　部分内容节选自《探讨对称性交互应用》

本文链接：http://www.yixieshi.com/ucd/10135.html

编辑：S++小组

在前一篇的校验思考中，我们整体概括了一些校验出现的类型，出现的情况，以及校验设计的设计原则与经验。而在具体设计过程中，需要结合产品的业务逻辑，旅游机票预订的全流程，是我碰到过交互逻辑中，相对比较复杂的情况，它的搜索来说也囊括了比较多的输入项，和各种类别的表单控件，因此它的校验情况也相对比较多样化。

我们来探讨下预订机票中的搜索表单

1、   提到校验，我们往往会联系到提交表单后出现的错误提示类信息，但是其实在填写表单前的提示信息与表单填写校验有着莫大的关系。此类提示信息能够帮助用户在填写表单前，降低出错的可能性。

就拿机票来说，在未填写前，有很多网站做了暗提示来辅助用户更方便的操作输入。

国内的通常做法是提示你可以输入的格式，实例，如：

比如淘宝，就把地址选择的输入格式用暗提示的方式告诉用户可以输入汉字拼音和首字母，清晰明了。

又比如hipmunk，就把返程日期上显示暗提示告知用户如果不填写该选项就搜索单程结果集。

2、   在机票查询中最常碰到的项比如：航程类型，地址，日历。

a)        出错提示

出错提示的目的是要让用户清晰的知道错在哪一项，为什麽出错，怎么改。

出错提示有4个基本原则：即时反馈出错提示，出错提示的位置显示恰当并且明显突出，提示信息内容清晰易懂，一次性显示全部出错提示。

• 即时反馈出错提示

如下图所示：淘宝机票首页上输入出发城市和到达城市均为上海，会弹出新页面并且提示错误信息，对用户来说等待时间更长，相对来说这类提示信息显示在当页更为合理。

而去哪的机票搜索框，当出发城市和到达城市信息为空的情况下，或者当日历选择返程比去程早的时候，点击搜索之后没有任何反应。我们一开始以为是我们的浏览器出了问题，未加载到js特效，结果换了n多个浏览器，发现它就是没有反馈。- -|||

• 出错提示的位置恰当并且明显突出

提示出现的位置首先考虑到出错和当前填写信息位置的关联性。关联性包括出错提示位置和视觉呈现的效果（如：颜色，或者增加指向性箭头等）

如下图所示：Hipmunk在关联性上做的就尤为突出，错误信息的位置直接在填写项的下方，整个搜索区域一目了然的看出哪个项出错。

如下图所示：Travelocity在关联性上就相对较弱，其提示项在搜索框的上方，出错项与提示项有一定距离。显示屏幕如果较小的话，无法在一屏看到错误提示和填写项。

虽然Hipmunk的做法看起来比较清晰，但也有一定局限性。如果页面空间较为拥挤，就不能适用，因为这有可能造成信息密集，也有可能造成页面撑开而导致显示错误。

如下图所示：Expedia的做法相对合理些，因为其表单项是横向排放，因此使得错误提示和出错框的位置相对较近，比较清晰。

如下图所示：elong在报错提示的指向性中表现较弱，视觉上使用了较弱的提示框颜色，并且没有箭头指向。

• 出错提示的位置恰当还需要考虑它对其他信息的干扰较少。

如下图所示：Ctrip提示框的错误提示明显遮住了到达城市的填写项而下方的热门城市联想框也同时出现遮住了大部分的填写区域。这个做法严重的干扰了其他搜索项的填写。当然设计师的考虑角度可能是希望减少用户操作，当其出错的时候可以直接进行地址的选择和修改。

如下图所示：Kuxun在报错提示中，使用了alert弹框，虽然非常突出明显的强调了出错，但是强制用户进行确定的操作，导致用户无法进行其他项的操作。

• 提示信息内容清晰易懂

提示信息内容需要给到用户哪些方面的提示呢？错在哪，出了什么错，怎么改。

如下图所示：Qunar当地址选择相同出发和到达地时，会跳转页面显示提示，提示内容如下。业界对于这种的类型的提示信息有不同的看法，有人喜欢这种比较人性化生动的描述信息，但也有人喜欢更为简明扼要的提示。个人认为人性化生动的描述是可取的，但是简明扼要的原则依然需要遵循，至少我们能在最短的时间就找到自己的错误，并且知道怎么去修改。

•   一次性显示全部出错提示

当用户提交所填信息后，会出现两种不同的情况：一是逐条告知错误提示；还有一种是将错误提示一次性罗列。

逐条告知错误提示，会导致用户改完之后再次提交又需要重复修改，视线流上下来回，不停的修改不停的提交，多次操作才能完成整个表单的过程。

如下图所示：Hipmunk中对于校验就是一次性校验错误提示完全显示，并且提示统一出现在文本框下方，清楚明了。

如下图所示：Ctrip对于城市日历框的校验就属于逐一校验，如果当用户填写出发到达城市相同，并且出发日期晚于到达日期的时候，校验也会逐一显示，这样用户本应该一次性可以修改完成的行为分为了多步。

当然这里逐一检验考虑的主要是由于提交后出错的焦点在到达城市的文本框中，并且提供了地址选择器方便修改，所以才会挡住下方日历选择器的位置，导致无法同时出现2个错误信息。但是这个做法至少可以修改成，2个文本框均报错标红，同时在某一个地方显示所有出错提示。

b)        关联性校验

所谓关联性校验，就是所填写项之间会有相互影响的逻辑关系。

就机票而言，出发城市和到达城市一定是不可能相同的；而出发日期一定会比到达日期来的早；所以在设计中需要考虑多方面的出错情况。

有三种做法：一是提示错误信息；二是限制用户行为；三是自动修正用户所填信息。

如下图所示：Qunar默认喷入离去程后三天的返回日期，当我修改了去程日期晚于返回日期，它会自动更正返程日期为我填入的去程日期的后三天。个人认为，这种代替用户操作的行为是不可取的，因为代替的操作未必是用户想要的，并且很容易使用户忽略了该修改行为。

如下图所示：Orbitz当我填写去程日期后，会在日历选择器中去程之前的日期显示为不可选状态。大部分时候这种方式还是可取的，虽然当用户填写完成之后再去修改去程还是会造成日期填写错误，但是就正常操作人群来说已经避免了不少出错的概率。

Ctrip有一种很特殊的情况，就是航空公司的辅助搜索。设计师有考虑当填写入的出发城市和到达城市之后对于航空公司的下拉框选择项会做一些限制，只显示上海至北京有航班的航空公司。这也是一种限制，这个可以避免用户搜索无结果。

总结：校验是一个很重要的交互行为，本篇我们只对机票搜索为例进行了校验的分析，有一定通用性，但是针对不同的业务或者不同的表单还是会有很多的特殊之处。作为交互设计的我们需要理解它的通用性，并且能灵活的应用与各类设计中。

编辑：S++小组

你是否经常碰到在填写表单时，提交无数次却还是无法通过校验的情况；或者你是否在为不知道填写中哪里出现错误而抓狂；再或者你是否碰到过当你填写了一大堆信息，之后点击按钮提交时，校验报错的同时，你发现你所填写的所有的信息都被清空；或者你还碰到过很多很多校验当中出现的问题，那么我们现在就开始进行表单校验设计的思考。

那校验有哪些情况呢？

1、  READY？

提到校验，我们往往会联系到提交表单后出现的错误提示类信息，但是其实在填写表单前的提示信息与表单填写校验有着莫大的关系。

此类提示信息能够帮助用户在填写表单前，降低出错的可能性。它出现的形式分为以下几类：

a)        简要提示——有如：icon，icon+文字，文字，暗提示。

出现情况：一般提示信息比较简短，能够让用户一目了然的记住，并且不干扰表单的填写项。

alipay.com付款页面

alibaba.com注册

b)        复杂提示——以缩略信息或icon来显示，通过点击和hover进行查看。

出现情况：提示信息内容较多，需要用户仔细阅读，并且无法简单记忆，直接全部显示会影响整个表单填写，因此此类情况需要hover或者点击操作进行查看。hover或者点击后有浮层，蒙板，或者跳转新页面等情况。

taobao.com机票登机人填写页

ctrip.com机票登机人填写页

c)        限制操作——在表单填写前，对某些需要填写或者操作项会有一些disabled的状态，只有当某些条件被激活用户才能进行操作。

出现情况：当填写项与项之间带有关联性，前面的填写项会影响后面填写项的内容或状态；或当填写项较少，填写项均可以即时校验，就可以将主提交操作项做状态限制。

livestream.com机票登机人填写页

d)        其他提示——填写表单的时候，还有一种比较特殊但又更简单明了的提示，例如：使用图片说明。

出现情况：当填写表单项的提示说明很难用文字清晰表述，这时候可以使用图片，视频等辅助方式来帮助用户快速理解。

alipay.com水电煤缴费页面

2、  ING~

当您浏览完整体的表单，接下来就是进行填写的步骤。在填写的过程中，我们会碰到很多类型的校验，比如：即时校验的友情类提示，即时校验的警示提示，关联性校验的提示。即时的校验也分为三种状态一种是on focus后的帮助提示、输入中的校验、lost focus后的校验。

出现情况：提示信息内容较多，需要用户仔细阅读，并且无法简单记忆，直接全部显示会影响整个表单填写，因此此类情况需要hover或者点击操作进行查看。hover或者点击后有浮层，蒙板，或者跳转新页面等情况

a)        即时校验的友情类提示

即时校验的友情类提示不是提交时无法通过的出错警示，而是给到用户一些更合理的建议或者帮助。

Ctrip.com填写登机人页

（当你选择了儿童票时会提示儿童票的某些特定限制。当你输入的出生日期与你之前选择的购买类型不一致的时候会建议你去购买更合适的类型，但并不强制。）

Buy360.com的注册页

（当onfocus的时候会出现下方帮助提示类信息，当然也有很多网站会做成暗提示。）

163.com的注册页

（当onfocus的时候会出现右边密码的强度，会根据你输入密码的改变而提示你的密码强弱。）

b)        即时校验的警示提示

即时校验的警示提示是属于错误类提示，这类错误会影响表单无法提交。

警示提示类的校验重要级别非常高，因此在颜色和位置上都需要非常明显。有很多网站甚至将出错内容和出错后如何修改的建议都放在了该提示中显示。

163.com的注册页

Buy360.com的注册页

c)        关联性校验

关联性校验是所填写项之间会有相互影响的逻辑关系，后一项的填写是否正确会取决与前几项的填写内容。

Buy360.com的注册页

（设置密码填写项与确认密码填写项不一致时会提示错误。）

招商银行信用卡支付页

携程旅行计划创建页

（旅行计划目的地1和目的地2的时间段有冲突时就会提示错误。）

3、  ACTION！

当您填写完表单，开始触发提交按钮的时候，表单会开始进行表单提交后的校验。目前比较多的有两种，一种是逐条提示，另一种是一次性全部提示。

a)        逐条提示

逐条提示是在提交表单后，虽然有多项错误，但是每次提交只按顺序显示一条错误。逐条告知错误提示，会导致用户改完之后再次提交又需要重复修改，视线流上下来回，不停的修改不停的提交，多次操作才能完成整个表单的过程。

yihaodian.com注册页

b)        一次性全部提示

一次性全部提示是在提交表单时将所有错误全部罗列。

Yahoo.com注册页

Hotels.com预订页

（该网站设计不仅将所有错误一次性全部罗列在填写框右侧，并且提交按钮的hover状态再次将所有错误呈现，点击某项错误会直接锚点跳转至该错误填写区域。）

思考：

出错提示有4个基本原则：即时反馈出错提示，出错提示的位置显示恰当并且明显突出，提示信息内容清晰易懂，一次性显示全部出错提示。

除了这些基本的设计原则，在设计表单的校验中，还会有很多让我很纠结的点，以下罗列一些我个人认为比较好的经验。

1、 在设计校验时虽然需要考虑到出错提示的明显突出，但是在实际情况中，会和页面的空间大小和布局相关，需要考虑实际情况来定夺。

2、 尽量避免不必要的错误，一是自动喷入值；二是限制型操作；

比如，在身份证填写项中填写了身份证信息时，如果下面还需要填写出生日期，完全可以直接喷入身份证上的出生日期值。

3、 有的错误校验会自动修正一些信息，但是这类行为请不要忘记告知用户。

4、 友情类提示的校验重要级别永远低于警示类错误校验，在视觉和交互的位置上应该酌情考虑。

5、 错误信息出现的位置视觉等效果应该统一，并且在位置上保持在用户可见的范围内。

6、 页面自动锚记至出错项处，如果是多条可锚记至第一项，最好还能on focus至出错的填写项。

7、 不要轻易清空用户填写的内容。

8、 错误提示不仅显示错误点，更可以推荐用户一些正确填写建议。

9、 出现了错误提示后，再次on focus至填写项时，不要隐藏错误提示。

　　一、组织表单的内容，给用户一个友好的引导

　　首先要明确的告之用户填的是一个什么性质的表单以及填完后能做些什么?哪些问题是一定要问的?有没有别的途径可以获取用户的资料?大致表单的布局分为三种类型：纵向排列、逐步填写(多页显示)和左右布局。这三种表单的组织形式功能特点，通过不同的使用环境决定它们具体的样式。下面通过一些对应的实例我们来做些具体的分析：

　　根据Web惯例调查，卸载软件的界面常见组织结构，为纵向排列样式。一般顶部为明确填写表单的目的，再呈现表单的具体问题。在卸载类型的表单中，内容一定要精简，减少用户输入，尽量提供选择题，少问答题，没有必填项。要知道用户是不喜欢填写表单的，尤其是当用户卸载软件后也是没有太多的耐心来填写表单的。如图1的卸载表单纵向内容组织形式，顶部是致辞，明确的说出问这些问题的目的，下面是分组表单内容。这种纵向排版简洁填写的表单组织形式，更利于获取用户的反馈。

　　在一定情况下，很多问题需要按顺序回答，理解并组织好每个表单的情境能得到最佳答案，如果把表单用对话的形式展现，主题之间自然会出现间断，所以就会需要多个网页把对话变成若干有意义并容易理解的主题。如图2 ——图5 的填写表单多页的展现形式。把表单当成是与特定的人在对话，而不是与一堆数据输入框在对话，每个表单都用不同的情境问题与用户进行交流，这样的实际回答率会更高。

　　当表单想要搜集更多答案时，可以考虑在表单填完之后提出一些可选的问题，辅助获得更多的答案。表单的标签使用术语需要统一，简洁、单个词，这样的标签要更容易解释清楚。如图6的表单设计，使用左右布局的排版方式，左侧放上必填和重要的表单项，右侧辅助放上可供选择的表单，减少页面表单内容视觉的庞大性，整体界面内容居中排列这种方式也比较美观易读。

　　二、填写表单的反馈，给用户贴心的引导

　　为了提高表单的完成率和准确率，设计师会试图避免各种各样的分散因素，并且提供一个清晰明确、简单的web表单。这就是为什么任何视觉效果都需要非常适当地使用的原因。运用视觉手段去解决会出现这样的错误，减少用户的误解。当遇到用户提交数据有错误信息时肿么办?首先要让用户知道发生了错误，错在哪,以及如何纠正。

　　图7邮箱注册表单页，当用户提交错误信息或发生错误操作时，在其错误旁都会有醒目的红色视觉元素作为指导，很好的解决用户找不到错误在哪的窘态(关于提示错误的元素符号，在处理这块时可能还要考虑到色盲色弱用户群的一个需求，他们是看不出这种强烈的颜色提示的，但是有感叹号这样的提醒元素存在我想也能解决这种双向需求) 。当出现注册用户名相同时，这里用下拉框的样式提示，该地址都是以什么样的结构形式被人注册过，给用户提供想命名同样前置的用户名时后缀如何添加的一些建议性帮助，以及图8填写正确后给予的文字图标反馈。

　　图9和10的注册表单的两个错误提示样式，当输入成功提示会消失，输入错误或者输入不符合标准都会有相应的不同文字反馈，告知用户发生错误的原因，及时回车修改，避免用户在填完所有的信息后再反馈给用户。

　　三、创意表单的样式，给用户轻松愉悦的感受

　　输入框和标签的样式是需要根据整体界面风格去定义的，通过不同创意类型的展示，可以为你获得更多的浏览者。所以设计出一个好的创意来优化表单是一件多么重要的事。

　　图11 blackwave运用笔记本记录重要事记的功能，穿插到表单中。使用了手写的方式和便签条的元素，引人注意，这些好玩的设计使它的功能完美的传达给了用户。

　　图12和图13的表单设计，为了使访问者不会感觉布局的乏味，用了复古怀旧这样的意境元素，和纸张叠合的方式来展现表单。

　　图14 wing cheng的表单样式比较符合这个概念性的网站，有很简单且基本的表单布局，独特的视觉角度，只为让表单填写起来更有趣。

　　图15 Orca Bay Sea Foods的表单采用与网站布局完全融为一体的设计方式。

　　表单的创意表现形式来源于整体网站的风格特色，和整体网站主视角相呼应，浏览起来也不会觉得突兀，整体联系性强。如图16 ArtFlavours首页的主视觉风格和图17ArtFlavours的表单样式，采用相同的处理手法，都运用布块纹理拼凑的方式，让用户对表单感觉更加的舒适，也能给访问者留下深刻的印象，与网站整体风格也很统一。

　　以上对表单做了些简短的归纳，从表单的布局、填写的交互反馈和创意表单的独特性三个方面做了些概述，希望本文能对大家做表单设计有所帮助。

　　转载请注明出自”百度MUX”

本文链接：http://www.yixieshi.com/ucd/10090.html