超多干货!设计师和前端都需要了解的知识点大全

2017/05/18 8763

设计与前端的关系比较紧密,如何在日常工作中更加高效的进行合作,一直是双方共同追求的目标。高效的合作方式,应该是双方具备专业上的共识、能进行有效的沟通、以及对效率工具的运用。

专业共识

这里的专业共识是指设计师和前端都需了解的知识点,双方在这些知识点上达成共识,有助于能更加畅通无阻的进行沟通交流。

一.  设计基础

尺寸 、字体、 排版、色彩、 布局、 动画。

1. 尺寸

一个网页的尺寸设置与屏幕分辨率和浏览器相关,我们不可能满足所有用户的最佳尺寸,但我们能做的是让绝大多数用户感觉是最佳的。

我们可以通过统计分析工具获取用户屏幕分辨率数据,从而为设计提供参考。例如使用Google Analytics 来获取用户屏幕分辨率数据。

目前常见页面尺寸

PC 端:960px / 980px / 1000px / 1190px / 1200px。

手机端:750px。

移动端适配

移动端可根据业务需求和产品特点选择响应式适配,还是独立移动版设计,对于页面结构和功能简单的站点,适用响应式,对于大型业务复杂的站点,移动端建议独立版本设计。移动端字体大小使用 rem 单位,以适配不同手机分辨率,保持整体缩放。移动端适配原则:文字流式、控件弹性、图片等比缩放。

Retina 屏适配

设计师将 logo、icon、固定位图片等图片元素生成 2 倍大小提供给前端,前端利用 Media Query 实现 Retina 高清屏适配。

2. 字体

进行跨平台的字体设定,力求在各个操作系统下都有最佳展示效果。

字体家族

中文字体:PingFang SC(iOS 优先)、Hiragino Sans GB(备用字体)、Microsoft YaHei(次级备用字体)。

英文字体:Helvetica Neue(优先字体)、Helvetica(备用字体)、Arial(次级备用字体)。

CSS Fonts

font-family:"Helvetica Neue"、Helvetica,"PingFang SC"、"Hiragino Sans GB”、"Microsoft YaHei"、"微软雅黑"、Arial、sans-serif。

字体使用规范

设定字体使用规范,如主标题、次标题、小标题、正文、辅助文字、失效文字、链接文字等字号、颜色、样式等。

补充

字号不得小于 12px,标准 icon 可转成字体图标,特殊字体可以使用 WebFont。

3. 排版

注意行高和段落、标点和空格、对齐、文案长度、层级引导。

行高和段落

行高默认为字号的 1.5 倍。段落间距一般为字号的一倍宽。

CSS 设定:

.paragraph {line-height:1.5;}

.paragraph p {margin:1em 0;}

PS 设定:

标点和空格

• 使用全角中文标点。

• 遇到完整的英文整句、特殊名词,其内容使用半角标点。

• 数字使用半角字符。

• 不重复使用标点符号。

• 中文和英文间需要空格。

• 数字与单位之间需要增加空格。 例外:度、百分比与数字之间不需要增加空格。

• 中文链接之间增加空格。

对齐

• 中文/英文居左对齐。

• 数字/小数点对齐。

• 冒号对齐。

层级引导

使用对比手法区分信息层次感,让用户第一眼获取所需信息。

4. 色彩

设计中对色彩的运用首要应考虑到品牌层面的表达,另外很重要的一点是色彩的运用应达到信息传递,动作指引,交互反馈,或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。

色彩和交互

在交互行为中需对色彩做变化时,建议采取在颜色上添加黑色或者白色并按照 n+5% 的规律递增的方式来实现。以下图为例,当鼠标 hover 某个特定元素,就视为浮起,对应颜色就相应增加白色叠加,相反点击的行为可以理解为按下去,在颜色上就相应的增加黑色的叠加。

5. 布局

在布局时遵循尺寸规则、交互和视觉原则,建议使用栅格系统进行布局。

栅格系统

最常见的是 12 列栅格系统,例如 Bootstrap 的栅格系统,支持将一行分成 1 列、2 列、3 列、4 列、6 列等,并提供了强大的响应式布局方案。

栅格系统好文:《新手科普文!每个设计师都该懂的栅格系统基础六要素》

6. 动画

设计需了解一些常见动画效果、实现手法、和 js 动效库,例如:渐隐、缩放、移动、伸缩、摇摆等,便于和前端沟通。

进阶好文推荐:

  1. 《腾讯超全干货!如何让你的动画更自然?》
  2. 《技术干货文!深聊界面设计中的动画原理》
  3. 《成为懂技术的设计师!教你如何让界面动画自然流畅》

二. 十大原则

亲密性、对齐、 对比、 重复、直接了当、 足不出户、 简化交互、提供邀请 、巧用过渡、 即时反应。

1. 亲密性

如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元。反之,则它们的距离就应该越远,也越像多个视觉单元。亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。

纵向设定小、中、大三类间距,它们的关系 Y=10+10*N,横向间距视具体情况而定。

2. 对齐

文案类对齐

如果页面的字段或段落较短、较散时,需要确定一个统一的视觉起点,一般文案左对齐。

表单类对齐

冒号对齐(右对齐)能让内容锁定在一定范围内,让用户眼球顺着冒号的视觉流,就能找到所有填写项,从而提高填写效率。

数字类对齐

为了快速对比数值大小,建议所有数值取相同有效位数,并且右对齐。

进阶版的对齐方法:《基础小科普!聊聊界面中常用的对齐形式》

3. 对比

主次关系对比

为了让用户能在操作上(类似表单、弹出框等场景)快速做出判断, 来突出其中一项相对更重要或者更高频的操作。

总分关系对比

通过调整排版、字体、大小等方式来突出层次感,区分总分关系,使得页面更具张力和节奏感。

状态关系对比

通过改变颜色、增加辅助形状等方法来实现状态关系的对比,以便用户更好的区分信息。常见类型有「静态对比」、「动态对比」。

看完这篇你绝对能用好「对比原则」:《设计基础功!帮你彻底掌握设计四大原则中的对比原则》

进阶版的对比方法:《实例教学!利用「对比原则」做出抢眼设计的20个方法》

4. 重复

相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。

重复元素可以是一条粗线、一种线框,某种相同的颜色、设计要素、设计风格,某种格式、空间关系等。

5. 直截了当

需要在哪里输出,就要允许在哪里输入,不要为了编辑内容而打开另一个页面,应该直接在上下文中实现编辑。常见方法有单字段行内编辑、多字段行内编辑、直接拖放、直接选择等。

单字段行内编辑

当「易读性」远比「易编辑性」重要时,可以使用「单击编辑」。当「易读性」为主,同时又要突出操作行的「易编辑性」时,可使用「文字链/图标编辑」。

多字段行内编辑

编辑模式在不破坏整体性的前提下,可扩大空间,以便放下「输入框」等表单元素;其中,在 Table 中进行编辑模式切换时,需要保证每列的不跳动。

6. 足不出户

能在这个页面解决的问题,就不要去其它页面解决。

覆盖层

二次确认覆盖层:避免滥用 Modal 进行二次确认,应该勇敢的让用户去尝试,给用户机会「撤消」即可。

嵌入层

列表嵌入层:在列表中,显示某条列表项的详情信息,保持上下文不中断。

流程处理

渐进式展现:基于用户的操作/某种特定规则,渐进式展现不同的操作选项。

配置程序:通过提供一系列的配置项,帮助用户完成任务或者产品组装。
弹出框覆盖层:虽然弹出框的出现会打断用户的心流,但是有时候在弹出框中使用「步骤条」来管理复杂流程也是可行的。

7. 简化交互

费茨法则:如果用户鼠标移动距离越少、对象相对目标越大,那么用户越容易操作。

实时可见工具

如果某个操作非常重要,就应该把它放在界面中,并实时可见。

悬停即现工具

如果某个操作不那么重要,或者使用「实时可见工具」过于啰嗦会影响用户阅读时,可以在悬停在该对象上时展示操作项。

开关显示工具

如果某些操作只需要在特定模式时显示,可以通过开关来实现。

交互中的工具

如果操作不重要或者可以通过其他途径完成时,可以将工具放置在用户的操作流程中,减少界面元素,降低认知负担,给用户小惊喜。

可视区域 ≠ 可点击区域

在使用 Table 时,文字链的点击范围受到文字长短影响,可以设置整个单元格为热区,以便用户触发。当需要增强按钮的响应性时,可以通过增加用户点击热区的范围,而不是增大按钮形状,从而增强响应性,又不缺失美感。

8. 提供邀请

邀请就是引导用户进入下一个交互层次的提醒和暗示,以表明在下一个界面可以做什么。

静态邀请

引导操作邀请:一般以静态说明形式出现在页面上,不过它们在视觉上也可以表现出多种不同样式。 常见类型:「文本邀请」、「白板式邀请」、「未完成邀请」。

漫游探索邀请:是向用户介绍新功能的好方法,尤其是对于那些设计优良的界面。但是它不是「创口贴」,仅通过它不能解决界面交互的真正问题。

动态邀请

悬停邀请:在鼠标悬停期间提供邀请。

推论邀请:用于交互期间,合理推断用户可能产生的需求。

更多内容邀请:用于邀请用户查看更多内容。

9. 巧用过渡

在界面中,适当的加入一些过渡效果,能让界面保持生动,同时也能增强用户和界面的沟通。

在视图变化时保持上下文

滑入与滑出:可以有效构建虚拟空间。

传送带:可极大地扩展虚拟空间。

折叠窗口:在视图切换时,有助于保持上下文,同时也能拓展虚拟空间。

解释刚刚发生了什么

对象增加:在列表/表格中,新增了一个对象。

对象删除:在列表/表格中,删除了一个对象。

对象更改:在列表/表格中,更改了一个对象。

对象呼出:点击页面中元素,呼出一个新对象。

改善感知性能

当无法有效提升「实际性能」时,可以考虑适当转移用户的注意力,来缩短某项操作的感知时间,改善感知性能。

10. 即时反应

「提供邀请」的强大体现在交互之前给出反馈,解决易发现性问题;「巧用过渡」的有用体现在它能够在交互期间为用户提供视觉反馈;「即时反应」的重要性体现在交互之后立即给出反馈。

查询模式

自动完成:用户输入时,下拉列表会随着输入的关键词显示匹配项。 根据查询结果分类的多少,可以分为「确定类目」、「不确定类目」两种类型。

实时搜索:随着用户输入,实时显示搜索结果。「自动完成」、「实时建议」的近亲。

微调搜索:随着用户调整搜索条件,实时调整搜索结构。

反馈模式

实时预览:在用户提交输入之前,让他先行了解系统将如何处理他的输入。

渐进式展现:在必要的时候提供必要的提示,而不是一股脑儿显示所有提示,导致界面混乱,增加认知负担。

进度指示:当一个操作需要一定时间完成时,就需要即时告知进度,保持与用户的沟通。

点击刷新:告知用户有新内容,并提供按钮等工具帮助用户查看新内容。

定时刷新:无需用户介入,定时展示新内容。

11.设计规范

遵循设计环境规范

按设计环境规范进行设计,如:Web、iOS、Android 设计规范。遵循文件命名及画板图层命名规范。

命名规范:《提高工作效率!可能是最全面细致的设计文件命名规范》

iOS设计指南:

  1. 《UI设计师必读的IOS 10人机界面设计指南 (一)》
  2. 《UI设计师必读的IOS 10人机界面设计指南 (二)》
  3. 《UI设计师必读的IOS 10人机界面设计指南 (三)》
  4. 《UI设计师必读的IOS 10人机界面设计指南 (四)》

建立设计规范

例如:配色系统(主色调一般为品牌色、确定产品定位,整体风格,字体颜色等);信息系统(字体排版,图标,层级区分等);布局系统(栅格系统,间距等);控件系统(按钮,表单控件等)。

设计规范参考:内部教程!超实用6步透视网易设计规范(附完整PDF下载)

生成设计文档

Style Guide(PDF 格式,风格指南);UI Kit(PSD 格式,PS 调取);标注图(PNG 格式,前端参考)。

相关教程:《如何制作实用美观的设计文档》

三. 有效沟通

1. 前期 · 多方确认

设计前审核原型,与产品和技术人员做好交流,进行功能评估,确认实现难度。视觉定稿前,与产品和技术人员进行确认,确保视觉稿是可实现的。有必要的话,提供前端效果插件。

2. 中期 · 视觉规范

设计生成视觉规范和标注说明,提供给技术人员做参考,确保首次还原效果至少在 80% 以上。

提高视觉还原度的技巧:《实用干货!视觉设计师如何让设计效果高还原度落地?》

3. 后期 · 还原跟进

技术人员初步完成页面实现后,设计师需要主动跟进还原,并反复验收跟进。

四. 效率工具

好工具能优化工作流程,解放生产力,提升工作效率,这里列举一些常用工具和插件。

设计工具:Sketch

快捷键:Cheat Sheet

PS 插件:栅格布局 Velositey、切图 Cutterman

标注工具:Markman、Size Marks、Zeplin、Sketch Measure

Chrome 插件:

WhatFont  —  识别网页所使用的字体。

Page Ruler  — 获取网页中元素大小、位置信息。

Browser Resize  — 模拟各种分辨率。

Wappalyzer  — 用于识别网站使用的库和框架。

PerfectPixel  — 叠加插件,与设计稿进行对比。

ColorZilla — 拾色器。

更多插件:《为设计师专属打造的11个CHROME 扩展插件》

欢迎关注丁香园的微信公众号「DXYdesign」



【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量200万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/knowledge-designer-frontend-need-know

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里