网页ui设计师需要掌握哪些知识
职业技能 / 设计培训 / UI/UE培训
-
91搜课网
2022-01-09 14:23
页面的大小设置与屏幕分辨率和浏览器有关，我们不可能达到最好的大小，但是我们可以做的是让大多数用户觉得最好。利用统计分析工具获得用户屏幕分辨率的数据，以供设计时参考。比如用GoogleAnalytics获得用户的屏幕分辨率数据。
网页设计师是当今非常流行的职位，不仅仅要知道常见的UI设计知识点，为了能在日常工作中与web前端工程师更有效地合作，肯定会在专业上达成共识，才能达成共识。网页UI设计要掌握以下知识：
1.尺寸
页面的大小设置与屏幕分辨率和浏览器有关，我们不可能达到最好的大小，但是我们可以做的是让大多数用户觉得最好。利用统计分析工具获得用户屏幕分辨率的数据，以供设计时参考。比如用GoogleAnalytics获得用户的屏幕分辨率数据。
移动端适配
手机端可以根据业务需求和产品特性选择应答式，还是独立移动版，对页面结构和功能都比较简单的网站，适用于响应式，对于大型业务复杂的网站，移动端推荐独立版本设计。用rem单位移动端字体大小来适应不同的手机的分辨率，保持整体的比例。移动端适配原则：文字流动，控制弹性，图象等比例。
屏幕适配功能。
设计者可以产生2倍大小的图像元素，例如logo、icon、固定位图片，前端利用MediaQuery来实现Retina高清屏幕的适配。
2.字体
跨平台字体设置，力图在各种操作系统下实现最优显示。
字体家族
英文字体：PingFangSC(iOS优先),HiraginoSansGB(替代字体),MicrosoftYaHei(次、次字体)。
英文字体：HelveticaNeue(优先字体),Helvetica(替代字体),Arial(备用字体)。
字型说明
制定字体使用规范，例如：主标题、次标题、小标题、正文、辅助字、连结文字等的字号、颜色、样式等。补充字体大小不能小于12px，标准字体可以被转换为字体图标，特殊字体可以使用WebFont。
3.排版
留意行、段、标点和空白、对齐、文字长、层次引导。
行高和段落
行高是字体大小的1.5倍。段落距通常是字号的一倍宽。
4.色彩
在设计中对色彩的运用，首先要考虑品牌层面的表现，另外很重要的一点是色彩的运用要达到信息传递、动作引导、互动反馈，或者是某个要素的目的。所有色彩的选择和使用都要有意义。
色彩和交互
当交互性行为中需要改变颜色时，建议采用增加黑、白两色，并按n+5%的规则递增。下面是一个例子，当鼠标hover某一特定元素时，将其视为浮起，相应的颜色就相应增加了白色叠加，而相反的点击行为可以理解为将其往下按压，颜色相应地增加黑色叠加。
5.布局
按照尺寸规则、交互作用以及视觉效果原则，推荐布局网格系统。
栅格系统
在大多数情况下，12列栅格系统，比如Bootstrap的栅格系统，支持把一行分成1、2、3、4、6列等等，并且拥有强大的响应式布局。
6.动画
需要了解一些常用的动画效果，实现技巧，以及js的动作库，如：隐含、缩放、移动、伸缩、摇摆等，方便与前端交流。
来自
本文仅代表作者观点。未经许可，不得转载！
赞同
推荐课程查看全部
火星时代
AAA教育
益阳佳程软件
非凡进修学院
位置：北京91搜课网 > 学习攻略 > 网页ui设计师需要掌握哪些知识