网页设计综合指南 网页设计看这篇文章就够了 (网页设计综合实训)

本文目录导航：

• 《网页设计综合指南》：网页设计看这篇文章就够了
• 怎样经常使用易剖析剖析网站
• 视觉冲击的格调的网页要如何设计——干货

《网页设计综合指南》：网页设计看这篇文章就够了

设计师和开发人员在构建网站时，须要思考很多事件，从视觉外观到配置设计。

为了简化这个环节，咱们预备了这个指南。

限于篇幅限制，将这一指南分为三局部，此为第二局部内容。

本文关键内容为：二、设计页面2.1 内容战略2.2 页面结构2.3 视觉档次2.4 滚动操作2.5 内容加载2.6 按钮2.7 图像化2.8 视频2.9 行为照应按钮2.10 网页表单2.11 交互动画二、设计页面

2.1 内容战略

内容战略最关键的一点就是聚焦在页面目的上。

了解页面的目的，并依据目的布置内容。

上方是一些提高用户对内容了解的适用技巧：

防止消息超载。消息超载是一个重大的疑问。用户觉得有太多消息需消化，从而无法下选择或采取执行。有一些繁难的方法能最小化消息超载。一个罕用的方法就是分块——将内容分红几个模块，协助用户更好的了解和处置。结账单就是最好的例子。每次最多显示五到七个输入字段，将结帐单拆分到多个页面，必要时才逐渐地下字段。

(Image credit: Witteia)

防止行话和行业术语。页面上出现的每个未知术语或短语都会参与用户的认知负荷。一个安保的方式就是为一切读者编辑内容，并选用一切用户都清楚易懂的词。最大限制地缩小长内容。依据消息过载的观念，假设网站不是以消息生产为主，尽量防止长文本块。 例如，假设您须要提供有关服务或产品的具体消息，请尝试逐渐倒退具体消息。 将文本块写的短一些，更繁难了解。依据罗伯特·盖宁（Robert Gunning）的“How to Take the Fog Out of Business Writing”这本书，为了温馨的阅读，大少数的句子应该是20个字以内。

(Image credit: The Daily Rind)

防止一切字母驳回大写。所有大写的文本（也就是一切字母都是大写的文本）关于字符量较少的文本是可以的，比如缩略词和图标；但是，请防止在字符量比拟大的中央经常使用（例如段落，表格标签，失误，通知）。正如Miles Tinker在“Legibility of Print”一书中提到的，所有大写会降落阅读速度。另外，大少数读者会觉得所有大写的文本不能极速明晰的了解。

所有驳回大写，用户比拟难以了解。

2.2 页面结构

一个结构正当的页面清楚地显示了每个用户界面元素位于规划中的位置。虽然没有一个适宜一切页面的规定，但是有一些指点性准则可以协助你创立一个坚挺的结构：

使结构可预测。使您的设计合乎用户希冀。可以参考同类网站来找出在页面上须要哪些元素以及位置。经常使用目的用户相熟的形式。经常使用规划网格。规划网格将页面划分为几块关键区域，并依据大小和位置定义区域之间的相关。在网格的协助下，能更轻松地将不同局部组合在一同，构成一个有凝聚力的页面。

网格和规划是设计的一局部，且能顺应不同屏幕尺寸的设计场景。

Adobe XD的规划网格使设计人员能够针对不同的屏幕尺寸成功分歧设计及治理网格中元素之间的比例。

经常使用低保真线框模拟，防止界面错乱不明晰。凌乱会参与了解的难度——每参与一个按钮，图像或文本都会使页面愈加复杂。在用实在元素构建页面之前，先创立一个线框图，剖析它，而后去掉那些不是相对必要的物品。

Adobe XD中创立的低保真线框图(Image credit: Tim Hykes)

2.3 视觉档次

人们大少数状况是极速阅读网页，而不是阅读一切内容。

因此，假设访客想要查找内容或成功义务，他们将极速阅读网页、找到须要的中央。

作为一名设计师，你应该经过设计良好的视觉档次来协助他们。

视觉档次是指以关键性（即应该首先哪些、再哪些等等）出现元素。

一个适当的视觉档次结构可以让用户更极速地阅读页面。

经常使用人造的阅读形式。 作为设计师，咱们可以控制人们阅读页面的时，的位置。为了给访问者的眼睛设定适宜的阅读门路，咱们可以经常使用两种形式：F形形式和Z形图案。关于重文本的页面（如文章和搜查结果），F形式更好，而Z形式适用于不以文字为核心的页面。

CNN驳回的F形形式

Basecamp驳回的Z形形式

优先思考关键元素。要让页面题目，登录表单，导航选项和其余关键内容成为视觉焦点，以便游客立刻看到它们。

“Learn More About Brains” 按钮就是视觉焦点。

创立模型来说明视觉档次结构。当领有实在数据后，设计原型能够看到实在页面。在原型中从新陈列元素要比技术人员开发网页时更繁难，如此来防止开发环节中再修正。

经常使用Adobe XD创立的原型。(Image credit: Coursetro)

2.4 滚动操作

网页设计师中传达着一个流言——用户不会经常使用滚动。重申：当天，每一团体都在经常使用滚动!

用户启动滚动操作时，优化用户体验的一些揭示：

激励用户滚动。 虽然页面加载前人们理论会开局滚动。但页面顶部的内容依然十分关键。顶部的内容给观众带来了第一印象和等候。只要在内容有吸引力的时刻，用户才会启动滚动。因此，把你最有目共睹的内容放在页面顶部：提供一个低劣的引见。 一个低劣的引见为内容铺设了背景，并回答了用户的疑问：“这个网页是关于什么的？经常使用有吸引力的图像。 用户会亲密蕴含相关消息的图像。坚持导航。当您创立简短的页面时，请记住用户依然须要方向感（以后位置）和导航（其余或许的门路）。长页面或许会出现导航疑问；假设顶部导航栏在用户向下滚动时无法见，则当他们在页面底部时，他们将不得不不时向上滚动。最繁难的处置打算是悬浮菜单——显示以后位置，并不时悬浮在页面中。

滚动后的导航 (Image: Zenman)

加载新内容时提供视觉反应。 这关于灵活加载内容的网页尤为关键（如资讯）。由于滚动环节中的内容加载是极速的（基本都在2到10秒），你可以经常使用循环动画来示意系统正在上班。

加载动画（如Tumblr的加载批示器）通知用户正在加载更多的内容。

不要劫持滚动（即不要将滚动操作限定死）。劫持滚动是最宜人的事件之一，由于它将控制权从用户手中带走，并使滚动行为齐全无法预知。 当你设计一个网站，应该让用户控制他们的阅读行为。

Tumbler登录页面劫持了滚动操作。

滚动的页面时固定的，而不是自在的。

2.5 内容加载

内容加载值得进一步强调。

即时照应是最好的，但有时刻你的网站须要更多的期间向访问者传递内容。

一个蹩脚的网络衔接或许造成一个缓慢的反响，或许一个操作或许须要更长的期间才干成功。

但是不论要素是什么，你的网站都应该极速加载。

确保惯例加载不须要很长期间。网民的留意力和耐烦是十分低的。依据Nielsen Norman Group research，用户坚持留意力的极限是10秒。当访问者不得不等候一个网站加载，假设网站加载速度不够快，他们会感到丧气并或许退出。假设加载期间过长，即使设计了最美丽的加载批示，用户依然会退出。加载环节中经常使用Skeleton Screens。许多网站经常使用进度批示器显示数据正在加载。虽然进度目的面前的用意是好的（提供视觉反应），但结果或许是负面的。正如Luke Wroblewski所述，“依照定义，进度目的是对有人须要等候的照应。这就像看着时钟滴答上去 – 当你这样做，期间仿佛变慢。”有一个很好的代替停顿目的：Skeleton Screens。这些容器实质上是一个临时空白的页面版本，消息逐渐加载到容器中。设计师可以经常使用Skeleton Screens将用户的留意力集中在实践停顿上，并为行将来到的事物预测。这象征着事件正在立刻出现，由于消息在屏幕上逐渐显示，人们看到网站在等候的时刻正在采取执行。

当内容被加载时，Facebook经常使用Skeleton Screens来填充UI。

2.6 按钮

按钮关于创立流利的交互流程至关关键。 这有一些中央值得：

确保可点击的元素看起来像可点击的。经常使用按钮和其余交互元素，思考如何传递可用性消息。用户是如何将元素了解为一个按钮？表单应该遵照以下配置：元素的体现方式要传递经常使用方式。看起来像链接或按钮但无法点击的可视元素（如带有下划线的单词不是链接或具有矩形背景但不是按钮的元素）会让用户懵逼。

左上角的橙色框是按钮吗？ 不，但形态和标签文本使其看起来像一个按钮。

标签按钮要合乎用户的希冀。可操作的界面元素上的文本标签应该与实践作用相关联。假设用户明白按钮的作用，用户经常使用起来会更温馨。像上方例子中的“提交”的文本标签（Awesome！），这样的含糊标签不能让用户极速明白按钮的作用。

不要让用户对按钮的作用困惑。(Image credit: UX Matters)

遵照分歧的按钮规范。无论能否无看法，用户都会记住网站细节。阅读网站时，他们会将特定形态与按钮配置咨询起来。因此，分歧性不只要利于设计的好看，而且增强了用户的相熟感。上方的图片完美地说明了这一点。 在运行程序的一局部（如系统工具栏）中经常使用三种不同的形态不只令人困惑，而且蹩脚。

坚持分歧。

2.7 图像化

一张图片胜过一言半语。

人类是视觉动物，简直能立刻处置完视觉消息；咱们所感知并被传到达大脑的90%消息是可视化的。

图像是捕捉用户留意力并辨别产品的有效方式。

与一段精心设计的文本相比，图像更能被阅读者接纳。

此外，图像能跨言语阻碍。

以下准则，可以协助您将图像运行到网页中：

确保图像是相关的。设计中最大的风险之一是图像传达了失误消息。选用最合乎您的产品目的的图像，并确保它们与高低文相关。

与主题有关的图像会经常使用户困惑。

防止通用的人物照。在设计中经常使用人脸是吸援用户的有效方式。看到他人的脸能让观众觉得与他们咨询在一同，而不只仅是在开售产品。但是，许多企业网站经常使用通用的照片来建设信赖感是十分蹩脚的。可用性测试标明，这样的照片不会参与设计的价值，更是经常侵害用户体验。

不实在的图像给用户带来一种虚伪的觉得。

经常使用高品质、不失焦的资源。网站经常使用资源的品质会对用户印象和对服务的希冀发生渺小的影响。此外，确保图像大小适宜在各平台显示。图像不应该出现像素化，因此要测试各种比例和分辨率大小。要以原始高宽比显示图像。

同尺寸不同品质的照片 (Image credit: Adobe)

2.8 视频

随着网速的提高，视频正变得越来越盛行，特意是它们延伸了用户在网站的期间。

当天，视频无处不在。

咱们在台式机，平板电脑和手机上观看视频。

当有效地经常使用视频时，能十分有效的吸援用户 – 它传递更多的情感，真正给人一种产品或服务的觉得。

将音频设置为自动封锁。当用户抵达一个页面，不会宿愿它收回任何声响。大少数用户不会经常使用耳机，这种状况下，他们须要极速封锁声响，会遭到压力。而大少数状况下，用户会退出网站。

Facebook的视频会在用户进入时智能播放，但自动不会播放声响。

促销视频尽或许短。依据D-Mak Productions的钻研，短片对大少数用户更有吸引力。因此，将商业视频坚持在两到三分钟的范畴内。

（Image credit: Dmakproductions）

提供另一种内容的展现方式。假设视频是生产内容的惟一方式，那么看疑问或听不明白的人则无法失掉内容。为了用户更方便失掉内容，提供字幕和完整的视频。

字幕和视频将使内容更容易失掉。(Image credit: TED)

2.9 Call-to-Action(CTA)按钮

Call-to-Action（CTA）是指疏导用户成功预期目的的按钮。

CTA的重点在于疏导用户启动咱们所希冀的执行。

一些经常出现的CTA的例子是：

“Start a trial”“Download the book”“Sign up for updates”“Get a consultation”

设计CTA按钮时须要思考以下几点：

CTA应该足够大，稍远距离也能看见；但不能太大。要确认CTA是不是页面上最清楚的元素，请尝试五秒钟的测试：阅读网页五秒钟，而后记载您记得的内容。 假设CTA在清单上，它的大小适当！在视觉上突出。CTA的颜色是惹起用户留意的关键要素。经过颜色，可以让某些按钮比其余按钮更突出，更具视觉冲击力。对比色十分适宜用于CTA，使其愈加醒目。

火狐网站上绿色的CTA十分醒目，能马上失掉用户。

负空间。CTA周围的空间也很关键。红色（或消极色）空间为了按钮创立了留白空间，将按钮与界面中的其余元素宰割开。

以前的Dropbox主页有一个很好的例子，经常使用负空间来创立主CTA。

蓝色的“收费注册”CTA与背景的淡蓝色相映成辉。

面向执行的文本。为按钮编写文本，推进用户采取执行。从经常使用“开局”，“失掉”或“参与”等动词开局。

Evernote为CTA提供了最经常出现且有效的文本。

揭示：您可以经过含糊成果极速测试CTA。

含糊测试是确定用户的眼睛能否会抵达您想要的位置的方便方法。

将网页截图在Adobe XD中运行含糊成果（请参阅上方的示例）。

看看页面的含糊版本，哪些元素会锋芒毕露？假设您不是正在预测的内容，那就修正。

含糊测试是一种测验设计焦点和视觉档次的技术。

2.10 网页表单

填写表单依然是网页最关键的互动类型之一。

理想上，表单理论被以为是成功目的的最后一步。

用户在填写表单时，应该防止出现困惑、尽快成功表单。

表单就像一个对话，双方之间（用户和网站）应该有逻辑的沟通。

只留须要的。只需求填写真正须要的物品。参与到表单的每个额外字段都将影响转换率。总之想清楚为什么须要这些消息，以及将如何经常使用它。依照逻辑顺序陈列表单。疑问应该依照用户逻辑而不是按运行或数据库的逻辑来提出。例如，在名字之前征询地址是不正确的。将相关消息汇合在一同。将相关消息按逻辑启动分组。从一组疑问到下一组疑问的流程更像一个对话。且将相关字段分组在一同还有助于用户了解消息。

将相关消息汇合在一同。（Image: Nielsen Norman Group）

2.11 动画

越来越多的设计师将动画作为配置元历来增强用户体验。

动画不只是为了乐趣，它是提高交互效率的关键方式之一。

但是，动画只要在适宜的期间和位置才干提高用户体验。

好的交互动画有一个目的：它是无心义、有作用的。

以下是动画增强用户体验的一些场景：

对用户行为的视觉反应。良好的交互设计应该提高视觉反应。当您须要告知用户操作的结果时，视觉反应是有协助的。假设操作没有成功执行，经过动画，用户可以极速地了解相关的消息。例如，输入失误的明码时可以经常使用摇动成果。这很容易了解，摇一摇在日常沟通中象征着“不”，因此摇动成果也能传递相反消息。

用户看到动画后，能立刻了解疑问。 (Image credit: The Kinetic UI)

系统形态的可见性。Jakob Nielsen的可用性的10个启示式中，系统形态的可见性是用户界面设计中最关键的准则之一。用户在任何时刻都想知道以后的高低文，而不应该让他们猜想——应该经过适当的视觉反应通知用户出现了什么事件。数据上行和下载操作是配置性动画的罕用场景。例如，一个动画加载栏显示了义务的成功进度，并展现了对义务速度的预估。

(Image credit: xjw)

导航式切换。导航式切换是指网站上各个模块之间的切换——例如从概述视图到具体视图。模块切换往往触及到大块面积切换，用户思想难以跟上。动画能经常使用户在这些的时辰变得温馨，在切换高低文之间平滑地过渡，并经过创立模块之间的可视化衔接来解释页面的变动。

(Image credit: Ramotion)

品牌。假定你有几十个相反配置的网站，协助用户成功相反的义务。它们都能提供良好的用户体验，但人们真正青睐的不只仅是良好的用户体验。网站应该建设与用户的情感咨询。品牌动画在吸援用户方面起着关键作用。它会构成公司的品牌价值，突出产品的长处，经常使用户真正感到欢快和难忘。

(Image credit Heco)

第二局部完结，请移步第三局部。

smashingmagazine

译文地址：人人都是产品经理

译者：吉诺是比利

怎样经常使用易剖析剖析网站

关上精易编程助手，选用网页剖析。

在剖析前，用瞄准镜的工具拖动到须要要剖析的网页上，在点剖析就会智能剖析出各个元素类型。

标记就关键就是剖析时标记元素的，如以网络首页为例，剖析第一篇后，选定文本框，开启标记后，再剖析就会在原网页上启动一些标记便于观看。

视觉冲击的格调的网页要如何设计——干货

在网页设计中，往往动感的物品比运动的物品给人的冲击力更强，就像动画站比网页版的站更能吸引人一样，所以怎样能让平面的物品觉得愈加具有冲击力，而普通什么样的网页须要用到这样的网页设计格调呢，汽车或许运动健身等等。

只需产品能动。

当天诚筑说小编就给大家剖析剖析：视觉冲击的格调的网页要如何设计？

1. 概念传达

定格瞬间是一种思想及阅历的总结：针对视觉冲击力，从用户感触的角度做了视觉成果的总结，以及对这些元素特色的剖析。

2. 分享目的

善用“瞬间”元素，使设计即刻鲜活，从而更具感化力！ 读者可以抛开设计才干的约束，极速使自己的作品有一个质的优化。

3. 瞬间元素的概念

稀有或易隐没：稍纵即逝、流星划过天际、烟花闪亮夜空…这些能让人惊叹并称誉的现象都具有这个共同的个性。

在持久的瞬间才干见到的事物，总会给人们带来精彩的视觉感触。

4. 元素所需具有的特点

激起同感：惹起共鸣的镜头，才干真的不得人心。

让人觉得实在可信，能唤醒曾经的体会。

瞬间的动感：既人物运动中的画面定格。

画面成果：在设计中烘托动感气氛，能带给用户“身临其境的实在感触”。

动感元素的长处：

灵动的瞬间能给观众带来剧烈的现场感！

罕用设计处置手法：烘托动感气氛用线条打造动感

冲击力网页设计中的其余留意点

惟一的主角：

繁复的格调永远给人留下如“大将风范”般的声势，过于复杂和繁琐的设计只能突出独个性但会造成削弱声势；

留意空间感：

留意留白和透气，画面洁净清爽，图文及各设计元素之间散布明白、平衡、谐和一致，强调块面感。

繁复的色调：

在制造前定一个主色系、辅佐色系和装点色，缩小琐碎的用色，可以愈加明白主辅色的相关。

想学网页设计UI设计更多内容来诚筑说咨询哦。随时恭候