网页设计

如何高效地进行网页设计？重点关注这7个要素 - 优设网 - UISDC

大家好，我是 Clippp。今天为大家分享的是「网页设计要素」。关于网页设计，之前分享过网页布局：用一篇文章，带你了解 12 种常见的网页布局设计

加上这次设计要素的分享，网页设计系列的文章正在慢慢完整起来，希望能让你有所收获～

把握中心目标

大多数网页设计是以目标为导向，也就是网页做出来能为用户提供什么、能解决用户的哪些问题。例如电商网站的终极目标是卖出更多的商品，资讯类网站的目标是让用户能更多地阅读最新讯息，目标不同，两类网站在设计上也会有截然不同的差异。

在设计上，电商网站会更注重页面氛围的营造，把红红火火的促销氛围搞起来，用户看到会更兴奋。

在电商网站中，设计重点放在帮助用户浏览店铺并轻松找到特定商品上，放在详情页上用尽可能好的方式展示商品；付款流程也经过简化和仔细计算(例如某宝最近更新的订单页把价格聚集在一起)，因此用户不需要经过太多思考就能快速下单购买。

打造平衡的效果

网页中炫酷的视觉效果能让用户印象深刻，但效果实现需要付出更成本。能明确知道什么时候更简洁的视觉效果能让整个设计变得更好，能让用户专注于正确的事情，这一点很重要。

有时候在网页中添加过多元素，会分散有价值的信息，用户也难以识别他们想看的内容。

对齐和对称是页面保持平衡的重要因素。对齐既保证了布局统一，又将有联系的元素紧密连接起来；对称营造一种平衡的感觉，元素整齐有序。

网站的登录注册页往往都设计得很简洁，有大面积的留白处理，只保留关键的信息输入框，这样用户能更专注于输入内容。

在宜家网页中，清晰的视觉层级结构以及留白的运用让整个页面看起来非常整洁有序。好的结构能让用户知道他们在看什么，留白提供了视觉上的缓解作用，有助于引导用户的注意力。

了解基本的设计原理

格式塔原理基本上定义了我们感知事物的六种不同的认知规则。在网页设计中，这意味着需要以一种合理的方式来安排元素，帮助用户从整体上理解设计。

设计中需要考虑不同元素的对齐关系、相似元素或按钮的排放位置、一组信息要如何展示、列表类信息该如何展示…

另一个重要的原则是希克定律，也就是向用户展示的选项越多，做出决定需要的时间就越长。因为我们的大脑需要考虑和分析所有选择，然后再选出最好的选择，当选择太多时，这就会成为一个问题。

这就像我们在餐厅里点菜一样，如果拿来一个 20 页的菜单，我们可能会从头到尾把这 20 页全看了，仍然不知道该点哪个，然后又把这个 20 页的菜单重新翻一遍。去餐厅吃饭是件放松高兴的事，我们肯定不想在点餐上给自己带来压力，这样吃饭的乐趣也会大打折扣。

如果需要填写很长的表单，考虑将长表单拆分成几个短的问题，让用户按步骤依次作答，避免一下看到过多问题给用户带来负担。

了解面对的用户

网页设计需要知道面对的用户是谁、他们想获取什么、想处理什么问题以及他们是想法是什么等等。

对最终用户的印象越清晰，越有可能创造出成功的设计，就像设计一个面向儿童的网站与设计一个供老年人使用的网页会完全不同。所以在一开始，要先学会把自己的观点先放在一边，倾听目标用户的意见，然后再慢慢验证自己的想法。

抖音千人千面的推荐机制，能为用户精准推送他们感兴趣的内容，把握住了用户的兴趣，产品才能越来越受欢迎。

排版很重要

排版需要长期的积累和沉淀，如何合理地安排页面中的品牌标识、图片、文字等元素，是始终需要考虑的事。比如不管网页设计的目标是什么，或者选择什么样的视觉效果，在选择字体时我们总要考虑字体的粗细、大小或对比度等因素。

根据设备不同，最佳字体的选择可能会发生变化。在移动端设计中，文字可读性是首要的，屏幕越小越要保证信息的可读性。

信息架构和导航

网页的导航设计和信息架构共同构成了产品的主干，让用户能够了解产品和功能并找到需要的信息。

无论信息的长短如何，合理的层级结构有助于在产品中创建逻辑结构，以便用户可以查找信息。导航能反映出产品架构，这样用户无需花费大量精力，就能轻松找到主要信息和功能。

点击按钮之后会切换到哪一页、怎么返回到当前页、点击哪些按钮页面不跳转。架构流程不仅自己要明确，更需要用户看得懂。

降低认知成本

咱们前面提到，如果面临的选择太多，就需要经过大量思考，这样用户很可能会变得有压力甚至困惑。其实这里面还包含着另一层意思，过多的选择会增加用户的认知成本。

只有降低认知成本，才不会给用户带来过多压力，才能快速做出判断。在网页大框架已经设计好的基础上，降低认知成本的地方往往更在于细节。

准确拿捏细节。在面包屑导航中，鼠标悬浮上去是一种状态，点击后又是一种状态；选中的标签与未选中的标签在颜色上做出区分；当前页码重点突出的同时，告知用户前后页码还支持左右切换。

最后为大家精选了网页设计 Web UI Kit 源文件，包含 5 套网页模板、30 个不同的组件、3 种颜色模型，很难得又很实用的一份资源，涵盖了大部分的设计场景，赶快下载使用起来～

慢慢来比较快，希望对你有所帮助！

欢迎关注作者微信公众号：「Clip设计夹」