Web UI设计规范及界面实现注意事项

适用于WEB产品线的人机交互界面的设计，贯穿于以用户为中心的设计指导方向。根据WEB产品的特点制定出的一套规范，以达到提升用户体验，控制产品设计质量，提高设计效率的目的。

适合界面设计师、用户体验设计师、前台设计工程师、发布支持人员、运营编辑人员等

1．统一识别规范能使页面相同属性单元统一识别，防止混乱，甚至出现严重错误，避免用户在浏览时理解困难。

2．节约资源除了门户网站、活动推广等个性页面外，相对于后台系统、物联网系统、数据统计系统、等界面设计，使用规范标准能极大的减少设计时间。
3重复利用相同单元属性，页面新建时可以执行此标准重复使用，减少无关信息，就是减少对主题信息传达干扰，利用阅读与信息传递。

未通过客户或上级领导确认产出的界面，请勿上传至蓝湖协作系统

设计师在原型步骤及应该想好对应的图层结构，交互特效，并和前端开发人员做好交流，是否可以实现，功能的评估一定要细致

1．已上传至蓝湖协作平台的高保真界面，应根据平台中的标注尺寸进行精确还原，Web界面还原度不得低于95%；移动端还原度为100%（精确到一像素）。

2．开发人员完成视觉部分内容以后，必须由UI设计师及前端技术负责人进行校对工作。

3．如遇到界面效果复杂或组件样式特殊等难以实现的问题，应及时与对应的UI设计师或前端技术负责人沟通处理，不能随意更换。

4．前端开发人员无权更改设计图中的样式及功能，遇到问题应及时与设计人员协商。

5．如遇产品经理或项目负责人未通过设计师确认，直接要求修改界面视觉效果部分，前端开发人员可拒绝修改。必须由UI设计师对高保真图纸更改后再进行相应的修改。

关于UI设计流程及方法可以搜索易夏岚，了解更多。

一、确认目标用户

在UI设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。

用户交互要考虑到目标用户的不同引起的交互设计重点的不同。

例如:对于科学用户和对于电脑入门用户的设计重点就不同。

二、采集目标用户的习惯交互方式

不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。

当然还要在此基础上通过调研分析找到用户希望达到的交互效果，并且以流程确认下来。

三、提示和引导用户

软件是用户的工具。因此应该由用户来 *** 作和控制软件。软件响应用户的动作和设定的规则。

对于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行用户需要的下一步 *** 作。

四、一致性原则

设计目标一致

软件中往往存在多个组成部分(组件、元素)。不同组成部分之间的交互设计目标需要一致。

例如:如果以电脑 *** 作初级用户作为目标用户，以简化界面逻辑为设计目标，那么该目标需要贯彻软件(软件包)整体，而不是局部。

元素外观一致

交互元素的外观往往影响用户的交互效果。同一个(类)软件采用一致风格的外观，对于保持用户焦点，改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。

交互行为一致

在交互模型中，不同类型的元素用户触发其对应的行为事件后，其交互行为需要一致。

例如:所有需要用户确认 *** 作的对话框都至少包含确认和放弃两个按钮。

对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确，但是的确有相反的例子证明不按照这个理念设计，会更加简化用户 *** 作流程。

五、可用性原则

软件要为用户使用，用户必须可以理解软件各元素对应的功能。

如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的 *** 作，理解其对应的功能。

比如:删除 *** 作元素。用户可以点击删除 *** 作按钮，提示用户如何删除 *** 作或者是否确认删除 *** 作，用户可以更加详细的理解该元素对应的功能，同时可以取消该 *** 作。

用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。

用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。

要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏(一般来说超过4层)那么用户达到该元素的几率就大大降低了。

可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。(参考简单导向原则)

软件的交互流程，用户可以控制。

功能的执行流程，用户可以控制。

如果确实无法提供控制，则用能为目标用户理解的方式提示用户。

希望我的回答可以帮助到你。1需求阶段

软件产品依然属于工业产品的范畴。依然离不开3W的考虑（Who,where,why）也就是使用者，使用环境，使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄，性别，爱好，收入，教育程度等)。什么地方用（在办公室/家庭/厂房车间/公共场所）。如何用（鼠标键盘/遥控器/触摸屏）。除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世，我们要比他作的更好才有存在的价值。

2分析设计阶段

通过分析上面的需求，我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。

3调研验证阶段

几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观的反馈。测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。

4方案改进阶段

经过用户调研，我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢，还有什么遗憾等，这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上（这里指不能换皮肤的应用软件或游戏的界面）将方案做到细致精美。

5用户验证阶段

改正以后的方案，我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈，好的设计师应该在产品上市以后去站柜台。零距离接触最终用户，看看用户真正使用时的感想。为以后的升级版本积累经验资料。

先行迦美设计已历8年，创始人总结、编写了一套具有特色的课程体系。

先行迦美所有任课老师都是经过精挑细选具有6年以上设计从业经验的一线大牛。

根据科学结论，学生超过25人老师会力不从心，先行迦美保证每个班级学生不超过25人。

先行迦美以项目实战为教学重点，先行迦美任务平台提供大量真实项目供学员实战，在学习中也可以挣钱。

先行迦美采用开放式教学场地，互动式教学理念，学习气氛浓厚，教学场地具有与设计师审美相符合设计理念。

先行迦美UI设计课程保证最低5000薪资就业,不就业就全额退款，签订就业协议书，平均薪资8000左右，最低6000，最高15000。

先行迦美获得了上市公司神州泰岳的鼎力支持，也取得了中国国家工信部各种资格认证，还与清华大学物联网中心达成了战略合作关系。1接到产品设计需求，了解产品的本质，与需求人员反复沟通

2在产品原型的基础上做细化，细化的地方有

A检验流程是否正确

B是否缺少页面

C了解用户使用的每个页面的的使用情景

3对每个页面的信息进行梳理

4对着重页面的提取

5正式开始做UI

6切图与适配

UI的工作流程并不复杂，评价UI的好坏还是要看质量，流程只是让工作变得更流畅的方法。1产品定位与市场分析阶段1、目的(UI设计师应了解产品的市场定位、产品定义、客户群体、运行方式等)2、主要执行人员(UI、UE、需求)3、需沟通人员(销售)4、实现步骤(会议讨论)5、UI主要职责:(定义用户群特征、定义最终用户群、定义产品方向)

2用户研究与分析阶段1、目的(UI设计师收集相关资料分析目标用户的使用特征、情感、习惯、心理、需求等,提出用户研究报告和可用性设计建议这部分工作有团队配合完成时间与项目需求允许的情况下,更可以制定实景用户分析)2、主要执行人员(UI、UE、需求、技术)3、需沟通人员(销售)4、实现步骤(纸搞线稿、黑白稿、原型)5、UI主要职

3架构设计阶段1、目的(这里涉及到比较多的界面交换与流天津众维UI设计提供ui设计流程及方法资料都有，完成没问题哟。

凡涉及人机交互 *** 作的地方都需要UI设计，当然人工智能应用及物联网应用领域也不例外，未来的各种智能应用场景都是多种技术融合的产物，绝大多数系统应用项目中人机交互往往是不可或缺的，所以UI设计将大有用武之地。

一、UI设计师属于高酬职业
UI设计师的工资水平相对于很多传统行业而言还是非常高的，即便是刚入行的新人也能够得到一个不错的薪资待遇。因此UI设计师依然有很广阔的发展前景，企业招聘人才的需求也相当紧迫，所以说，现在加入学习UI设计的行列不晚，晚的是迟迟不敢开始学习的人。
二、UI设计师供不应求
现阶段专业UI设计师的人才缺口还是非常大的，即便是每年都有很多人涌入这个行业，但真正能够满足行业需求的设计师还是相当少的。现在有很多专业从事UI设计服务的第三方公司出现，并逐渐形成一定规模，以至于出现了大量的UI设计师缺口。
三、UI设计产品被广泛应用
现如今舒适的视觉享受已成为拉近消费者和商品距离的必要需求，这又依赖于UI设计，而现在UI设计的产品每天都在不断增加。当今社会是日益商品化的社会，UI设计的能力水平已逐渐占领企业间相互竞争的重要领域，成为与对手拉开差距的重要竞争手段。

UI（User Interface），中文名“用户界面”。Ps：（百度解释）UI是指对软件的人机交互、 *** 作逻辑、界面美观的整体设计。

通俗来说，大家生活中的手机和电脑上使用的各种App、网页软件等产品的原型设计都来自于UI。

行外人都认为，只要会用PS，画几张设计图就能胜任UI的工作，但实际上，若现在你还想靠PS、AI、AE等几款基础软件做两张图就能找到一份高薪工作，是比较困难的。

现在的UI设计不仅要学会配色、排版、字体设计、三大构成（平面构成、色彩构成与立体构成）、规范、切图、思维导图、原型图、手绘，还要了解程序，懂用户体验、消费者心理、沟通学、以及交互逻辑、营销等多方面的知识。

一个优秀的UI设计师不仅要能设计出美观的界面，还要能最大限度提升用户 *** 作的效率，通过色调影响用户的 *** 作习惯，用颜色或图形明确产品功能和产品内容的主次展示，降低用户 *** 作负担。

举个栗子，拿张经典设计图给大家感受一下：

小提示：Average Design 与 Good Design 的区别在于 Good Design 在高度上并不是等高的。矩形因为图形特点，在同等宽高的情况下会占有更多的像素，而圆形与三角形如果还保持等高的状态，就会显得小很多。

不看提示，相信99%的人都很难看出其差别。

所以，UI可不是画图那么简单，这些设计中的小经验，都是在实践中积累起来的，并不是随便临摹就能完全学会，当然这也是这个岗位薪资高的重要原因。

UI设计属于IT行业里少有的不用写代码就能拿高薪的技术岗，很多人也因此而转入其内。

虽然一般情况下绝大多数人通过自学或者培训机构都能够入行，但有有些人天生就适合做UI设计，比如：

第一类：美术专业的大学生

人们常说，大学毕业即失业，其实并不是这样，而是很多人不知道自己该干什么，没有一个明确的职业方向，尤其是一些艺术专业的大学生，市场上的工作岗位本来就少，再加上要求高薪资低，期望与现实不符，所以很难找到满意的工作。

UI设计相对于软件开发等岗位会更简单，技术门槛也较低，但它的薪资和市场需求却与程序员基本持恒，所以如果美术类方向的大学生毕业后不想从事传统的美术工作，但又想做与美有关的工作，那么互联网行业中的UI设计是一个非常适合的职业选择。

第二类 ：传统行业的设计者

受互联网大环境冲击，传统行业中纯美工设计师的就业机会逐年减少、创作空间也越来越窄，相应的，薪资也在逐渐降低。

再加上人工智能的发展，若你还只是单纯的P图，那么想要月薪上万，至少需要四五年，甚至更长时间以上的工作经验。但是若你选择拥抱互联网，只要稍加努力就很容易的拿到高薪。

普通设计师平时工作所用的软件，很多和UI设计是一样的，并且设计本身就有相通性，所以传统设计人员转岗或者转行都比普通人更容易，也更适合。至于互联网思维、用户思维这些内容，在后期的工作中逐步补充即可。

第三类：女性更适合做UI设计

首先声明，并无性别歧视。只是女性会比男性更细心、更有耐心、包容性更强一些，加上很多企业的研发部大多都是男性，所以女性做UI可以活跃团队氛围，并适当平衡团队中的男女比例。

UI设计师需要的是心思细腻，需要对美有所领悟，需要有品味，有思想，有大局观，最好还能懂点心理学，并且，能对于用户思维有着良好的揣摩度。正因为这些特性，所以用人单位在招聘UI设计时，会更加垂青于女性，就像招聘程序员大家更倾向于男性一个道理。

另外，UI设计的薪资对于女性来说，肯定高于大多数其他职业，工作环境也相对稳定。

当然，除了以上人群外，若你对设计有极大兴趣，那也是可以的，毕竟兴趣是最好的老师。

---