WEB UI 笔记

《破译 WEB UI》 - 笔记



一、页面安全宽度

宽度⼀直是设计中需要重视的⼀个⽅⾯,⽆论是 UI 还是开发,宽度的把控会直接影响整个项⽬。界⾯设计和前端开发都需要保证⽹⻚在某个分辨率下图⽚、⽂字、布局、按钮等元素的正常⽐例和正常显示效果,⽐例不能过宽或过窄,否则容易造成阅读障碍。那么在某个分辨率下,我们使⽤⼀个固定宽度值来作为基准进⾏设计和开发,这个固定值就是安全宽度。

安全宽度和高度(仅作为参考数据)

分辨率(像素) 安全宽度范围(像素) 推荐值
宽度(像素) 高度(像素)
1024 × 768 980 ~ 1002 980 548
1280 × 800 1190 ~ 1200 1190 580
1366 × 768 1200 ~ 1331 1200 548
1440 × 900 1200 ~ 1405 1200 或 1331 680
1920 × 1080 1200 ~ 1405 1200 或 1331 855
2560 × 1600 1689 ~ 1885 1689 1220
如果前端开发基于Bootstrap框架,则PC端设计稿的安全宽度如下:
Bootstrap 3.x :1170像素
Bootstrap 4.x :1200像素





二、首屏页面的安全高度

首屏高度也可以说是页面的安全高度 这里既然说到安全高度,那必然会涉及图片尺寸。无论是首屏还是第 2 屏、第 3 屏……,都可能用到高清的大尺寸图片,这个图片的高度并不等于首屏高度(768 像素),而是约等于创建 PSD 画布大小时的基本分辨率(1920 像素 ×1080 像素)的高度(1080 像素)。再说直白一点,相当于我们在网页界面看到的图片尺寸是 1920 像素 ×768 像素(实际上这个图是 1920 像素 ×1080 像素)。为了将图片的「主要文字和内容」区域尽可能显示完整,图片的高度才需要控制在 768 像素范围内。这样做的好处是:在不同分辨率的显示屏下,能保证这个大尺寸图片的核心内容不会因为屏幕太矮而被剪裁掉,保证图片的关键信息能够完整地呈现给用户。

全屏图片尺寸及首屏参考线 (仅作为参考数据)

图片尺寸 首屏参考线高度参考值 图像可视区、核心内容区安全高度参考值 说明
1280 × 850 850 620 -
1366 × 768 768 560 -
1680 × 1050
1440 × 900
900 710 -
1920 × 1080
1920 × 1200
1080 855 常用
2560 × 1600
1920 × 1200
1600 1220 常用于 Retina 屏





三、网页组成模块

将常见的网页中的基本模块(也可以称为组件)列出来,在设计过程中脑子里一定要有一个框架。通常网页的这些组成模块,在前端开发过程中都需要使用语义化的英文,所以这里列出了中英文对照。

网页组成模块的中英文

Navigation 导航
Header 头部区域、页头
Body 内容主题
Page Title 页面标题
Breadcrumb Navigation 面包屑导航
Paging Navigation 分页
Page 页面标题
Footer 底部区域、页脚
Logo or ldentity 网站标示、网站名称
Copyright 版权声明、版权信息区域
Banner 横幅区、由符号、图形、口号、材质等元素组合而成





四、Web 安全字体

安全字体是 Web 设计规范中必须要知晓的一个概念。在设计和开发 Web 时应该确保网站在大多数将要访问的计算机上看起来舒服。大多数用户会使用 Windows 或 Mac 系统来浏览网页两种操作系统都带有预先安装的字体这些字体应该作为网页的首选字体。如果默认的字体无法满足需求应该尽量避免第三方中文字体适当使用第三方英文字体(如 Google Fonts)。如下表展示的是不同的操作系统中预装的常用于 Web 渲染的字体这里没有将过旧版本的系统字体列出。表格仅供参考。

网页默认常用安全中文字体

Windows 系统 MacOS 系统
微软雅黑:Microsoft YaHei(as of Win7+) 苹方:PingFang SC
黑体:SimHei 冬青黑体简体中文:Hiragino Sans GB
宋体:SimSun 华文细黑:STHeiti Light、STXiher
新宋体:NSimSun 华文黑体:STHeiti
仿宋:FangSong 华文楷体:STkaiti
楷体:KaiTi 华文宋体:STSong
仿宋_GB2312 华文仿宋:STFangsong
楷体_GB2312
备注:考虑到前端开发需求,越往上的文字优先级、美观度越高,
低版本操作系统可能会丢失一些美观度较高的字体



网页默认常用安全英文字体

Sans Serif Web Safe Fonts
(无衬线安全字体)
Serif Web Safe Fonts
(衬线安全字体)
Monospace Web Safe Fonts
(等宽安全字体)
Helvetica(最安全) Courier Menlo
Arial Courier New Monaco
Tahoma Georgia Consolas
Trebuchet MS Times Courier
Verdana Times New Roman Courier New
Arial Black Palatino
lmpact Garamond
Bookman
备注:考虑到前端开发需求,越往上的文字优先级、美观度越高,
低版本操作系统可能会丢失一些美观度较高的字体





CSS 常用字体 (font-family) 组合参考

字体类型 组合写法
英文 Helvetica Neue","Helvetica",Arial,"sans-serif
中文 "PingFang SC","Hiragino Sans GB","STXiher","Microsoft YaHei","SimSun","Simhei"
中英文 -apple-system,"PingFang SC","Hiragino Sans GB","Helvetica Neue",
Arial,"Microsoft YaHei","WenQuanYi Micro Hei","sans-serif"
备注:考虑到前端开发需求,越往上的文字优先级、美观度越高,
低版本操作系统可能会丢失一些美观度较高的字体





前端中的 CSS 样式指定了字体序列为:-apple-system,「PingFang SC」,「Hiragino Sans GB」,「Helvetica Neue」,Arial,「Microsoft YaHei」,「WenQuanYi Micro Hei」,sans-serif。这意味着在 Mac 系统下网站的中文字体将优先使用系统默认的苹方字体,在 Windows 系统下网站的中文字体将优先使用系统默认的微软雅黑字体。英文字体则优先使用 Helvetica Neue。

          
  1. font-family:-apple-system,"PingFang SC","Hiragino Sans GB","Helvetica Neue",Arial,"Microsoft YaHei","WenQuanYi Micro Hei","sans-serif"





五、图片命名格式参考

Web 的前后端开发,都需要使用语义化的英文,便于维护和理解。那么我们在设计 UI 界面时,也需要对图层、文件和文件夹命名,下面,列出一些常见的条目给大家做参考。

people.jpg——单一词汇

people-boy.jpg——复合词

people-school-boy.jpg——复合词 + 属性

people-job-boy.jpg——复合词 + 属性

people-job-boy-f.jpg——复合词 + 一级属性 + 二级属性

people-job-boy-b.jpg——复合词 + 一级属性 + 二级属性

people@2x.jpg——Retina 图片两倍大小原图

people@3x.jpg——3 倍大小原图

people_boy.jpg——复合词(使用下划线)

people_school_boy.jpg——复合词 + 属性(使用下划线)

people_job_boy.jpg——复合词 + 属性(使用下划线)

people-school_boy.jpg——复合词 + 属性(使用下划线和横杆)

people-job_boy.jpg——复合词 + 属性(使用下划线和横杆)






六、常见文件夹命名参考

assets——网站资源(images、css、js、fonts 文件夹也可以放在此文件夹中)

images——图片

img——图片

fonts——字体

icons——图标

css——CSS 样式

sass——SASS 样式

js——脚本文件

core——核心文件

functions——功能文件

themes——主题

plug-ins——插件

admin——后台管理

documentation——说明文档

licensing——许可证

demo——演示




Web UI