如何设计Web系统

海思团队

深圳/UX设计师/6年前/926浏览

版权

如何设计Web系统

海思团队

除非有更好的选择，否则请遵从标准——交互设计之父阿兰.库柏

如何设计Web系统

Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。早在中国IT业没有兴起之时，计算机应用系统主要是以功能为主，根本没有图形界面设计这一概念。时至今日，随着计算机和网络的不断普及，社会信息化日益加深，用户和市场不断成熟，人们不仅仅满足于功能，而是强调易用、好用，因此，不论是普通用户的个人软件还是企业系统，界面设计在系统中成为了一个非常重要的东西，当今信息化社会时代，界面设计的好坏决定一个公司的成败，所以很多企业都融入了体验设计师、交互设计师、视觉设计师来做好APP&Web系统，为企业带来最大利益化

但是中国由于IT业发展滞后、市场还不够成熟等原因，绝大多数企业中，（传统行业居多）界面设计在软件系统中还没有获得与功能重要性相匹配的一席之地，并且在企业运作和协调中业没有形成成熟的模式和解决方案，如何做好界面设计和开发，仍然是大家不断研究探讨的一个问题

我写这篇文章，主要是我顶尖通信大公司负责Web系统设计的工作过程，但也有一些移动端设计，与大家分享如有不适的地方，欢迎留言

Web界面设计

web界面的外观是否友好直接关系到web站点能否吸引用户。人性化的设计是Web界面设计的核心。如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点

1.工作流程

整个设计与开发中主要流程工作

2.需求分析

从最初的需求分析，自始自终参与整个项目。在需求分析阶段，参与了对用户的访问和调研；在原型设计阶段，把概念的想法提炼到纸质和原型稿上；在交互原型评审阶段，汇报原型方案，完成了整个系统交互设计、界面设计和Demo制作，并做会议纪要；在高保真设计阶段，使用自己制定的设计规范，除非有更好的选择，否则就遵从标准；在开发阶段，协调HW技术大牛解决技术问题，完成上游与下游的沟通；在测试阶段，保证高保真与设计开发100%还原度；其余功能需求做遗留、迭代下一版本开发

在需求分析阶段，主要针对用户体验、交互方式、界面相关问题，对用户访谈。主要包括有一下：

1.1.用户群访问

1.2.系统助理问题反馈收集

1.3.交互界面使用的习惯

1.4.旧版系统使用情况

访谈期间主要是BA和交互设计师一起完成，一位负责引导访谈并做简单记录，把控现场，注意时间和节奏；另一位负责详细记录访谈内容，查找提问的遗漏。访谈中：重点是从用户角度收集工作中阻碍的主要问题；进一步阐明用户角色和行为，对问题进行汇总。每个项目都有一名项目助理人，他们也是非常重要的需求来源

本项目系统的客户群主要是公司内部的员工、总经理、一级总裁、董事会成员，最终年龄段从年轻到中老年都有。对于公司人员对系统是非常熟悉的，基于第三方的服务器进行开发受到环境的影响，系统承载量大，加载页面时间过长，页面交互方式复杂，功能多，完成一个重点工作的录入工作困难，经常求助IT服务指导。高层领导对文字字体太小难以识别，鼠标右键不经常使用或者不知道有这个功能

以用户为中心

以用户为中心的设计原则

产品设计的基本要求和出发点则是为了满足人们的需要、提高人们的生活质量,从而为人们的生活、学习带来便利,进而促进社会的快速发展。以'用户为中心'的设计原则则主要是将'人'放在考虑产品设计当中的首要位置。因此本文首先对本文通过分析以用户为中心的设计原则的具体要求出发,从而提出相应的实施方法以及手段,并对在执行过程当中所产生的影响进行分析和考虑,总结出在产品设计当中应当以易用性和协调性相互融合进行设计,从而在最大程度上去满足用户的需要

把用户放在第一位，重点考虑用户需求。既考虑用户的共性，又要考虑用户之间的差异性。不同类型的Web，访问的群体不同；同一类型的Web，用户群也存在年龄、行业差别。针对女性的网站尽量选用柔和、明快的暖色作为主色调，给女性浏览者以热情、柔美的感觉。在页面上，可选用大量清晰度高的图片做视觉冲击。针对男性的网站常采用简洁明了的表现方式，色调多由冷色调构成，针对儿童的网站，设计界面兼具活泼有趣，多一些卡通形象，针对中年人的网站，应考虑采用较大的字体，直接了当的信息显示和简单的浏览方式。考虑目标用户的行为方式，行为方式是人们由于年龄、性别、国家、地区、种族、生活习俗、职业、受教育程度等形成的动作习惯

一致性原则

Web界面的内容和形式应一致，内容：网站显示的信息，如数据、文字内容等，形式：Web界面设计的版式、构图、布局、样式、风格、控件、字体、图标等，每个页面都使用设计规范的固有页边距，文图形之间保存相同的间距，图标与标题火符号旁边留下相同的空白，留白参考界面中的米勒定律，页面上的每个元素要与整个页面的设计风格一致，文字的颜色应和图像的颜色保持一致，并注意色彩搭配的基调，使用图标导航，则各个界面应当使用相同的尺寸图标，网页的形式为内容服务，不同内容的网页用不同的设计形式

简洁与明确

保持简洁的常用的做法是使用醒目的标题，使界面上使用设计四策略（删除、组合、隐藏、转移）注意颜色使用最好保持3种，主色：红、蓝、绿（可定其他颜色）辅助色：#333、#666、#999界面上的所有元素都有明确的含义和用途，三次点击原则：通常情况下，访问者应该最多通过三次点击就能在网站上找到想要的信息，主页的访问率为100人次的情况下，下一页的访问率会降到30-50人次

体现特色的原则

特色鲜明的网站更容易在一瞬间打动它的浏览器，留下令人心动的第一印象；应清楚Web网站用户的基本情况，从而在网站设计时做到有的放矢，呈现关键信息；利用逻辑结构有序组织、开发页面设计原型，通过测试和逐步精炼，形成网站的明确特点

良好的导航设计

导航系统是网站的路径指示系统，用于指导浏览者有效地访问网站；Web导航应该帮助用户理解他们在哪里、他们能去哪里、他们怎样获得其他信息。好的导航系统可以使用户以一种满意的方式找到需要的信息；导航系统的设计应从使用者的角度出发，力争简便、清晰和完整

兼容不同的浏览器

网站的浏览者可能使用不同类型和版本的浏览器，IE浏览器，是必备的，谷歌浏览器，火狐浏览器，百度浏览器等；以谷歌浏览器为开发版本依据，可能在其他的浏览器出现页面异常；根据用户浏览器分布情况来确定所面向的浏览器类别和版本，并在尽可能多的浏览器中测试网站通过使用HTML JS等编程工具或功能，测试用户浏览器的类型和版本等参数对于某特定功能的支持情况，然后根据探测结果显示适用于特定浏览器的网页内容