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

《UED用户体验设计规范解读.pdf》由会员分享，可在线阅读，更多相关《UED用户体验设计规范解读.pdf（32页珍藏版）》请在三一文库上搜索。

1、UED用户体验设计规范 全局设定 布局 什么是布局？ “ 布局 ” 是指页面内容的尺寸、间距及位置。有效的布局对于帮助用户快速找到他们想要的内容至关重要， 并可以在结构外观上令用户感到舒服。 如何设计有效的布局？ 具有清晰的视觉层次：布局应当让页面各元素之间的关系和重要性一目了然。你可以通过适当使 用下列属性来实现视觉层次 焦点： 指用户首先关注的区域。形式上被赋予焦点属性的UI 元素一定要表达重要的内容。 视觉流： 指用户关注区域的顺序。可以根据任务逻辑和用户的浏览习惯来设计恰当的视觉流。好 的视觉流应该清晰、合理、顺畅、自然。 关联： 在逻辑上相关的UI 元素应具有清晰的视觉关系。 错误：

2、 逻辑上相关的UI 元素在空间上被分隔，且没有明显的视觉关联。 对齐： 使页面工整，信息呈现有序，便于用户扫视。 错误： 没有对齐影响了页面效果且不便于用户扫视。不要因为功能需要和对极限情况的顾虑而轻易牺牲 掉页面的视觉展现。 强调： 可以根据 UI 元素间的相对重要程度进行强调。 针对用户的阅读模式来设计布局：大部分人的阅读习惯是从左向右，至上而下。阅读分为沉浸式 阅读（ immersive reading）和扫视（ scanning ），前者的目的在于理解，后者在于定位。 浏览网站时， 用户不会沉浸在UI 本身， 而是沉浸在他们的目标任务中，因此扫视是最常使用的阅 读模式。用户只在确信必要

3、时才仔细阅读大量文本。 针对扫视的布局设计可以适当强调主要的UI 元素，弱化次要的。包括： 1. 将主 UI 元素放在扫视路径上。 2. 避免将重要信息放在左下角或者页面底端或者需要滚动很多的控件上。 3. 考虑使用渐进展开方式来隐藏次要的UI 元素。 4. 将任务相关的重要信息要直接表现在控件上。用户更倾向于关注交互控件上的标签，而不是辅 助型的静态文本。 错误： 用户必须阅读辅助型文本后才能明确“ 确定 ” 按钮的作用。 正确： 直接将按钮的作用描述作为控件标签，便于用户理解。 不要展示大段文本，去除不必要的文本。多文本时格式化展示。 注：常规模式也存在例外。眼动议实验指出，真实用户的行为

4、很没有规律。此模式的目的在于帮 助你做出更好的决定，而不是精准的描述用户行为。 合理利用页面空间 1. 保持页面的视觉平衡。避免拥挤和对空间的浪费。 2. 确保关键数据没有被截断，除非数据特别长。 错误 : 有效空间没有被充分利用，从而导致多条关键数据被截断。 3. 控件的尺寸和间距恰当，没有不必要的滚动。一个任务尽量在一屏内完成。 4. 实际情况中，我们用户的页面空间要小于屏幕分辨率，它会因各种因素而压缩，如：非全屏操 作（弹出窗口和对比浏览），浏览器本身及各种辅助栏对屏幕的占用等，设计中要考虑这些情况。 不要让布局本身成为突出的UI 元素，保持视觉简洁（visual simplicity）

5、 1. 减少内容和展现上的嵌套层级。 2. 减少控件不同尺寸的数量，例如，在界面上只使用一两种按钮宽度。 3. 采用轻量级的分组和分割方式，可以用布局本身和分隔符代替分组框。 4. 使用尽量少的对齐线。 选择与页面类型相匹配的版式 在设计之初，应充分考虑页面承载的内容、功能和属性，继而选择适合该页面的版式。不合适的 版式会造成用户的阅读困扰，降低任务的完成效率。 标准和规范 栅格化 我们所说的栅格化是指在网页设计工作中对栅格系统的建立和应用。网页栅格系统来源于平面栅 格系统，它以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。 栅格化可以使信息呈现工整简洁、美观易读，降低页面开发和运维

6、成本。它结构变化相对灵活， 扩展性强。 以 8px 为横向栅格单位 以 8px 为横向栅格单位，页面所有元素宽度都可以是2 的倍数，包括图片和版块宽度，这样可以 加快页面（特别是对于J-PEG 图片）的渲染速度（基于计算机内部二进制的运算机制）。 在阿里巴巴中文站中，布局间距的最小单位为8px，布局区块采用32px （8px*4 ）和 24（8px*3 ） 两种粒度单位，分别组成以下两种可实现的栅格系统: 32px: 适用于市场、社区等相关页面 24px: 适用于旺铺相关页面 页面定宽 自适应可以根据浏览器显示情况自动调整页面宽度，但是因为用户水平方向的聚焦范围有限，所 以当页面过宽时，用户的

7、浏览和操作成本会增加；而当页面过窄时（如用户同时开启两个浏览器 对比查看商品搜索结果），自适应则会导致布局变形和内容错乱。给页面规定宽度可以避免这些 问题。 在综合考虑当下主流分辨率情况、浏览器外观对显示空间的占用、人机工程学中对水平视角和聚 焦范围的规定以及8px 单位等多种因素后，我们认为960px 是一个相对更加合理的页面宽度。在 阿里巴巴中文网站中，推荐使用定宽960px 的页面，去除左右各4px 的边距，中间的可视宽度为 952px 。 全局设定 布局 模版下载 for axure for ps Axure 栅格模板使用说明： 1. 新建项目文件，载入Axure 栅格模板，选择适合的

8、栅格系统（32 或 24）。系统内已附带对应的栅 格背景及常用版式。 2. 载入PS 栅格模板，选择对应的栅格图层（32 或 24）并拖动至设计稿图层组之上，校验并调整尺寸 精度。 3. 保持栅格图层可见，以psd 格式交付。这样便于前端开发工程师快速计算和准确定位，提高工作效率。 PS 栅格模板使用说明: 1. 视觉设计师基于交互原型完成视觉设计稿，新建设计稿图层组包含所有图层。 2. 在需要的版式的基础上进行设计，形成具有栅格化布局的交互原型 3. 保留栅格背景，无论是在展示原型还是在交付物中。这样便于视觉设计工作的开展。 代码使用说明 : grid-32 栅格系统（适用于市场及社区相关页

9、面），class ：.layout-p32a24 1、grid-32 栅格系统可构建的布局大小(红色部分为已选用的区块大小) class = .grid-1 .grid-2 .grid-3 .grid-4 .grid-5 .grid-6 .grid-7 .grid-8 .grid-9 .grid-1 0 .grid-1 1 .grid-1 2 W(px ) = 32 72 112 152 192 232 272 312 352 392 432 472 class = .grid-1 3 .grid-1 4 .grid-1 5 .grid-1 6 .grid-1 7 .grid-1 8 .gri

10、d-1 9 .grid-2 0 .grid-2 1 .grid-2 2 .grid-2 3 .grid-2 4 W(px ) = 512 552 592 632 672 712 752 792 832 872 912 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 (

11、.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:/ 两栏式 / 两栏式 demo: / import

12、css file url:http:/ 632px(.grid-16) 312px(.grid-8) 三栏式 / 三栏式 demo: / import css file url:http:/ 312px(.grid-8) 312px(.grid-8) 312px(.grid-8) grid-24 栅格系统（适用于旺铺相关页面），class ：.layout-p24a30 1、grid-24 栅格系统可构建的布局大小(红色部分为已选用的区块大小) clas s = .grid- 1 .grid- 2 .grid- 3 .grid- 4 .grid- 5 .grid- 6 .grid- 7 .gr

13、id- 8 .grid- 9 .grid- 10 .grid- 11 .grid- 12 .grid- 13 .grid- 14 .grid- 15 W(p x) = 24 56 88 120 152 184 216 248 280 312 344 376 408 440 472 clas s = .grid- 16 .grid- 17 .grid- 18 .grid- 19 .grid- 20 .grid- 21 .grid- 22 .grid- 23 .grid- 24 .grid- 25 .grid- 26 .grid- 27 .grid- 28 .grid- 29 .grid- 30

14、W(p x) = 504 536 568 600 632 664 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)

15、 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:/ 两栏式 / 两栏式 demo: / import css file url:http:/ 18

16、4px(.grid-6) 760px(.grid-24) 三栏式 / 三栏式 demo: / import css file url:http:/ 312px(.grid-8) 312px(.grid-8) 312px(.grid-8) 全局设定 字体 什么是字体？ “ 字体 ” 是指字型（ typeface ），大小（ size ）及辅助属性的总体描述。 如何正确的使用字体？ 1. 选择合适的字型：在阿里巴巴中文站中，采用两种中文字型和一种英文（含数字）字型： 中文字型： 宋体 应用于一般文字。 黑体 应用于标题或需要引起注意的文字。不宜大量排布。 英文字型： Tahoma / Helvet

17、ica / Arial。 （优先级从左到右，具体显示由用户系统支持情况而定） 注 1：字型分为衬线与非衬线两种（衬线又称字角，是指在字体笔划末端的小转角）。在传统文 本印刷中，正文文本多采用衬线字型，因为衬线能便于识别印刷油墨不明显的情况，并且使文字 看起来更加典雅和正式；但在网页UI 中，由于对清晰外观的需求以及计算机显示器的低分辨率， 非衬线字型则是更好的选择。 注 2：对计算机显示器来说，宋体在14px 大小及以下，可以看成是非衬线字型。 2. 注意文字的大小和行高： 增强文字与周围元素的对比（包括大小对比等多种对比方式）可以使文字本身更加突出、更加易 于识别；适当增加文字的大小（扩大可

18、视与操作面积），可以更方便用户进行阅读与点击。但文 字不是越大越好，要考虑页面的整体布局以及单位面积的信息显示效率。在阿里巴巴中文站中， 尽量不使用超过20px 的文字。 若必须超过20px ，则需采用抗锯齿处理；如果该文字是按钮标签， 则应当与按钮背景一起做成图片。 阿里巴巴中文站中常见的字体大小及其主要的应用场景如下表： 文字大小应用场景 12px 信息结构中层次较低的内容 当页面单位面积信息显示效率较 高时 14px 信息结构中层次较高的内容(导航、 索引、标题等 ) 需要被强调的重要信息或控件标 签 阅读型页面中段落文本的正文 16px 新闻头条和焦点信息 对用户来说最重要或最值得关注

19、 的关键信息 20px 阅读型页面中段落文本的标题 关键任务中主按钮的标签(可以文 字也可以图片化 ) 设计软件中常提到的文字大小单位有三种，分别是像素（px）、点（ point ）、字号，它们的数值 对应关系如下（以网站常见的字体大小为例） 像素（ px ）点（ point ）字号 12 9 小五 14 10.5 五号 16 12 小四 20 15 小三 行高是指文本所在行上下边界之间的距离。通常情况下，行高大于字体高度。 注：常规模式也存在例外。眼动议实验指出，真实用户的行为很没有规律。此模式的目的在于帮 助你做出更好的决定，而不是精准的描述用户行为。 增加段落本文的行高可以扩大行与行之间

20、的距离，从而增强横向浏览的引导；但行高不宜过大， 过大会浪费屏幕空间降低显示效率。在阿里巴巴中文站中，推荐使用的行高是文字高度的150% 和 180% 。手动排布的文本列表也建议采用此比例。常用于段落和列表文本的文字大小是12px 和 14px ，他们对应的两种行高数值如下表： 文字大小行高 150%行高 180% 12px 18px 22px 14px 21px 26px 3. 恰当的应用辅助属性： 粗体： 用于控件标签和重要文字，以使文本突出易读。保守使用能增加对比，将用户的注意力吸 引到那些必须阅读的文本上。使用过多会削弱其作用。 斜体： 不使用。 粗斜体： 不使用。 下划线： 只限于连

21、接。尽量不要在链接以外的地方使用下划线。 鼠标指针： I 字型鼠标指针表明该文本是可以选中的，而常规鼠标指针则表明文本不能被选中。 插入符： 插入符是闪烁的竖直线，在文本具有输入焦点时表明可选择或可编辑文本的插入/选择位 置。 文字颜色： 浅灰色表示该文本是禁用的。特殊色，尤其是蓝色，表示该文本是连接。 背景色： 浅灰色可暗示文本的只读性，但一般情况下不推荐使用。 全局设定 颜色 设计理念 有效使用颜色能够使用户界面更加高效。颜色可以帮助用户瞬间理解特定的含义。颜色也能够使网站界面 看起来更加美观和精致。 颜色是如何被使用的 颜色通常在用户界面中用于表达： 含义： 信息的含义可以通过颜色来表达

22、。例如，红色表示发生问题或错误，黄色表示注意或警告， 绿色表示良好。 状态： 对象的状态可以通过颜色来指示。例如网页上的链接使用蓝色表示未访问，紫色表示已访 问。 区别： 人们认为具有相同颜色的条目之间具有某种联系，因此颜色编码是区别对象的有效方式。 强调： 颜色可以用于引起用户的关注。 设计指南 不要将颜色用作主要的沟通方式,而是作为辅助方式对要表达的意思进行视觉加强。 尽可能选择合适的颜色，这么做能够始终尊重用户的色彩偏好。 根据用途选择颜色 前景色与背景色保证清晰可辨。 信息结构及产品主色系 色盘 1.核心色彩 #ff7300 H ：27 S ：100 B ：100 橙 ff7300 位

23、于色盘红和黄之间，色彩明亮，代表了繁荣、快乐、激情。每个产品都必须体现#ff7300 的色彩元素 2.品牌相关 适用： 此色条可用在需要体现阿里品牌和核心业务相关的设计中 规范： 左侧两列适合文字/广告 /推广页面的色彩运用，不建议作为产品背景色的大面积使用；从 第三列往右的浅色区域可以作为产品背景色的运用 3.中立色彩 适用： 所有产品都可运用，具体文字颜色使用规则请参照“ 颜色 使用方法 ” 规范： 除上述灰色外，不应适用其它灰色 4.页面用色体系 规范： 各产品在体现自身产品色系的基础上,必须有一定面积的橙色搭配,以体现阿里个性 色彩搭配推荐 全局设定 颜色 颜色示 例 使用说明对应 c

24、lass 名 基本链接色#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 辅助说明色 2 #c1c1c1 功能同上， 视页面实际情况 选择深浅有差异的灰色

25、 color-assist2, color-assist2-h 强调色、链接 hover 色 #ff7300 用于对文本的强调； 任何链 接的 hover 颜色均统一为 #ff7300 color-emp, color-emp-h 正文色#000000 用于阅读型页面中段落文 本的正文，如资讯detail color-sub, color-sub-h 注 1：原则上请设计师优先考虑上述文本链接色，可以节省前端开发成本。如无法满足该页面色 彩设计需求，可采用与该页面或区块主体的近似色作为文本链接色，前端配合重新书写CSS 。 注 2：颜色对应的 css 有两种，如color-assist2和 c

26、olor-assist2-h 。两者区别在于在对a 链接使 用颜色时前者不改变原页面设置的hover 颜色属性（比如目前首页的ff7300 保持不变），而后者 将 hover 状态时的 a 链接的颜色也改成自身的颜色（此时鼠标hover 是链接颜色不变） 全局设定 文案 文案要求： 动作性强；准确：揭示功用；精练：一般用2-4 个汉字； 基本结构： 动词或动宾结构短语； 示例： 句子： 1.引导类句子： 目的： 引导用户产生某种行为； 类型： 常使用祈使句，用“ 请” 字开头 ; 文案要求： 简洁，目的性强，“ 请” 后面直接加某种动作 基本结构： “ 请”+ 动词 +名词。 示例： 2.描述

27、类句子： 目的： 补充说明； 类型： 产生某种行为的利益点描述; 文案要求： 用一句话直接说明最直接的利益点 示例： 3.通知类句子： 目的： 向用户告知有关事项和情况； 基本结构： 标题 +正文 ,标题：一般使用 “ 重要通知 ” 或“ 重要提醒 ” ；正文：事由 +通告事项 +落款； 文案要求： 语言平实简洁，目的性强，一般不要超过两行文字，如果有很多意思要表述，用分行 断句的形式 示例： 4.提示类句子： 目的： 提示用户操作成功或失败； 基本结构： 礼貌用语 +正文 +动作礼貌用语：一般使用“ 您好 ” 、“ 对不起 ” 或“ 恭喜 ” 等；正文：操作结 果，直接告知用户成功or 失败

28、； 文案要求： 尊重用户，直接提示，目的性强，尽量一句话说明白。 示例： 常见问题及举例 1.错字、别字： 登陆 /登录：正确用法 登录 登陆 渡过海洋或江河登上陆地。比喻商品打入某地市场。 如：这种新型空调已经在上海市场登陆 登录 登记。注册。电子计算机网络用语，指进入要访问的站点。 帐户 /账户： 正确用法 账户 一次汉语语法修订中将“ 帐户 ” 这个用法给取消了。 最新版的现代汉语词典（它反映国家的语言文字政策）在“ 帐” 的释义里注明：同“ 账” 。 但 不在 “ 帐” 下收列与 “ 账” 有关的词。就是说，“ 帐” 也可用作 “ 账” 字的通假字，你还可以用“ 帐户 ” ， 但推荐使

29、用 “ 账户” 预定 /预订、订单 /定单、制定 /制订： 正确用法 完全确定用 “ 定” ，不确定可修改用“ 订” 意思基本相同，但在法律文本上有差别。 定意为定下来，不会轻易改动，订为虽然成形，但可能有待改动 2.文案不统一： 求购 /采购： 求购一般跟信息 求购信息；采购一般跟人 采购商、我要采购 阿里旺旺 /贸易通： 贸易通升级后，网站上的说法都更新为阿里旺旺 公司介绍 /公司黄页： 3.有歧义： 登专业批发供应信息批发作动词还是定语？批发类的供应信息还是批发（供应信息）？ 轻松搞定采购采购指人还是指事？ 复制成功生意越做越大复制（成功生意）还是复制成功（生意越做越大）？ 4.重复啰嗦

30、： 5.专业术语： 预“ 类目导航 ” 属于专业名词，客户不容易理解。“ 点击以下行业查找信息” 有点多余，太罗嗦，可以 两句合为一句。建议改成：供应信息行业分类 视觉设计 Logo 使用 图例 规范 logo 高度为 46px ；文字大小为24px ；黑体，黑色，sharp 样式；与主logo 文字部分对齐； alibaba logo与竖线与频道名称的间距分别为7px； 竖线宽度为1px,色彩为#999999 视觉设计 主色和辅色 视觉设计 Title 基本形的体现 基本质的表现 title 质感以保证文字可识别为最高优先级; title 质感以不影响实用性为基础; 质感可根据产品页面不同属

31、性 做相应调整 视觉设计 图片 图片规则 L M S L3 L2 L1 M3 M2 M1 S3 S2 S1 (A) 1： 256*25 6 192*19 2 160*16 0 128*12 8 96*96 80*80 64*64 48*48 32*3 2 1 (B) 4： 3 224*16 8 192*14 4 160*12 0 128*9 6 96*72 64*4 8 (C) 3： 2 336*22 4 312*20 8 240*16 0 192*12 8 168*11 2 144*96 120*8 0 96*64 72*4 8 (D) 2： 1 208*10 4 176*88 144*7

32、2 112*5 6 80*4 0 (E) 3： 4 240*32 0 216*28 8 192*25 6 168*22 4 144*19 2 120*16 0 96*12 8 72*96 48*6 4 图片标准 尺寸：宽度、高度均为8 的倍数； 图片容量 (k)：W * H / 2250 ； 广告图片遵循以上两条规则，宽度随版式而变化； 内容图片比例：1：1、 4：3、 3：2、 2：1，尺寸均可 90 翻转使用，表格内为推荐使用尺寸； 点击查看大图、论坛贴等图片宽度尺寸640px ； 命名规则 图片使用 横向图片，主要用于新闻及咨询图片、资讯幻灯等； 1：1 图片，主要用于展示人物头像、list 图片展示等； 竖向图片，主要用于资讯幻灯服饰行业等；