2020年：浅谈UI界面设计的方案

UI 设计的魅力在于，你不仅需要适当的技巧，更要理解用户与程序的关系。一个有效的用户界面关注的是用户目标的实现，包括视觉元素与功能操作在内的所有东西都需要完整一致。为了实现这个目标，你需要问自己11个最基本的问题。

一.我们先来看看关于UI设计的11问

用户来到你的站点，脑子里会保持着一种思维习惯，你的UI需要保持一致，以免用户的思维方向被打乱。比如，如果你的某个品目下的产品可以拖放到购物车，那你站点中所有产品都应该可以这样操作。将按钮放到不同页面相似的位置，使用相契合的配色，使用一致的语法和书写习惯，同时，让你的页面拥有一致的结构。

1.用户可以自由掌控自己的操作？你应当分析一下，自己的站点是否容易导航。用户应当可以自由掌控自己的浏览行为，确保他们能从某个地点跳出，能够毫无障碍地退出。那些在用户离开前弹出窗口的行为是 UI 易用性的一个大问题。

2.知道属于你的用户有哪些？要设计有效的 UI，必须对你的用户群有所了解，不同的用户阶层对不同的设计元素有不同的理解，17~25 岁年龄段的人，和 40~55 年龄断的人有不同的喜好。你的 UI 设计必须针对你的用户群进行设计。

3.能防止BUG的出现？应该尽可能检查程序中的错误和 BUG，虽然你可以弹出一个窗口告诉用户发生了什么，但为了更好的用户体验，最好减少这些东西。Beta 测试是消减错误的最好方法。

4.能否把重要的信息第一时间让用户看到？将重点放在重要的内容上面，首先为用户展示最重要的内容，以便用户更好地理解你的内容。

5.您的设计是什么风格？很多站点的设计十分简约，简约设计可以增强 UI 的易用性，可以让用户不必关心那些无关的信息。你的 UI 应该是这样的，它的功能很强大，但设计很简约，拥挤的界面，不管功能多么强大，都会吓跑用户。

6.能不能使用了视觉提示？如果你使用了 Ajax， Flash 一类的技术，当内容在加载的时候，应当提供视觉提示，应当始终让用户知道目前在做什么。

7.你的 UI 是否有操作提示？你的用户是否靠自己研究或 FAQ 文档学习如何操作？你应当在 UI 现场提供简单的操作提示，比如，使用 jQuery 在你的各个 UI 元素上显示操作提示。

8.你的内容是否清晰？确保你的文本准确，清晰，易懂。

9.你如何使用色彩？色彩是 UI 的重要元素，不同的颜色代表不同的情绪，你对色彩的使用应当和站点以及主题相契合。还应注意，有的用户是色盲，你应当考虑到他们的感受。色彩的使用应该一致，一旦选定了某种配色，就应该在整个站点一致使用这种配色。

10.你的 UI 是否大象无形？UI Engineering 曾经说过，”最好的设计不是用来看的，是用来体验的”。这意味着，你的 UI 应该让用户去体验，而不是放一些花哨的东西给用户看。UI 设计越简单，用户体验越好，不要滥用设计元素，不要使用拥挤的界面。

11.你的 UI 是否有良好的结构？你的 UI 中，各个元素应当放在他们应当放的位置，总体结构应当清晰，一致，相互关联，那些不相关的东西应当单独放置。            

二、我们再来看一个UI模板规范，在做B/S版应用程序时比较适用，其实这样的东西算不上什么正规的规范，只是为了适应我们现在面对的开发环境和组织流程做的一些权宜的努力，和解决了一些与程序沟通和接口的问题，尽量避免误会和摩擦。

一、适用环境和对象

本规范适用基于浏览器的B/S版软件项目开发工作。开发流程中的模版页面编写和模版文件套用工作必须遵照此规范执行。适用对象为开发编码人员、UI设计人员、模版编写人员、界面测试人员等。

基于客户端的C/S版软件开发工作不适用本技术规范。

二、必要性

本规范旨在制订开发编码人员和UI模版编写人员之间在工作交叉部分的技术标准，使他们遵循同 一操作规范，利于交叉工作的平缓顺利交接。以标准化方式，提高沟通和技术协作的水平，提高工作效率。减少和改变责任不明，任务不清，和由此产生的信息沟通 不畅、反复修改、重复劳动、效率低下的现象。

三、技术原则

代码规范化书写

代码规范化书写实现了脚本整体风格的一致，保证了同一个人不同时期 写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致。因为开发不可能在孤立中进行，所以代码规范化书写是项目组人员合作沟通 的前提。

数据层、结构层、表现 层分离数据内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。这里强调的“真正”，是指纯粹的数据信息本身。把信息内容以一种合适的 方式格式化，简言之就是页面排版，例如：分成标题、作者、章、节、段落和列表等，使内容更加具有逻辑性，条理清晰易读易懂，叫做“结构 (Structure)” 虽然定义了结构，但是内容还是相同的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西， 称之为“表现(Presentation)” “表现”的作用使内容看上去漂亮、赏心悦目、打动人心！所有HTML和XHTML页面就是由“结构、表现和行为”这三方面 组成的。抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，人对页面内容的交互及操作效果叫做“行为（Behavior）”,对于数据、结构与表现 相分离，最早是在软件开发架构理论中提出来的。UI设计师设计出页面模版，程序员负责内容数据的嵌入，数据可能是从数据库中提取出来，也可能是静态写入的 提示性文字，最后形成一个新的页面展示给软件操作者。模版文件的结构利用HTML＋XHTML标签来定义，而所有涉及表现的东西通通剥离出来，把它放到一 个单独的文件里，这个单独的文件就是CSS。

数据、结构与表现相分离的好处是：

程序员不需要过多的思考页面显示问题，而只需要根据模版效果把数 据放入模版相应的位置。界面的结构和表现由UI设计师负责。填入结构的数据自觉套用设计好了的表现效果。最后呈现一个实现功能的完整界面。表现层 的分离保持整个软件界面视觉的一致性，使改版也变得非常简单，修改样式表就可以了；由于结构清晰，数据层相对独立，对数据的集成、更新、处理和再 利用也更加方便灵活；

四、代码 编写规范

（一）目录结构及命名 规则

A目录结构规范

1、 目录建立的原则：以最少的层次提供最清晰简便的访问结构。2、根目录一般只存放index.htm以及其他必须的系统文件3、在根目录中 原则上应该按照系统的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。根目录下的images用于 存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片4、所有JS,ASP,PHP等脚本存放在根目录下的 scripts目录5、所有CGI程序存放在根目录下的cgi-bin目录6、所有CSS文件存放在根目录下style目录7、 每个语言版本存放于独立的目录。例如：简体中文gb8、所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录9、temp 子目录放客户提供的各种文字图片等等原始资料，以时间为名称开设目录，将客户陆续提供的资料归类整理。

B文件和目录命名规范

1、文件命名的原则：以最少的字母达到最容 易理解的意义。2、每一个目录中包含的缺省html 文件，文件名统一用index.htm3、文件名称统一用小写的英文字母、数字和下 划线的组合，不得包含汉字、空格和特殊字符4、尽量按单词的英语翻译为名称。例如：feedback(信息反馈)，aboutus(关于我们) 不到万不得已不要以拼音作为目录名称5、多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔。例如：news_01.htm。注意， 数字位数与文件个数成正比，不够的用0补齐。例如共有200条新闻，其中第18条命名为news_018.htm

C图片的命名规范

1、 名称分为头尾两两部分，用下划线隔开。2、头部分表示此图片的大类性质。例如： 放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner ；标志性的图片我们取名为：logo ；在页面上位置不固定并且带有链接的小图片我们取名为button ；在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu ；装饰用的照片我们取名：pic ；不带链接表示标题的图片我们取名：title 依照此原则类推。3、尾部分用来表示图片的具体含义，用英文字 母表示。例如：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.4、有onmouse效果的图片，两张分别在原有文件名后加”_on”和”_off”命名

D其它文件命名规范

1、 js的命名原则以功能的英语单词为名。例如：广告条的js文件名为:ad.js   2、所有的CGI文件后缀为cgi。所有CGI程序的配置文件为 config.cgi

（二）　 html编写规则

一般原则：1、在编写模版文件，排布结构表格之前，要思考一个最佳方案，表格的嵌套尽量控制在三层以内；要考 虑程序套用的可实现性、通用性、灵活性、预见性，所有内容均采用积木式组织，可替换和删除，并对总体结构不会造成破坏性影响2、尽量避免 <colspan> <rowspan> 两个标记，经验表明，这两个标记会带来许多麻烦3、一个网页要尽量避免用整个 一张大表格，所有的内容都嵌套在这个大表格之内。因为浏览器在解释页面元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能 造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 <tbody>标记，以便能够使这个大表格分块显示4、排版中经常会遇到需要进行首行缩进的处理，不要使用全角空格来达到效果，规范 的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记，注意，一般情况下，请不要省略 </p> 结束标记5、原则上，我们禁止用 <img width=? height=?> 来人为干预图片显示的尺寸，而且建议 <img> 标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当 网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片 的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，务必在最后给 <img>附上 width 和 height 属性6、为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中尽量不要使用<br> 来人工干预分段7、 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外，汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号8、 为贯彻结构层和表现层分离的原则，严禁使用传统的HTML3.2/4.0控制表现的标签，例如<font>,<b>，还有本意用 于结构后来被滥用于控制表现的标签，例如：<h1>,<table>等。所有的字号都应该用样式表来实现，禁止在页面中出现 <font size=　> 标记，<b>　</b>　<h1>　</h1>标记，严禁在结构页面写表现标签9、不要在网页 中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。10、中英文混排时，我们尽可能的将英文和数字定义为 verdana 和arial 两种字体11、行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%12、 系统中的路径全部采用相对路径13、为保证系统和浏览器的兼容性，当设置背景图片时，要坚持用双引号。14、“网页大小”为网页的所有文 件大小的总和，包括HTML文件和所有的嵌入的对象。页面大小保持在34K以下为合适

温馨提示：转载发布内容如有侵权，请后台联系我们会在第一时间撤销，我们希望在资源共享的同时，与您共同维护互联网的良好生态，谢谢！