9种网页排版设计原则：让布局更高级
网页设计这件事儿, 大部分时间其实就是占百分之九十五的排版工作。你想想看, 把网页排版做好看了, 能让那些静态的图形突然活泛起来, 让人看着心里舒坦, 顺眼, 容易接受。不过在做这个事儿的时候, 你得琢磨的东西可不少, 比如整体样式、各种东西的大小、字体颜色这些细节都得考虑到。
还有一点很关键的就是, 设计师靠着网页排版这种手段, 能让文字不仅仅是用来读的, 更能增加美感, 显得独特, 这样也就能够唤醒人内心深处那种特别的情感体验。这篇文章实时地对九种常见的网页排版设计原则进行了总结, 希望能给各位提供一定的灵感。
以目标为导向
网页的排版设计工作, 依然需要保持高度对目标导向的侧重。拿电子商务网站这样一个典型的例子来说好了, 设计师在这个地方有相当大的操作空间, 可以努力营造出一特定的氛围, 去捕捉并能传达出商店灵魂所在的那些视觉元素。不过话说回来, 最终指向的那个目的, 始终都是一模一样的, 那就是为了实现产品的销售。
这个目标会决定设计师在网页排版设计的时候, 怎么去处理一些关键的决定。重点是要帮助用户去商店里搜索东西, 而且可以轻松地找到特定的商品。
就像即时设计社区里面的那个电子商务登录页面展示的一样, 大家在产品展示上投入了很多精力。这样做可以突出产品的纹理和细节, 让访问者几乎都不用怎么思考, 就可以直接购买商品了。
视觉元素平衡
在网页排版设计领域存在一些经常被使用的表现方法。
设计师们往往习惯于运用能够彰显视觉技巧的部分, 目的就是为了追求独特性和记忆点效果, 这些内容有时会被加入方案里, 可是重要的设计核心在于讲究协调统一的状态, 采用相对精简的视觉构成方式会让整体搭配变得更加合拍有序, 也能让操作者把注意力集中起来, 一旦到处都是杂乱无章的东西就会影响整体品质提升, 导致识别难度加大, 让用户找内容变得困难重重。
一个好的结构, 可以让用户马上明白他们正在看的是什么东西。拿即时设计社区里面的食品网页设计来做例子, 它的层次布局十分清晰,这样一来, 哪些元素是有关的, 就很清楚可见了, 同时, 那些重要的区域也能被突出显示出来。空白之处, 能够缓解一下视觉上的感觉, 还能够帮着引导用户的视线往该去的地方走。
食品网页设计源文件分享
https://js.design/community?category=detail&type=resource&id=62b055fe52ec8a1784ccc24e&source=bjh&plan=btt618
比例、位置和间距合理
网页设计师必须要熟悉设计规范, 格式塔理论定义了人们在视觉上感知事物的时候所具有的六种不同的认知规则, 这些规则重点针对的是那些相关联的元素组, 采用合理、标准化的方式去处理排版元素, 这样做能够协助用户从整体层面来理解设计作品在比例关系、位置分布和间距控制上的体现效果, 在为网页进行布局规划的过程中, 对空间进行有效且合理的分配, 这是每一位网页设计师都应具备的职业本能。
你可以把自动布局添加到画板以及组件的属性里面去。这种做法能够让你创建一种设计, 这种设计会随内容的增减而自动进行填充或者缩小, 从而实现重新排列的效果。在面对需要加入新的层级、需要容纳比较长的文字字符串、或者需要和设计的发展进度保持对齐的情况时, 这个功能对网页排版工作是很有用的。
了解设计对象
网页的设计者必须清清楚楚地明白访问网页的人到底是谁, 这些人在想要些什么, 他们需要去解决哪些实际问题, 以及他们脑子里在想什么事情, 只有当最终用户的具体形象变得相当清晰的时候, 才有可能真正搞好用户体验方面的设计, 在网页的排版和布局方面, 很多细节问题得看最终用户需求是什么, 而不是由设计师自己说了算, 理解设计目标这件事属于用户体验研究领域的一部分, 它要求设计团队付出努力去搞清楚用户的心情感受并且琢磨他们的思维逻辑。
选择合适的字体
毫无疑问, 使用恰当的字体可以彻底改变网页排版设计所呈现出的那种感觉。具备良好可读性的正文内容字体、以及能够吸引人们眼球的重点标题字体, 都会在潜移默化中影响整个网页的氛围。
字体的选用能够帮助企业加强品牌宣传, 建立起统一的视觉识别体系, 或者单纯地作为辅助手段, 与其他各种视觉元素进行结合并且提供支持。
即时设计里面自带了各种免费的、可以商用的中文网页字体, 你不需要去手动安装它就能够直接使用, 在做商业设计项目的时候根本不用担心会碰到侵权的问题, 要是觉得即时设计自带的这个云字体库没办法满足你的具体要求的话, 你还可以去安装那个叫做“字体助理”的东西, 然后通过它来从自己的电脑里导入那些已经安装在计算机上的网页字体, 这样做能够让你的设计工作拥有更多不一样、更丰富的选择。
即时设计风格里面的文本风格, 它包括了网页字体大小、网页字体厚度、行高以及字距调整这几个部分。在进行设计工作的时候, 通常是需要针对不同的文本内容去设置不同属性的。如果利用文本风格的话, 能够大幅提升设计效率。我们可以把文本风格应用到整个文本层上去, 也可以仅仅将其应用于图层里面的一部分文本。
保持网页设计移动友好
现在, 基于移动设备的设计已经发展成为网页设计的一个非常关键的组成部分。因为越来越多的人都在使用移动设备, 所以符合移动端友好的设计原则再也不是一种可有可无的加分项了, 而是变得非常有必要, 这是必须去做的事情。
布局的起点在于, 设计师需要对空间实施分配行为, 在此过程之中, 必要的组成部分应当获得优先对待的权利, 而其他的非核心元素则可以被安置到隐蔽的位置里去。
关于网页排版设计领域, 确实存在一个众所周知的典型实例, 那就是汉堡菜单的存在状态, 它始终处于导航区域视野范围之内的事实不容置疑, 然而其在视觉上所占用的物理空间却极其微小。
导航设计及信息架构
导航设计和信息架构共同构成了产品的支柱, 使用户能够理解产品和移动功能, 并找到他们需要的特定信息。首先, 规划信息架构包括视觉元素、信息和主要功能, 有助于在产品中创建逻辑结构, 无论信息有多小或多短, 用户都能找到信息。
其次, 导航需要反映信息架构, 这样用户就可以很容易地找到主要的信息和功能。一旦用户没法用上一个特别要紧的功能, 整个人的感受就不太对劲了。
将认知努力保持在低限度
认知努力实际上就是指用户去理解设计时所花费的脑力和精神劳动, 这一点我们之前就提到过。要是让用户费的心思太多了, 他们大概率会陷入不知所措、感到沮丧以及身心疲惫的状态之中。真正出色的网页排版风格通常是非常直观的, 而且让人觉得轻松自在, 一点也不费劲。
那么问题来了, 我们到底该通过什么样的办法来尽可能地降低用户的认知负担呢? 答案就是要去刻意地留出大量的空白区域来进行网页排版设计。保持足够的空白区域, 能够起到提升阅读质量的作用, 从而令使用者得以摆脱杂乱信息的干扰, 将注意力集中到设计团队所规划好的视觉引导路径上面去。
比如, 参考一下即时设计社区里面展示的Travel项目, 再看看goo旅游这个网站是怎么做的。我们可以看到, 那个深色背景的图片, 其实就相当于留出了一大片空白的区域。
这样一弄之后, 观众的目光自然而然就会跑到大屏幕正中间的位置去, 死死盯着那里的文字内容, 还有那些叫“CTA”的行动号召按钮。这么做, 就是为了把读者给引过去, 让大家都愿意去点击、去阅读更多的信息。
旅游出行网页设计源文件分享
https://js.design/community?category=detail&type=resource&id=65099d3a81cb27ad7112a156&source=bjh&plan=btt618
了解可用性测试的基础知识
可用性测试是任何一种设计过程中都非常关键的一个组成部分, 这是大家普遍都知道的网页排版设计原则中的一个内容, 这种做法旨在帮助我们发现设计和实际状况之间的不同之处, 也就是能够让我们知道用户心里所认为的设计团队想要实现的效果, 和他们真正需要的东西之间存在着的差距。
关于用户 testing 这一环节, 存在三种被广泛认可的主要测试方式类型。
进行探索性测试, 这是在项目开始之时所开展的一轮测试工作, 目的在于去弄清楚用户究竟是怎么行为的, 并且还要把导航这个主要支柱还有信息架构这个主要支柱给验证一下。
评估测试这种活动, 通常是在项目的过程中间进行开展的, 它的主要作用是来测量和判断可用性的相关状况, 从而为团队提供具体的方向去引导他们进行进一步的改进和优化。
比较测试通常会把一种由咱们团队自己设计的产品, 和另一种来自竞争对手的产品放在一起进行对比, 这种操作能够让我们清楚地看到对方在设计上存在的缺陷, 从而帮助我们去避免犯下同样的错误。
在读过前面的那些分享之后, 相信你对网页的排版设计已经产生了一些属于自己的观点和想法了。既然这样, 不妨打开即时设计这个工作台, 自己去动手试一试看。这里还有一个标签是#深度好文计划#。
https://ad.js.design/online/prototype/?source=bjh&plan=btt618
请小编喝杯咖啡吧！