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

2017-12-13 16:11:36 来源：易采站长网友投稿作者：admin

　　设想师战开辟职员正在构建网站时，需求思索许多工作，从视觉中不雅到功用设想。为了简化那个历程，我们筹办了那个指北。限于篇幅限定，将那一指北分为三部门，此为第两部门内容。

　　本文次要内容为：

　　2、设想页里

　　2.1 内容战略

　　2.2 页里构造

　　2.3 视觉条理

　　2.4 转动操纵

　　2.5 内容减载

　　2.6 按钮

　　2.7 图象化

　　2.8 视频

　　2.9 止为呼应按钮

　　2.10 网页表单

　　2.11 交互动绘

　　2、设想页里

　　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个启示式中，体系形态的可睹性是用户界里设想中最主要的本则之一。用户正在任什么时候候皆念晓得当前的高低文，而不该该让他们推测——该当经由过程恰当的视觉反应报告用户发作了甚么工作。数据上传战下载操纵是功用性动绘的经常使用场景。比方，一个动绘减载栏显现了使命的完成进度，并展现了对使命速率的预估。