UED用户体验设计规范解读.doc

全局设定——布局 什么是布局？

“布局”是指页面内容的尺寸、间距及位置。有效的布局对于帮助用户快速找到他们想要的内容至关重要，并可以在结构外观上令用户感到舒服。 如何设计有效的布局？

• 具有清晰的视觉层次：布局应当让页面各元素之间的关系和重要性一目了然。你可以通过适当使用下列属性来实现视觉层次

焦点：指用户首先关注的区域。形式上被赋予焦点属性的UI元素一定要表达重要的内容。 视觉流：指用户关注区域的顺序。可以根据任务逻辑和用户的浏览习惯来设计恰当的视觉流。好的视觉流应该清晰、合理、顺畅、自然。

关联：在逻辑上相关的UI元素应具有清晰的视觉关系。 错误：

逻辑上相关的UI元素在空间上被分隔，且没有明显的视觉关联。

对齐：使页面工整，信息呈现有序，便于用户扫视。 错误：

没有对齐影响了页面效果且不便于用户扫视。不要因为功能需要和对极限情况的顾虑而轻易牺牲掉页面的视觉展现。

强调：可以根据UI元素间的相对重要程度进行强调。

• 针对用户的阅读模式来设计布局：大部分人的阅读习惯是从左向右，至上而下。阅读分为沉浸式阅读（immersive reading）和扫视（scanning），前者的目的在于理解，后者在于定位。

浏览网站时，用户不会沉浸在UI本身，而是沉浸在他们的目标任务中，因此扫视是最常使用的阅读模式。用户只在确信必要时才仔细阅读大量文本。

针对扫视的布局设计可以适当强调主要的UI元素，弱化次要的。包括： 1. 将主UI元素放在扫视路径上。

2. 避免将重要信息放在左下角或者页面底端或者需要滚动很多的控件上。 3. 考虑使用渐进展开方式来隐藏次要的UI元素。

4. 将任务相关的重要信息要直接表现在控件上。用户更倾向于关注交互控件上的标签，而不是辅助型的静态文本。 错误：

用户必须阅读辅助型文本后才能明确“确定”按钮的作用。 正确：

直接将按钮的作用描述作为控件标签，便于用户理解。 不要展示大段文本，去除不必要的文本。多文本时格式化展示。

注：常规模式也存在例外。眼动议实验指出，真实用户的行为很没有规律。此模式的目的在于帮助你做出更好的决定，而不是精准的描述用户行为。

• 合理利用页面空间

1. 保持页面的视觉平衡。避免拥挤和对空间的浪费。 2. 确保关键数据没有被截断，除非数据特别长。 错误:

有效空间没有被充分利用，从而导致多条关键数据被截断。

3. 控件的尺寸和间距恰当，没有不必要的滚动。一个任务尽量在一屏内完成。

4. 实际情况中，我们用户的页面空间要小于屏幕分辨率，它会因各种因素而压缩，如：非全屏操作（弹出窗口和对比浏览），浏览器本身及各种辅助栏对屏幕的占用等，设计中要考虑这些情况。

• 不要让布局本身成为突出的UI元素，保持视觉简洁（visual simplicity） 1. 减少内容和展现上的嵌套层级。

2. 减少控件不同尺寸的数量，例如，在界面上只使用一两种按钮宽度。 3. 采用轻量级的分组和分割方式，可以用布局本身和分隔符代替分组框。 4. 使用尽量少的对齐线。

• 选择与页面类型相匹配的版式

在设计之初，应充分考虑页面承载的内容、功能和属性，继而选择适合该页面的版式。不合适的版式会造成用户的阅读困扰，降低任务的完成效率。

标准和规范

• 栅格化

我们所说的栅格化是指在网页设计工作中对栅格系统的建立和应用。网页栅格系统来源于平面栅格系统，它以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

栅格化可以使信息呈现工整简洁、美观易读，降低页面开发和运维成本。它结构变化相对灵活，扩展性强。

• 以8px为横向栅格单位

以8px为横向栅格单位，页面所有元素宽度都可以是2的倍数，包括图片和版块宽度，这样可以加快页面（特别是对于J-PEG图片）的渲染速度（基于计算机内部二进制的运算机制）。 在阿里巴巴中文站中，布局间距的最小单位为8px，布局区块采用32px（8px*4）和24（8px*3）两种粒度单位，分别组成以下两种可实现的栅格系统: 32px:适用于市场、社区等相关页面

24px:适用于旺铺相关页面

• 页面定宽

自适应可以根据浏览器显示情况自动调整页面宽度，但是因为用户水平方向的聚焦范围有限，所以当页面过宽时，用户的浏览和操作成本会增加；而当页面过窄时（如用户同时开启两个浏览器对比查看商品搜索结果），自适应则会导致布局变形和内容错乱。给页面规定宽度可以避免这些问题。

在综合考虑当下主流分辨率情况、浏览器外观对显示空间的占用、人机工程学中对水平视角和聚焦范围的规定以及8px单位等多种因素后，我们认为960px是一个相对更加合理的页面宽度。在阿里巴巴中文网站中，推荐使用定宽960px的页面，去除左右各4px的边距，中间的可视宽度为952px。

全局设定——布局 模版下载

for axure

for ps

《Axure 栅格模板》使用说明：

1. 新建项目文件，载入《Axure栅格模板》，选择适合的栅格系统（32或24）。系统内已附带对应的栅格背景及常用版式。

2. 载入《PS栅格模板》，选择对应的栅格图层（32或24）并拖动至设计稿图层组之上，校验并调整尺寸精度。

3. 保持栅格图层可见，以psd格式交付。这样便于前端开发工程师快速计算和准确定位，提高工作效率。

《PS栅格模板》使用说明:

1. 视觉设计师基于交互原型完成视觉设计稿，新建设计稿图层组包含所有图层。 2. 在需要的版式的基础上进行设计，形成具有栅格化布局的交互原型

3. 保留栅格背景，无论是在展示原型还是在交付物中。这样便于视觉设计工作的开展。

代码使用说明:

grid-32栅格系统（适用于市场及社区相关页面）， class：.layout-p32a24 1、grid-32栅格系统可构建的布局大小(红色部分为已选用的区块大小) class = W(px) =

.grid-1.grid-1.grid-10 392

1 432

2 472

.grid-1 .grid-2 .grid-3 .grid-4 .grid-5 .grid-6 .grid-7 .grid-8 .grid-9

32 72 112 152 192 232 272 312 352

class .grid-1.grid-1.grid-1.grid-1.grid-1.grid-1.grid-1.grid-2.grid-2.grid-2.grid-2.grid-2= W(px) =

3 512

4 552

5 592

6 632

7 672

8 712

9 752

0 792

1 832

2 872

3 912

4 952

2、中文站基于grid-32的布局,使用与市场和社区的相关页面： 312px (.grid-8) 312px (.grid-8) 312px (.grid-8) 632px (.grid-16) 312px (.grid-8)

232px (.grid-6) 232px (.grid-6) 232px (.grid-6) 232px (.grid-6) 712px (.grid-18) 232px (.grid-6) 352px (.grid-9) 352px (.grid-9) 232px (.grid-6) 232px (.grid-6) 472px (.grid-12) 232px (.grid-6) 472px (.grid-12) 472px (.grid-12) 152px (.grid-4) 792px (.grid-20) 152px (.grid-4) 552px (.grid-14) 232px (.grid-6)

3、grid-32栅格系统代码示例

---注意：使用时必须包含 http://style.china.alibaba.com/css/fdevlib2/fdev2.css 样式文件 两栏式

// 两栏式demo:

// 'import css file

url:http://style.china.alibaba.com/css/fdevlib2/fdev2.css'

< div class='layout-p32a24' > < div class='grid-16' >632px(.grid-16)< /div> < div class='grid-8' 'grid-fixed' >312px(.grid-8)< /div> < /div >

三栏式

// 三栏式demo:

// 'import css file

url:http://style.china.alibaba.com/css/fdevlib2/fdev2.css'

< div class='layout-p32a24' > < div class='grid-8' >312px(.grid-8)< /div> < div class='grid-8' >312px(.grid-8)< /div> < div class='grid-8' 'grid-fixed' >312px(.grid-8)< /div> < /div >

grid-24栅格系统（适用于旺铺相关页面）， class：.layout-p24a30 1、grid-24栅格系统可构建的布局大小(红色部分为已选用的区块大小)

clas.grid-.grid-.grid-.grid-.grid-.grid-.grid-.grid-.grid-.grid-.grid-.grid-.grid-.grid-.grid-s = 1 W(px) =

24

2 56

3 88

4

5

6

7

8

9

10

11

12

13

14

15

120 152 184 216 248 280 312 344 376 408 440 472

clas.grid-.grid-.grid-.grid-.grid-.grid-.grid-.grid-.grid-.grid-.grid-.grid-.grid-.grid-.grid-s = 16 W(px) =

504

17

18

19

20

21

22

23

24

25

26

27

28

29

30

536 568 600 632 6 696 728 760 792 824 856 888 920 952

2、中文站基于grid-24的布局系统，适用于旺铺相关页面： 184px (.grid-6) 760px (.grid-24) 760px (.grid-24) 184px (.grid-6) 376px (.grid-12) 568px (.grid-18) 568px (.grid-18) 376px (.grid-12) 472px (.grid-15) 472px (.grid-15) 184px (.grid-6) 184px (.grid-6) 568px (.grid-18) 184px (.grid-6) 568px (.grid-18) 184px (.grid-6) 568px (.grid-18) 184px (.grid-6) 184px (.grid-6) 184px (.grid-6) 376px (.grid-12) 376px (.grid-12)

376px (.grid-12) 376px (.grid-12) 184px (.grid-6)

3、grid-24栅格系统代码示例

---注意：使用时必须包含 http://style.china.alibaba.com/css/fdevlib2/fdev2.css 样式文件 两栏式

// 两栏式demo:

// 'import css file

url:http://style.china.alibaba.com/css/fdevlib2/fdev2.css'

< div class='layout-p24a30' > < div class='grid-6' >184px(.grid-6)< /div> < div class='grid-24' 'grid-fixed' >760px(.grid-24)< /div> < /div >

三栏式

// 三栏式demo:

// 'import css file

url:http://style.china.alibaba.com/css/fdevlib2/fdev2.css'

< div class='layout-p24a30' > < div class='grid-8' >312px(.grid-8)< /div> < div class='grid-8' >312px(.grid-8)< /div> < div class='grid-8' 'grid-fixed' >312px(.grid-8)< /div> < /div >

全局设定——字体 什么是字体？

“字体”是指字型（typeface），大小（size）及辅助属性的总体描述。 如何正确的使用字体？

• 1. 选择合适的字型：在阿里巴巴中文站中，采用两种中文字型和一种英文（含数字）字型： 中文字型：宋体 — 应用于一般文字。

黑体 —应用于标题或需要引起注意的文字。不宜大量排布。 英文字型：Tahoma / Helvetica / Arial。

（优先级从左到右，具体显示由用户系统支持情况而定）

注1：字型分为衬线与非衬线两种（衬线又称字角，是指在字体笔划末端的小转角）。在传统文本印刷中，正文文本多采用衬线字型，因为衬线能便于识别印刷油墨不明显的情况，并且使文字看起来更加典雅和正式；但在网页UI中，由于对清晰外观的需求以及计算机显示器的低分辨率，非衬线字型则是更好的选择。

注2：对计算机显示器来说，宋体在14px大小及以下，可以看成是非衬线字型。

• 2. 注意文字的大小和行高：

增强文字与周围元素的对比（包括大小对比等多种对比方式）可以使文字本身更加突出、更加易于识别；适当增加文字的大小（扩大可视与操作面积），可以更方便用户进行阅读与点击。但文字不是越大越好，要考虑页面的整体布局以及单位面积的信息显示效率。在阿里巴巴中文站中，尽量不使用超过20px的文字。若必须超过20px，则需采用抗锯齿处理；如果该文字是按钮标签，则应当与按钮背景一起做成图片。

阿里巴巴中文站中常见的字体大小及其主要的应用场景如下表：

文字大小 应用场景 信息结构中层次较低的内容 12px 当页面单位面积信息显示效率较高时 信息结构中层次较高的内容(导航、索引、标题等) 14px 需要被强调的重要信息或控件标签 阅读型页面中段落文本的正文 新闻头条和焦点信息 16px 对用户来说最重要或最值得关注的关键信息 20px 阅读型页面中段落文本的标题 关键任务中主按钮的标签(可以文字也可以图片化) 设计软件中常提到的文字大小单位有三种，分别是像素（px）、点（point）、字号，它们的数值对应关系如下（以网站常见的字体大小为例）

像素（px） 12 14 16 20 点（point） 9 10.5 12 15 字号 小五 五号 小四 小三 行高是指文本所在行上下边界之间的距离。通常情况下，行高大于字体高度。

注：常规模式也存在例外。眼动议实验指出，真实用户的行为很没有规律。此模式的目的在于帮助你做出更好的决定，而不是精准的描述用户行为。

增加段落本文的行高可以扩大行与行之间的距离，从而增强横向浏览的引导；但行高不宜过大，过大会浪费屏幕空间降低显示效率。在阿里巴巴中文站中，推荐使用的行高是文字高度的150%和180%。手动排布的文本列表也建议采用此比例。常用于段落和列表文本的文字大小是12px和14px，他们对应的两种行高数值如下表：

文字大小 12px 14px 行高150% 18px 21px 行高180% 22px 26px • 3. 恰当的应用辅助属性：

粗体：用于控件标签和重要文字，以使文本突出易读。保守使用能增加对比，将用户的注意力吸引到那些必须阅读的文本上。使用过多会削弱其作用。 斜体：不使用。 粗斜体：不使用。

下划线：只限于连接。尽量不要在链接以外的地方使用下划线。

鼠标指针：I字型鼠标指针表明该文本是可以选中的，而常规鼠标指针则表明文本不能被选中。 插入符：插入符是闪烁的竖直线，在文本具有输入焦点时表明可选择或可编辑文本的插入/选择位置。

文字颜色：浅灰色表示该文本是禁用的。特殊色，尤其是蓝色，表示该文本是连接。 背景色：浅灰色可暗示文本的只读性，但一般情况下不推荐使用。

全局设定——颜色 设计理念

有效使用颜色能够使用户界面更加高效。颜色可以帮助用户瞬间理解特定的含义。颜色也能够使网站界面看起来更加美观和精致。 颜色是如何被使用的

颜色通常在用户界面中用于表达：

含义：信息的含义可以通过颜色来表达。例如，红色表示发生问题或错误，黄色表示注意或警告，绿色表示良好。

状态：对象的状态可以通过颜色来指示。例如网页上的链接使用蓝色表示未访问，紫色表示已访问。

区别：人们认为具有相同颜色的条目之间具有某种联系，因此颜色编码是区别对象的有效方式。 强调：颜色可以用于引起用户的关注。

设计指南

不要将颜色用作主要的沟通方式,而是作为辅助方式对要表达的意思进行视觉加强。 尽可能选择合适的颜色，这么做能够始终尊重用户的色彩偏好。 根据用途选择颜色

前景色与背景色保证清晰可辨。

信息结构及产品主色系

色盘

1.核心色彩

#ff7300 H：27 S：100 B：100

橙ff7300位于色盘红和黄之间，色彩明亮，代表了繁荣、快乐、激情。每个产品都必须体现#ff7300的色彩元素

2.品牌相关

适用：此色条可用在需要体现阿里品牌和核心业务相关的设计中

规范：左侧两列适合文字/广告/推广页面的色彩运用，不建议作为产品背景色的大面积使用； 从第三列往右的浅色区域可以作为产品背景色的运用

3.中立色彩

适用：所有产品都可运用，具体文字颜色使用规则请参照“颜色——使用方法” 规范：除上述灰色外，不应适用其它灰色

4.页面用色体系

规范：各产品在体现自身产品色系的基础上,必须有一定面积的橙色搭配,以体现阿里个性

色彩搭配推荐

全局设定——颜色

颜色示例 使用说明 对应class名 基本链接色 #003278 最基本链接颜色 color-base, color-base-h 可扩展链接色1 网页设计的趋势，可试验性#666666 使用该颜色，体现沉稳、大气 color-extend1, color-extend1-h 可扩展链接色2 #0066cc 建议应用于互动型产品 color-extend2, color-extend2-h 辅助说明色1 #999999 应用于时间、ID、笔名、数字等的辅助性说明 功能同上，视页面实际情况选择深浅有差异的灰色 用于对文本的强调；任何链color-assist1, color-assist1-h color-assist2, color-assist2-h 辅助说明色2 #c1c1c1 强调色、链接hover色 #ff7300 接的hover颜色均统一为#ff7300 用于阅读型页面中段落文本的正文，如资讯detail color-emp, color-emp-h 正文色 #000000 color-sub, color-sub-h

注1：原则上请设计师优先考虑上述文本链接色，可以节省前端开发成本。如无法满足该页面色彩设计需求，可采用与该页面或区块主体的近似色作为文本链接色，前端配合重新书写CSS。 注2：颜色对应的css有两种，如color-assist2和color-assist2-h。两者区别在于在对a链接使用颜色时前者不改变原页面设置的hover颜色属性（比如目前首页的ff7300保持不变），而后者将hover状态时的a链接的颜色也改成自身的颜色（此时鼠标hover是链接颜色不变）

全局设定——文案&语气 什么是文案&语气？

这里所说的“文案”是显示在用户界面上的文本，包括控件标签以及用于向用户提供详细说明或解释的静态文本。

“语气”是用户界面传达给用户的一种态度，是为了给用户（阅读者）某种特定的回应或情感而设计的。好的语气所体现的个性能够促使用户积极参与界面交互，反之则会使用户感到反感。

在阿里巴巴中文站中，以准确的、清晰、简洁、鼓励式的、关注用户的文案语气方式与用户进行个人和任务层面的沟通。不要使用随意的、有歧义的、重复的文案，不要使用居高临下的或傲慢的语气。避免极端的“机器式”语言和“推销式”语言。 如何设计好文案和语气？

1.表意准确。选用含义明确的字词，避免让用户产生混淆，避免歧义。如果信息在技术上是准确的，用户则会觉得安心。如果信息不准确，则会破坏用户在该任务中的体验，而且，用户会对从那里得来的任何其他文本信息都没有信心。

2.清晰、简洁。为用户的扫视习惯设计文本，控制句子长度，避免重复，不要过度沟通。简明扼要的句子（和段落）不但节约了屏幕空间，而且是表示某概念或操作“非常重要”的最有效的手段。尽你所能进行评判和优化，使句子更加紧凑，但不至于让人觉得唐突或不友善。

3.易于理解。尽可能使用简短平实的字词，避免那些你不会在平日里使用的字词。不要发明新词或给普通的词赋予另类的含义（特殊的宣传需求除外）。避免使用方言和俚语。避免极端的“机器式”的语言和“推销式”的语言。

4.保持一致性。包括称谓、专用名词、数据格式和标点规则等。统一的术语能够帮助更好的学习和理解技术概念。不一致的术语则会迫使用户去研究不同的用词与操作是否表示的是同一种含义；统一的语法可以帮助设定用户的期望，培养用户阅读和理解习惯；在同类描述中，需要使用平行的语法结构，如“音乐”和“视频”，“收听”和“观看”，而不要使用“音乐”和“观看”。

5.尊重、支持、鼓励。界面语言应当传达的是界面使用户能够做什么，而不是界面允许用户做什么。用户绝不应感到被牵就、被责备或被胁迫。不要使用居高临下或傲慢的语气。在任何情况下都不应责备用户。当且仅当对用户来说出现非常严重的问题时，才在错误信息中使用“抱歉（对不起）”字样，如果问题发生在正常的功能执行过程中（例如，用户需要等待页面下载），则无须道歉。

产品文案规范

短语词组：

1.描述性短语：

目的：指示并引导用户；

类型：经常用于标签、导航、版块标题、菜单、类目、字段定义和产品名称；

文案要求：准确：即能揭示功用；精练：一般由2-6个汉字组成。最多不能超过6个汉字 基本结构：常使用名词，短语结构名词。 示例：

2.动作性短语：

目的：引导用户产生某种行为；

类型：常用于BUTTON或链接动作引导;

文案要求：动作性强；准确：揭示功用；精练：一般用2-4个汉字； 基本结构：动词或动宾结构短语； 示例：

句子：

1.引导类句子：

目的：引导用户产生某种行为； 类型：常使用祈使句，用“请”字开头;

文案要求：简洁，目的性强，“请”后面直接加某种动作 基本结构：“请”+动词+名词。 示例：

2.描述类句子： 目的：补充说明；

类型：产生某种行为的利益点描述;

文案要求：用一句话直接说明最直接的利益点 示例：

3.通知类句子：

目的：向用户告知有关事项和情况；

基本结构：标题+正文,标题：一般使用“重要通知”或“重要提醒”；正文：事由+通告事项+落款； 文案要求：语言平实简洁，目的性强，一般不要超过两行文字，如果有很多意思要表述，用分行断句的形式 示例：

4.提示类句子：

目的：提示用户操作成功或失败；

基本结构：礼貌用语+正文+动作礼貌用语：一般使用“您好”、“对不起”或“恭喜”等；正文：操作结果，直接告知用户成功or失败；

文案要求：尊重用户，直接提示，目的性强，尽量一句话说明白。 示例：

常见问题及举例

1.错字、别字：

• 登陆/登录： 正确用法——登录

登陆——渡过海洋或江河登上陆地。比喻商品打入某地市场。 如：这种新型空调已经在上海市场登陆

登录——登记。注册。电子计算机网络用语，指进入要访问的站点。

• 帐户/账户：正确用法——账户

一次汉语语法修订中将“帐户”这个用法给取消了。

最新版的《现代汉语词典》（它反映国家的语言文字）在“帐”的释义里注明：②同“账”。 但不在“帐”下收列与“账”有关的词。 就是说， “帐”也可用作“账”字的通假字，你还可以用“帐户” ，但推荐使用“账户”

• 预定/预订、订单/定单、制定/制订：正确用法——完全确定用“定”，不确定可修改用“订” 意思基本相同，但在法律文本上有差别。

定意为定下来，不会轻易改动，订为虽然成形，但可能有待改动 2.文案不统一： 求购/采购：

求购一般跟信息——求购信息；采购一般跟人——采购商、我要采购

阿里旺旺/贸易通：

贸易通升级后，网站上的说法都更新为阿里旺旺

公司介绍/公司黄页：

3.有歧义：

登专业批发供应信息 批发作动词还是定语？批发类的供应信息还是批发（供应信息）？ 轻松搞定采购 采购指人还是指事？

复制成功生意越做越大 复制（成功生意）还是复制成功（生意越做越大）？ 4.重复啰嗦：

5.专业术语：

预“类目导航”属于专业名词，客户不容易理解。“点击以下行业查找信息”有点多余，太罗嗦，可以两句合为一句。建议改成：供应信息行业分类

视觉设计——Logo使用 图例

规范

logo高度为46px；文字大小为24px；黑体，黑色，sharp样式；与主logo文字部分对齐； alibaba logo与竖线与频道名称的间距分别为7px；

竖线宽度为 1px,色彩为 #999999 视觉设计——主色和辅色

视觉设计——Title 基本形的体现

基本质的表现

title质感以保证文字可识别为最高优先级; title质感以不影响实用性为基础; 质感可根据产品页面不同属性做相应调整 视觉设计——图片 图片规则

(A) 1：L3 256*256 L L2 192*192 L1 160*160 M3 128*128 M M2 M1 S3 S S2 S1 32*32 96*96 80*80 * 48*48 1 (B) 4：3 (C) 3：2 (D) 2：1 (E) 3：4 224*168 192*144 160*120 128*96 96*72 *48 336*224 312*208 240*160 192*128 168*112 144*96 120*80 96* 72*48 208*104 176*88 144*72 112*56 80*40 240*320 216*288 192*256 168*224 144*192 120*160 96*128 72*96 48* 图片标准

• • • • •

尺寸：宽度、高度均为8的倍数； 图片容量(k)：W * H / 2250 ；

广告图片遵循以上两条规则，宽度随版式而变化；

内容图片比例： 1：1、 4：3、 3：2、 2：1，尺寸均可90°翻转使用，表格内为推荐使用尺寸； 点击查看大图、论坛贴等图片宽度尺寸≤0px；

命名规则

图片使用

• • •

横向图片，主要用于新闻及咨询图片、资讯幻灯等； 1：1图片，主要用于展示人物头像、list图片展示等； 竖向图片，主要用于资讯幻灯服饰行业等；