界面设计包括哪些细节、如何深入？

12-15

我们常说“细节决定成败”，有些界面会让人觉得不精致，缺细节，而这些细节又包括哪些呢？如何去深入呢？感谢所有回答者。

谢邀，楼上的大师们都从规范和设计方向的细节上说了很多重要的了，我随便写点我能想到的小细节吧：

界面元素的对齐，我见过很多同学对齐是永远靠眼睛的。确实在布局的时候经常需要做到视觉上的对齐，而不是机械的对齐，但这不是界面元素可以随意摆放的借口，该对齐的内容需要对齐，有时候只是举手之劳，养成好习惯很重要，有点强迫症也不是坏事情。
像素精确，虽然现在的分辨率越来越高，但是很多图标、按钮的边缘还是最好都检查一遍保证垂直和水平边缘不会被虚化。
界面光源的一致性，一致性是个很大的课题，应该能写一篇论文那么长，细节方面的一致性应该包括界面元素、文字阴影、图标等的光源。假设深色的标题文字用了向下的淡色投影表现内凹效果，那正文就应该避免用深色的文字向上投深色的阴影
图标面积的一致性，这也是一个一直难以避免的问题，而且有很多主观成分，最好的方法是设计的时候放到实际屏幕上以较远的距离查看，是不是有哪些会特别轻或特别重，然后再去调整尺寸
文案，虽然这不是直接的界面设计元素，但是严谨、完整的文案也是给所有设计加分的。常见的问题有中文错别字、英文该大写的没大写、拼写错误等等
别直接使用 Windows 自带宋体/黑体里的英文！！！这个不解释
谨慎地使用高饱和度颜色、大差别渐变，我们 GUI 设计师总喜欢把自己当做艺术家，即使 GUI 真算艺术那也是限制最大的一门艺术（天朝的电影、电视剧不算。。。），大家大部分情况下遇到的设计场景没有非常大的颜色空间去发挥，所以一些醒目出跳的颜色和渐变使用起来要比较小心，否则很容易产生“俗气”的感觉
适当的留白，留白是个很好的东西，尤其是当老板 / 客户 / PM 要求你做一些“大气”的设计时候能成为一个很好的说辞，但是留白同时也很难掌握度，过度的留白有时候会起到反作用，让我们的作品看起来没有细节、内容空洞。就跟那些学画画的同学在电脑上画图经常水平镜像检查画面一样，有时候我也会把做到一半的设计去色、然后反白，看看那时候画面里的黑色会不会产生一种令人恐怖的感觉（好吧，我承认我是个很感性的同学，很多设计思路和方法都不够科学）。。。

想到再写。。。

当人们评价两套设计时，他们可能会比较容易的说“我觉得这个好一点”，但是具体好在哪里？他们有时候也说不出来，有时候只是“感觉上好一些”，这些“说不出来的”东西就是细节。

一个作品首先给人留下第一印象的往往是颜色，一个好的设计师，在选择某个颜色时一定会有他的理由，他想让用户感觉热闹或者宁静，就会精心挑选出相应的配色；偏执的设计师还往往会对一个颜色的明度或饱和度的高低纠结对比好几个方案，别人可能看不到，但是他自己心理是满足的；
国画讲究留白，设计也是如此。文字的行高间距，图文混排间的距离，会因为不同的包含关系（父级、子级、并列，标题、内容等）而略有差别。注重细节的设计师还会把小一些的字体的间距调宽一些，以方便用户阅读。
对于拟物形式的视觉设计，光影的处理很大程度上决定了细节的成败，高光、反光、投影等等不可少加，更不可滥加，要遵循自然中的光学规律。比如下面这两套icon展示，哪个看起来更舒服一些呢？

一些仿真icon可能还要根据材质的不同考虑到光的反射、漫反射。

对于平台性质的设计，它还有一个“视觉规范”贯穿整个设计过程，以保证整个平台视觉风格的统一性。例如平台中普通文本的字体、颜色、字号，重点文本的字体、颜色、字号，链接文本的……这些设计师在设计之前要做的心中有数，在设计过程中要遵循自己制定的规则（可能还要不断的修正），在完成设计稿后要及时输出视觉规范文档。

先写这么多，有时间回来修改。
ps：谢邀：）

首先，深入“细节”的前提是，“整体”没有问题，整体包括产品设计本身，交互方式，视觉布局（这些需要与相关人员彻底沟通）。如果在一个错误的整体上去完善细节，无疑是悲剧；（所以，有时候视觉设计感觉别扭，或许不是视觉设计本身的问题）

细节应该是含蓄的，包含在整体之内。好的细节不容易被用户的眼睛发现，只会让用户感觉很顺，很舒服；容易被发现的细节，是低劣的细节；

在我看来，界面设计的细节的包括：
一致性：

产品结构、交互方式、视觉布局的一致性；
视觉风格的一致性（色彩／图形／基础控件）；

含蓄：

一个词形容就是：润物细无声。否则，就是地摊货了。

如何深入：
无解。多看多实践吧。

UI 设计应该基于设计师对 UX 的设计，UX 才是 UI真正传达给用户的信息。细节工作应该交与设计专业的人处理。看你问这个问题估计你是想做UI的程序员，个人经验，这是错误的决定。如今 UX 几乎就是产品的一切，而不专业的设计，用户第一时间就能感受出来。若你是想学习制作 UI，先从美工开始学习吧，之后学习工业设计以及产品设计，最后才是学习UX, UI.

补充:

若要做 UI 设计师，那美工的功底首先是很重要的。若你本身是科班出身，那非常好，若不是最好进行系统的专业培训。其次就是对色彩的敏感与掌握。比如知乎这里，传统意义上的绘制很少，但是色彩却恰到好处。关于 UI，刚才有点没有说，就是流程设计，这里我指的是用户的操作流程，而非产品的逻辑流程，造作流程固然要符合逻辑流程，但是操作流程更注重细节，比如一个桌面程序窗口的展开动作，我对我们设计师的要求是做到50毫秒的精确（50ms, 对展开动作进行微调整时要求每次以 50 毫秒为调整单位），网络应用一样，文件上传成功的信息要如何传达给用户（popup 窗口？进度条？），要在什么时传达，传达后做什么？这些问题也是 UI 设计师应该考虑的问题。再就是多读相关的书籍和杂志也是很有帮助的。Smashing 出版的基本书都很不错，算是UX, Web UI 行业的精华（http://smashingmagazine.com/...）。有机会设计师也应该学习下相关的计算机技术（网络：JavaScript, HTML, CSS；桌面：根据公司情况，但若追求完美应该 wpf xaml 算是必须的；游戏：相关的 3D 建模与渲染；移动产品：根据平台，object-c, xaml, java 等等，当然现在也有平台支持 HTML, JavaScsript 和 CSS 的移动产品开发）学生么怎么学，用什么怎么用，最重要的还是要看公司本身的要求，自己也要可以提出合理的建议与改进，所以自己对行业与技术也要了解。

最近也在做界面设计，刚好看到一篇文章，供参考。

本文提供了小型软件的通用界面设计制作的一些方法和原则，以及相关问题的解决方案。

一：遵循一致的准则，确立标准并遵循

　　无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。
　　这样得到的好处：

　　1：使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解
　　2：降低培训、支持成本，支持人员不会行费力逐个指导。
　　3：给用户统一感觉，不觉得混乱，心情愉快，支持度增加

　　做法：

　　项目组有经验人士，确立UI规范：
　　·美工提供色调配色方案，提供整体配色表
　　·界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范：

　　控件功能遵循行业标准，windows平台参见《Microsoft 用户体验》(MSDN中有，中文已经翻译发行，项目组必须有一本)

　　控件样式在允许的范围内可以统一修改其样式、色调
　　参考其他软件先进操作，提取对本项目有用的功能，以使用，绝对不能盲从，漫无目的。
　　根据需要，设计特殊操作控件，准则为：简化操作、达到一定功能目的

　　·界面实施人员与美工商榷控件可实现性,(如不实行此步骤，将会导致各自对对方工作不满意，也会产生不一致的混乱)。重复叠代上述工作。
　　·建立合理化文档《UI标准》描述上述规范，
　　·强行界面设计者理解之，并作为开发准则，
　　·SQA人员进行监控开发人员是否遵循，及时告诫开发人员。

二：(Color)颜色使用恰当，遵循对比原则

　　1：统一色调，针对软件类型以及用户工作环境选择恰当色调：
　　安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等

　　2：如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表

　　3：色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，如"!"，"?"着重号，以及图标等

　　4：颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试

　　5：遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反差，而蓝色和白色反差很大。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。

　　6：整个界面色彩尽量少的使用类别不同的颜色

　　itop色表
　　具体标准参考美术学统计学术标准。
　　色表的建设，对于美工在图案设计、包装设计上起着标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。

三：(Resource)资源

　　一个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示图片、底图等。

　　1：也需要遵循统一的规则，包括上述颜色表的建立，图标的建立步骤也应该尽可能的形成标准，参考itop的outlookbar图标设计标准
　　2：有标准的图标风格设计，有统一的构图布局，有统一的色调、对比度、色阶，以及图片风格
　　3：底图应该融于底图，使用浅色, 低对比，尽量少的使用颜色。
　　4：图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物件，绝对不允许画出默认奇妙的图案。
　　5：鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况，例如某些软件中一个手的形状就有4钟不同的样子。

四：(Font)字体

　　使用统一字体，字体标准的选择依据操作系统类型决定。
　　中文采用标准字体，“宋体”，英文采用标准 Microsoft Sans Serif 不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。
　　字体大小根据系统标准字体来，例如 MSS字体8磅，宋体的小五号字(9磅)五号字（10.5磅）。
　　所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况
　　ITop采用BCB，所有控件默认使用 parent font，不允许修改，这样有利于统一调整。
　　·系统大小字体属性改变的处理。
　　Windows系统有个桌面设置，设置大字体属性，很多界面设计者常常为这个恼火，如果设计时遵循微软的标准，全部使用相对大小作为控件的大小设置，当切换大小字体的时候，相对不会有什么特殊问题。
　　但是由于常常方便使用点阵作为窗口设计单位，导致改变大字体后，出现版面混乱的问题。
　　这个情况下，应该做相应处理：

　　1：写程序自动调节大小，点阵值乘以一个相应比例
　　2：全部采用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体带来的麻烦。BCB/DELPHI中多采用这种方法，但是必然结果是和系统不统一。

五：(Text)文字表达

　　提示信息、帮助文档文字表达遵循以下准则：

　　1：口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字
　　2：断句逗号句号顿号分号的用法，
提示信息比较多的话，应该分段，
　　3：警告、信息、错误使用对应的表示方法
　　4：使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定。
　　5: 根据用户不同采用相应的词语语气语调，如专用软件，可以出现很多专业属于，用户为儿童：这可以语气亲切和蔼，老年用户则应该成熟稳重。制定标准遵循之。

　六：(STYLE)控件风格，不要使用错误控件，控件功能要专一

　　有设计好的同一风格的控件，如果没有能力设计出一套控件，则使用标准控件，绝对不能不伦不类，杂乱无章
　　·不要错误使用控件，例如：
　　使用Button样式做TTable的功能，拿主菜单条显示版权信息，
　　·统一类型的控件操作方式相同，例如一个控件双击可以执行某些动作，而同样控件，双击却没有任何反映
　　·一个控件只做单一功能，不复用
　　很多人为了写程序方便，喜欢把一个控件在不同情况下做不同功能用，这些对用户初次理解增加难度，只有用户熟悉后才能理解。
　　例如
　　改变红色选项，左边的参数代表不同的设置，可能由于为了节省控件或者编程量，但是只有熟练用户才回使用，这种情况下解决方法：

　　1:分组，使用双份控件.
　　2：使用TABLE页，给用户很明显的视觉变化

七：(ALIGN)控件布局，窗口不拥挤，按功能组合控件

　　1：屏幕不能拥挤
　　拥挤的屏幕让人难以理解，因而难以使用。试验结果(Mayhew,1992年)屏幕总体覆盖度不应该超过40％，而分组钟覆盖度不应该超过62％。
　　让人看上去，不能太拥挤，也不能太松散。
　　整个项目，采用统一的控件间距，通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁可留空部分区域，也不要破坏控件间的行间距。

　　2：区域排列
　　一行控件，纵向中对齐, 控件间距基本保持一致
　　行与行之间间距相同，靠窗体Border距离应大于行间间距(间距加边缘留空)。
　　当屏幕有多个编辑区域，要以视觉效果和效率来组织这些区域。

　　3：数据对齐要适当
　　说明文字，中文版应使用中文全角冒号，纵向对齐时，并按冒号右对其，如图。
　　纵向控件宽度尽量保持相通。并左对齐。
　　例如金额等字符穿应根据小数点对齐，或者右对齐

　　4：有效组合
　　逻辑上相关联的控件应当加以组合，以表示其关联性，反之，任何不想光的项目应当风格开，在项目集合间，用间隔对其进行分组，或者使用方框划分各自区域。
　　例如：以下界面，选择搜索方式来判断号码范围是表示主叫号码范围还是被叫号码范围，和入帐方式无关，则应该修改为：搜索方式和入帐方式调换位置。以免用户产生误解。
　　5：窗口缩放时，控件位置、布局：

　　为了使界面不出现跑版或者难看的局面的解决方法：
　　1：固定窗口大小，不允许改变尺寸，
　　2：改变尺寸的窗口，在Onsize的时候做控件位置、大小的相应改变。
　　BCB/DELPHI的VCL中，大部分控件有布局属性：
　　某些控件拥有alignment属性，可以用来做布局调节：TcustomPanel，Tmemo等，考左靠右靠上靠下以及撑满(Client)属性，用来根据版面自动调节。
　　大部分控件有属性Anchors，里面上下左右akLeft, akTop等如果为true，则表示相对各个边缘的距离是否改变。这个可以进一步设计好排版工作。

八：(TAB ORDER)TAB顺序

　　习惯用法，阅读顺序，从从左到右，从上到下
　　窗体中控件的Tab按键激活顺序，TabOrder,. BCB/DELPHI中使用窗体设计右键菜单选择taborder设置，VC中窗体RES编辑区域使用ctrl+D

九：(ShortcutKey Accelerator PopMenu)快捷键、加速键和弹出菜单

　　·快捷键：

　　1：全局快捷键菜单中加以描述 CTRL+XXX 并入帮助列表。

　　2：快捷键写入帮助，特殊说明，并在使用培训时强调使用

　　·加速键：

　　1：使用非破坏性缺省按钮，回车、ESC键的正确使用

　　一个窗体，有默认加速键，如回车表示激活当前窗口设置为default的按钮动作，esc表示关闭窗口。

　　在调用default按钮动作和关闭动作时候，不应该做有破坏性的操作，避免用户错误操作产生危害程度，例如不能把删除数据等功能的按钮作为缺省按钮。当用户要提交很多数据时，应该屏蔽esc，或者做退出提示，告诫用户是否保存提交。

　　2：可接收动作控件必须拥有加速键，统一加速键描述(A)

　　为结合键盘使用，可操作控件都应该有加速键，加速键定义准则，为英文单词第一个字母，如果同一窗体重复则用第二个字母，以此类推，则加速方式为alt+这个加速键，用统一的方法标识在界面中，如XXX(A) 或者wps的 http://A.XXX 英文可直接在字母下标识下划线 Cancel，

　　对于无法像button一样显示快捷键的Edit等控件，则在Edit描述的Label中显示快捷键。

　　·弹出菜单

　　辅助菜单必须在可视化界面上拥有对应的按钮或者菜单选项。

　　由于辅助菜单由用户点击鼠标左右键或者别的动作才能调出来显示给用户。无法清晰的显示给用户，所以对应选项应该可以通过别的途径得到,例如界面上有相应控件或弹出右键菜单的按钮等。

十：(ACTION)用户交互

　　1：disable而不是not visible

　　要使一个功能有时允许有时不允许用户使用，则这个控件的不能随便隐藏，应该使用disable属性进行表示，以免用户发现控件失踪后措手无策

　　2：窗口弹出位置要明显

　　点击一个控件，弹出窗口或者菜单，应该给人明显提示，最低要求是覆盖刚才点击的位置，让用户轻松跳转到新的界面。

　　3：执行动作要提示

　　给用户一个视觉感受的同时，写程序的时候应该注意用户的交互感受，UI作为人机对话的工具，用户做了任何动作，应该给用户一个视觉或者听觉、触觉提示。而且这个提示应该行明显，但不应提示过长，可以有以下几种方法：

　　当用户点击按钮等动作进行一个工作时：

　　1：弹出交互对话框让用户点击确认。
　　2：改变UI中控件参数提示：(处理不用用户确认的提示，有一定延时，或者用户按键后自动清除。)
　　如：改变标题栏字符串，显示“信息：提交成功”,或者专门设置一个状态栏、TLable等用来进行提示。
　　3：听觉提示：
　　在确定有声卡，用户可以听到声音的时候，发出特殊声音提示。一般作为重要提示的辅助。声音不应过长，紧急错误提示应该短促，频率较高，成功提示应该舒缓，轻松。等等……

十一：(HELP)联机帮助

　　什么时候要帮助，什么时候不要帮助

　　1：系统默认、行业标准的控件操作不需要逐一描述，只需要对特殊控件加以描述
　　2：特殊操作、特殊功能界面，在界面上加控件直接连接到对应的HELP文件中
　　3：特殊设置详细，应该在界面上用简洁明了的语句说明，或者是好用Tiptool，并由第二步帮助

　　帮助文档：

　　结构化，按功能模块划分

　　必须阐述功能通过什么方法可以在软件中实现

　　帮助文件是帮助用户更好的使用软件，措辞要恰当、简捷、通俗易懂,每一句话都应该有目的，帮用户解决问题

　　帮助文件不是广告、商业软件不允许打广告。描述公司信息目的是为了方便用户在没有办法的情况下找到售后支持，网址连接、信箱地址、电话号码绝对不允许无效。

十二：发行时阐明规则

　　对统一的东西进行逐一阐述，并加以典型描述，放入HELP和用户手册中，同时加有词汇表

　　附录：

　　美工何时参与进来：

　　美工作为界面美化的主要人员，不但拥有艺术设计、包装设计的才能，还应该穿插整个项目，给界面程序设计人员提出系统参考意见。

　　1：软件设计前期，美工参与需求了解，分析同类软件界面有缺点，提出主色调、典型界面风格、以及构思整个美术包装等。
　　2：界面原型设计过程中，与开发人员共同修改、商榷最终表现样式，以及确立UI标准。
　　3：程序开发过程中，提供标准风格的资源文件（icon,cur,bmp等），并总结出统一风格的资源的设计过程，形成规范文档* .
　　4：产品化方面，协助制作帮助文件、网站风格以及参与制作，制作附带宣传图片、动画、产品包装、海报等。

色彩配比。怎么针对产品定位与用户群体，选择合适的色彩。找到最能表达情感，让人最舒适的配色。界面设计不是海报招贴，不应该把附属变成主题。