下次自动登录
现在的位置:
& 综合 & 正文
WEB UI设计规范
Web应用界面设计规范（Design Specification for Web UI）
主讲人：ARay
一、软件界面规范的重要性及其目的
二、用户体验为何如此重要
三、Web规范体系介绍
四、界面设计开发流程
五、应该遵循的基本原则
六、界面设计规范
一、软件界面规范的重要性及其目的
①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。
②产品设计通过规范的方式来达到以用户为中心的目的。
二、用户体验为何如此重要
①日常生活中的遭遇
X员工悲惨的一天：
早晨起来，发现闹钟没有按原先设定响起来。
一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。
到了地铁站，发现公交卡没有钱了。
无奈之下只能去排队买票。
排了3趟地铁，终于到公司了，但是你却迟到了。
结果：尽管你已经非常努力，但是你还是迟到了。
那么，让我们看看这一连串
的倒霉事，
是什么让我们如此狼狈？
② 什么是用户体验
用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。
糟糕的用户界面表现：
表现一：过分使用各种奇形怪状、五颜六色的控件。
表现二：界面元素比例失调。比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。
表现三：界面元素凌乱。比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。
表现四：违背使用习惯。你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。
表现五：消息框信息含糊、混乱。比如软件弹出一个消息框。把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。
表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。这种软件本身的确提供了比较复杂的功能，但对于哪些是常用功能，哪些是很少用到的高级功能，缺乏评估。什么功能都往界面上挤，占地方不说，用户会厌烦，弄不好还会被吓跑。
③用户体验的要素
用户体验和软件应用
面对大量的选择，用户只能自己想办法，去决定哪一个软件系统功能会符合她的要求。
企业开始意识到，提供优质的用户体验是一个重要的、可持续的竞争优势。
用户体验形成了客户对企业的整体印象，界定了企业和竞争对手的差异，并且决定了客户什么时候还会再次光顾。
⑤记住你的用户
以用户为中心的设计
-------在开发产品的每一个步骤中，都要把用户列入考虑范围内
考虑用户体验
把它分为各个组成要素
从不同角度来了解它
-----通过这些才能确保你控制了决策所造成的全部结果
用户体验很重要，最大的理由：它对你的用户很重要。
协调一致，直观明了，甚至让人愉快的体验
-----“一次”每件事都按照正确的方式在工作的体验。
三、Web规范体系介绍
四、界面设计开发流程
五、应该遵循的基本原则
显示信息一致性的原则
以用户为主导原则
易用性原则
鼠标与键盘一致性原则
系统响应时间原则
出错信息和警告原则
信息显示原则
数据输入原则
合理性原则
美观与协调性原则
①显示信息一致性的原则
无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用应用系统。
这样得到的好处：
用户使用起来能够建立起精确的心里模型，使用熟练了一个系统界面后，切换到另外一个系统界面能够很轻松的推测出各种功能。
降低培训、支持成本，支持人员不用费力逐个指导。
给用户统一感觉，不觉得混乱，心情愉快，支持度增加。
②以用户为主导原则
明确用户是所有系统处理的核心，不应该有应用程序来决定处理过程，所以用户界面应当由用户来控制应如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。
③易用性原则
用户不用查阅帮助就能知道该界面的功能并进行相关正确的操作。
完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。
完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。
按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。
界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。
界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。
同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。
分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab
默认按钮要支持Enter操作，即按Enter后自动执行默认按钮对应操作。
可写控件检测到非法输入后应给出说明并能自动获得焦点。
复选框和选项框按选择几率的高底而先后排列。
复选框和选项框要有默认选项，并支持Tab选择。
专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。
④鼠标与键盘一致性原则
尽量遵循可不用鼠标的原则：应用中的功能只用键盘也应当可以完成。但是，许多鼠标的操作，如双击、拖动对象等，并不能简单地用键盘来模拟即可实现，此类操作可适当增加操作按钮。
⑤系统响应时间原则
系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时间过快也会影响到用户的操作节奏，并可能导致错误。因此在系统响应时间上坚持如下原则：
0-5秒鼠标显示成为沙漏；
5秒以上显示处理窗口，或显示进度条；
一个长时间的处理完成时应给予完成警告信息。
⑥出错信息和警告原则
出错信息和警告是指出现问题时系统给出的坏消息，对于出错信息和警告应该遵循以下原则：
信息以用户可以理解的术语描述；
信息简明扼要，指出出错原因并提供解决办法提示。
⑦信息显示原则
信息显示遵循以下原则：
只显示与当前用户语境环境有关的信息；
不要用数据将用户包围，使用便于用户迅速吸取信息的方式表现信息；
使用一致的标记、标准缩写和颜色，显示信息的含义应该非常明确，用户
不必再参考其它信息源；
产生有意义的出错信息；
使用缩进和文本来辅助理解；
使用窗口分隔控件分隔不同类型的信息；
高效地使用显示器的显示空间，但要避免空间过于拥挤。
⑧数据输入原则
数据输入遵循以下原则：
尽量减少用户输入动作的数量；
维护信息显示和数据输入的一致性；
交互应该是灵活的，对键盘和鼠标输入的灵活性提供支持；
在当前动作的语境中使不合适的命令不起作用；
让用户控制交互流，用户可以跳过不必要的动作、改变所需动作的顺序
（如果允许的话）以及在不退出系统的情况下从错误状态中恢复；
为所有输入的动作提供帮助；
消除冗余输入。可能的话提供默认值、绝不要让用户提供程序中可以自
动获取或计算出来的信息。
⑨合理性原则
屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引
用户注意力的位置，在放置窗体时要注意利用这两个位置。
⑩美观与协调性原则
界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。
长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。
布局要合理,不宜过于密集，也不能过于空旷，合理的利用空间。
按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。
按钮的大小要与界面的大小和空间要协调。
避免空旷的界面上放置很大的按钮。
放置完控件后界面不应有很大的空缺位置。
字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观，很少使用超过12号的字体。
前景与背景色搭配合理协调，反差不宜太大。常用色考虑使用Windows界面色调。
如果使用其他颜色，主色要柔和，具有亲和力，坚决杜绝刺目的颜色。
大型系统常用的主色有“#E1E1E1”、“#EFEFEF”、“#C0C0C0”等。
界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。
如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。
通常父窗体支持缩放时，子窗体没有必要缩放。
如果能给用户提供自定义界面风格则更好，由用户自己选择颜色、字体等。
六、界面设计规范
【上篇】【下篇】干货：超全UI设计规范全流程干货：超全UI设计规范全流程UI巴巴百家号为什么需要设计语言对内上图，应该是很多设计团队都遇见的情况，一个按钮很多尺寸，颜色，大小，有时候我们已经有了规范，但是由于业务方各种要求，要个性化，要不一样，导致整个APP设计变的很混乱，这是我们设计中经常遇见的，很多APP因为缺少基础规范，导致APP界面每个页面都不一样，设计师都是按照个人的主观经验做设计，导致风格层次不齐，缺乏统一性，所以对内，很多时候设计语言是为了解决统一性和效率为前提下，避免开发工程师重复开发一些组件。对外对外，统一的品牌符号，品牌特征，有助于加深产品在用户心中的印象，统一的颜色和交互形式能帮助用户加深对产品的熟悉感和信任感，一个好的设计语言本身可以在体验上为产品加分，试想一下，当你走进星巴克的时候，发现LOGO变了，咖啡的包装换了，是不是会觉得是山寨的感觉，就好比汉堡XX，虽然都是同样的薯条汉堡，但是总感觉是山寨，好的品牌规范，能够更好创见一致性的体验。设计语言解决什么问题一致性在整个平台中创造一致性，颜色、按钮、字体、品牌一致性，给用户安全感与熟悉感，同时解决设计师因为个人特征导致界面不统一问题。明确设计原则让每一个设计师很清楚的知道，我们产品需要传递给用户的设计特征和原则是什么，以及整个平台的约束是什么，比如我们平台特征是年轻，活泼，那么我们有对应的设计规范，比如圆角按钮，渐变色。设计师就得在这个约束下去进行设计，就不能设计成直角或方正的图形，因为和整个设计原则不匹配。效率提升效率，对于一些我们经常用到的组件、颜色、分割线、按钮、图标、字体、tab、表单等组件，如果提前设计统一好，能大大减少重复性设计，能让设计师更加专注在设计品质上加强，提升效率，对于基础的颜色、字体、间距可以提前开发好，减少重复性开发。多平台统一我们现在处于一个各种设备的时代，各种屏幕尺寸，平板电脑，笔记本，各种安卓机器，各种厂商自定义的系统等等，我们的设计需要在这些平台上运行，就必须保证设计的统一性。设计语言包含哪些内容前面我们已经说了，设计语言的重要性以及设计语言解决了什么问题，那么到底设计语言里面应该包含哪些内容，我们应该如何去定义这些内容呢？1.设计原则Airibnb在建立他们设计语言之前，先根据整个产品公司定位，价值观，先得出他们整一个设计语言的关键词:统一：每个设计应该是统一的，不能有太多个性差异化的特征；关于内容：用户应该更多关注的是内容，而非设计本身；确定的：在设计中减少不确定的因素，和预期。同样的，在facebook的设计原则语言里面，也首先强调了他们的设计价值观：通用，人性，干净，统一，有用，快速，透明，在facebook所有设计中，都围绕这几个点去作为他们设计指导准则。苹果设计规范，建议每一个接触UI的同学都应该去学习，苹果的设计规范包括：完整性，一致性，直接操作，反馈，隐喻，用户控制等。所以我们在建立一个设计语言的第一步，先应该建立一个设计准则，关于设计准则如何定义，我会在后面的文章里面和大家详细讲解。2.色彩系统设计中三大元素，色彩，字体，图形，那么第一步我们在建立一个系统时候，色彩是很重要一部分，我们需要定义好我们整个系统的色彩架构体系，色彩体系一旦建立好，后面我们的设计都将围绕这些色彩进行设计，色彩包括：品牌色、辅助色、字体黑白灰颜色、不可用颜色、超链接颜色、成功或失败颜色等等。▲ 主色盘▲ 辅助色盘▲ 色盘延伸3.图形▲ 图形，设计中很重要元素之一，我们插画风格图形如何定义，图标，背景图形都属于图形一部分。▲ 插画在设计运用类型有几种，比如atlassian对于他们插画类型进行了规范，插画需要有隐秘和故事性在里面，插画必须有构建的感觉，定义了人物特征以及颜色规范。▲ 包括对于空白页图形定义▲ 对图标风格定义，包括色彩关系▲ 对于头像，定义了有五官和无五官风格定义▲ 包括整个规范的正确示范和错误示范等等▲ 图标规范等等4.栅格系统栅格是为了保证页面中更好的布局，保证布局统一性。栅格系统里面又分最小单位和间距，在airbnb中对于间距，他们运用了8的倍数，所有的规范都是很有弹性的，8，16，24，48，64来建立。▲ 网格系统中的列,也有叫栏▲ 网格系统中的行▲ 网格系统中的水槽▲ 网格系统中的边距5.字体界面中出现最多的内容字体，字体除了传统意义上大小之外，还有字间距、行间距、字重对比、字体颜色等等，后面系列文章中，我会详细告诉大家如何定义字体。▲ 字重，顾名思义就是字体粗细，通过字重可以加强层级▲ 字体大小以及运用场景，字体在界面中什么样场景运用多大字号，以及对应的字间距，行间距等等都是需要我们去定义的。▲ 字体颜色，什么时候用品牌色，成功，错过，超链接出错等等各个状态的颜色如何去定义，后面文章我会详细说明。6.投影在设计系统中我们需要定义好投影关系，投影需要去定义不同的强度大小，以满足页面中需要，一般通过透明度，以及投影远近来定义。7.图文关系图片和文字在界面中如何处理，多色调如何运用，黑色图片上放文字怎么处理，白色图片放文字如何处理都是需要我们去详细定义的。总 结设计一套设计语言是一个很复杂的过程，前期一般需要比较资深的的设计师来完成，设计完成后，对于基础的颜色，字体不要经常变动动，成本会比较高，至少需要保证这些基础元素，一年内不要频繁变动，今天和大家分享的只是一个大概框架，后续我将会拆解里面每个模块，逐步和大家分享如何去设计一个语言。本文由百家号作者上传并发布，百家号仅提供信息发布平台。文章仅代表作者个人观点，不代表百度立场。未经作者许可，不得转载。UI巴巴百家号最近更新：简介:为UI设计师提供UI界面设计欣赏和经验教程作者最新文章相关文章iPhone6界面设计尺寸规范大全【含原型设计规范】 - 25学堂
你可能喜欢
25学堂的QQ群
APP界面设计交流群：(已满)
UI/UX设计交流群：
官网客服QQ：
使用社交账户登录&>&APP UI设计规范
APP UI设计规范
上传大小：1.19MB
选择字体大小时应根据app的性质，风格，定位来进行选择，应通过文字大小表现出内容的轻重，层级划分，做到层级关系明显。除了对字体进行字号大小的区别，还可对文字进行样式（加重字体）和颜色的区分。
综合评分：0
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有0条
VIP会员动态
热门资源标签
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
APP UI设计规范
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
无法举报自己的资源
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
请选择类型
资源无法下载 （ 404页面、下载失败、资源本身问题）
资源无法使用 （文件损坏、内容缺失、题文不符）
侵犯版权资源 （侵犯公司或个人版权）
虚假资源 （恶意欺诈、刷分资源）
含色情、危害国家安全内容
含广告、木马病毒资源
*投诉人姓名：
*投诉人联系方式：
*版权证明：
*详细原因：
APP UI设计规范