Web-UI设计，你需要了解的！

时间：2023-09-11 17:18:01 | 来源：网站运营

时间：2023-09-11 17:18:01 来源：网站运营

Web-UI设计，你需要了解的！：【摘要】对于很多从事 UI 行业的新人来说，web UI设计是一个充满未知的领域。因为多数人没有系统的学习 UI 知识，很多时候都只是凭借自己的感觉和经验去绘制界面，缺少完整的设计思想和体系化的内容，例如，对于画布的创建、规范的设置等没有一个清晰的概念，导致做出来的页面总是不那么尽如人意。本文整理汇总了一些网页设计相关的知识，帮助更多 UI 设计师了解网页设计的基础知识。

【作者】Molly

开始，我们不妨先来了解一些概念。

WUI: Web User Interface的缩写，可翻译为网页风格用户界面，在国外用语中，常使用短语User Interface Design for the Web.

UI就是用户界面，包括三个方向：用户研究，交互设计，界面设计。
WUI是网页用户界面。WUI设计与常见网站建设的区别是，WUI注重人与网站的互动和体验，以人为中心进行设计。

（1）Web的基本分类

根据不同的使用对象，设计会有所不同，设计理念也有所区别。

C端产品简称To C (To Customer)，就是面向个人用户提供服务的产品，考虑绝大部分用户使用场景和诉求，是直接服务于用户的，维度比较单一。为了降低用户的使用成本，操作起来相对比较简单，高级功能会相对少点。例如，门户网站（搜狐网，新浪网）、企业网站（公司官网）、产品网站（苹果，小牛）、电商（京东，天猫）、视频网站（爱奇艺，优酷视频）等。

B端产品简称To B (To Business)，就是面向商家、企业等提供的服务产品，是间接服务于用户的。B端产品一般较定制化，以业务为导向。可能有很多高级功能，突出高效，导致易学性打折扣。例如，网站后台（网站信息管理）、erp系统（企业管理）、SaaS（软件服务）、企业OA（办公自动化）等。

（2）布局方式

垂直布局（36氪）：一般为咨询类，新闻类网站，这种类型的网站，一般布局固定不变，承载的信息量很大。

流式布局（豆瓣）：这类布局适用类型非常广，形式很自由，千变万化。页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。

视差类型布局（qq官网），以qq首页为例，多层背景以不同的速度移动，形成了立体的运动效果，带来给用户出彩的视觉效果。 在网页设计中，成为网页设计的热点趋势，被国内外网站所应用，。成为了越来越热点的趋势。但是，如果加载速度很慢，那么用户体验就会很差。

全屏布局（cultldn），任何显示器都会被撑满屏幕。对于全屏展示的网页，又分为自适应和响应式。自适应是根据浏览器的分辨率大小，自动适配尺寸布满全屏，

对于后台设计，布满全屏的网页尺寸在当下的环境显得更为主流，因为后台的更新优化很频繁，固定宽度有时候很难满足交互需求。

瀑布流布局（花瓣），一般都是素材网站。

（3）关于屏幕分辨率

确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量。显示分辨率就是屏幕上显示的像素个数，屏幕尺寸一样的情况下，分辨率越高，显示画面就越精细，同样的屏幕区域内能显示的信息也越多。目前主流的屏幕分辨率如下：

据统计，2017年PC端的屏幕分辨率占比统计:

• 1920×1080 — 27.38%
• 1366×768 — 21.06%
• 1440×900 — 11.59%
• 1024×769 — 7.12%
• 1600×900 — 4.68%
• 1280×800 — 3.24%

由于分辨率的不同，在做网页设计的时候，需要考虑最小适配的屏幕，照顾到pc端的低分辨率机器。

正常情况下，如果显示器分辨率>画布大小，那内容能正常的被用户访问;如果显示器分辨率<画布大小，那么内容就无法显示完成。

对于一些非主流的设备，可以选择忽略，我们需要考虑的是多数人的需求。从2017年的屏幕分辨率占比例来看，1024以下的设备，使用的用户很少了。所以，设计之前，我们需要设定安全区域，目前常用安全范围：960px 、1000px 、1024px 、1200px。新浪安全区为1000px，能够满足绝大部分用户，淘宝京东的安全区域为1200px。960，1200是万能的数字，能被 123456整除。

（4）基本规范

一般情况，在项目初期，设计师需要建立出一套设计规范（主色调，字体等），之后的的设计工作，都要以此规范为基准

1.文字

一个网页的最基本要素：文字和图片，出现了文字，就会出现文字排版，字间距、字号、行高行间距、段间距大小设定，字体选择、字体颜色粗细等细节，而这些细节，往往是非常重要的细节。

a.字号

在界面设计中，文字字号决定了信息层次和权重，设计师需要给界面的文字建立视觉层级，将文字大致分为三类：主标题，次标题和正文。首先我们要设定基准字号（最小字号），十号甚至都能看清，但是差一点，所以12最然后可依据一定规律设定导航、标题等稍大字号。一般网页基准字号有12px、14px、16px等。

更新ing

---

欢迎关注 技术团队的本站账号 我们凭团队实例运作以下专栏， 必须干货！

互联网创业专栏 (我们小伙伴的创业历程)

与您一起聊技术 (APP、微信公众号、小程序、H5 技术总结)

互联网产品研发管理 (我们公司对产品结构的管理思路)

产品君的案例库（产品小伙伴深刻总结）