如何设计网站 (如何设计网站首页)

本文目录导航：

• 如何设计网站——对Web设计的一点总结
• 设计产品的十大可用性准绳
• 交互设计常识点——可用性测试

如何设计网站——对Web设计的一点总结

设计网站的关键在于了解导航的关键性，以及遵照一些指点准绳。

《别让我思索》这本书提醒了用户在经常使用Web时的心思，强调了导航设计的初衷是为了让用户轻松经常使用产品，而并非为用户标注一切。

经过阅读此书，咱们能更明晰地理解导航关于产品的关键作用。

在设计网站时，咱们需遵照以下准绳：一、指点准绳1. 以可用性为外围：网站应浪费用户期间，让其极速找到所需信息。

2. 扫描和满意即可：用户习气极速阅读，寻觅感兴味的内容。

3. 应用用户的习气：设计应与用户的经常使用习气相婚配，缩小学习老本。

二、必需正确处置的几个方面1. 导航设计：导航元素应突出关键信息，逻辑相关的局部在视觉上关联，并且蕴含的局部在视觉上启动嵌套。

2. 用户体验：设计应吸援用户，同时防止适度搅扰，坚持页面繁复。

3. 选用设计：提供易于了解且不言自明的选用，以缩小用户思索的累赘。

4. 文字经常使用：防止简短的文字形容，坚持繁复明了。

5. 导航元素：确保导航元素可见且易于了解，如站点ID、栏目、适用工具、前往主页、搜查配置等。

三、确定正确的设计谋略1. 防止混杂的导航：明晰地展现导航，防止经常使用复杂的批示和选项。

2. 高度注重低档次导航：确保三级导航等关键元素获取适当关注。

3. 页面称号：为每个页面设定明白且有目共睹的称号，确保与链接分歧。

4. 位置批示：经过批示器、色彩和文字格局等方法清楚地标志以后位置。

5. 层级菜单：展现从主页到以后页面的门路，经常使用繁复的文本和符号。

6. 标签导航：应用直观且灵敏的标签作为导航选项，提供物理空间暗示。

四、思索网站的可用性和尊重性1. 网站应准确有用，提供处置用户疑问所需的信息。

2. 经常使用明晰繁复的言语，组织良好，经常使用户能够轻松找到处置方案。

3. 确保网站尊重用户，提供基本的礼貌和体验，经常使用户感到尊重和满意。

在设计网站时，咱们需关注用户习气，遵照可用性准绳，提供繁复明了的导航，确保内容易于了解，并关注用户体验，以创立一个成功的、用户友好型的网站。

设计产品的十大可用性准绳

尼尔森十大可用性准绳是Jakob Nielsen提出，用来评价用户体验好不好的十个规范，只管这是在web时代设计的规范，但依然可以给咱们在做产品设计的时刻做参考。

一、形态可视准绳 意思就是一切的举措都可视，可视的意思就是能够取得反应。

也就是在产品设计的时刻，能给予用户反应的就用可视化的模式显示进去。

比如，在恳求网络的时刻，咱们会有个正在恳求的弹框。

有些显示比拟便捷，但有些显示会比拟复杂。

比如在配送的时刻，实时显示人/物的地址。

但思索的实质还是可视化准绳。

二、贴近场景准绳 这个之前我有详细讲过，设计产品的时刻要合乎用户的经常使用场景。

三、撤销重做准绳 关于用户的操作，要允许回退。

但有些业务操作是没方法回退的，所以这类操作就会做的相对复杂一点，比如在转账的时刻，还会须要你手机验证码。

其实也是一种防止误操作的模式。

四、分歧性准绳 分歧性蕴含很多方面，不只仅只是视觉格调分歧性。

在用户操作模式上，在产品品牌、公司上层行为价值观上都要求坚持分歧性。

五、防错准绳 说白了就是防止用户的一些失误操作。

防错有两种，一种是让事件不出现。

比如，在用户操作上给予提示。

又或许在研发的时刻就作出一些限度，像手机文本框就设置好不允许输入字母和符号。

另一种防错是用户操作上的，像那种没方法撤销回退的操作，给予屡次确认提示。

这里其实还有一层意思，对研发人员来说，在写程序的时刻，要思索一些被攻打的场景，这样就须要识别一些失误的指令。

假设不作判别，很容易被攻打。

六、协助记忆准绳 这个我自己了解的意思是：用户输入的数据，系统应该记住。

尽量缩小用户的操作。

这样做有几个好处， 第一，用户在提交某些信息的时刻，系统可以汇总给用户做个确认。

第二、用户的操作历史可以追溯，在某些场景下对用户很有用。

第三、缩小用户的期间，自身就是产品致力的一个方向。

七、灵敏高效准绳 灵敏和高效两者相互容纳、相互制约。

在大公司，假设有一个便捷的体验疑问想要修正，或许走流程要1-2周。

而在小公司，在产品在微信群里收回信息到处置，或许就3分钟。

跑偏了，回到用户身上。

灵敏高效是指让用户经常使用更灵敏更高效。

很多app会有一个最近罕用配置，并把罕用配置放到显眼的位置。

这就是遵照着灵敏高效规定。

八、审美和繁复设计准绳 繁复而不便捷。

就像奥卡姆剃刀：如无必要，勿增实体。

大略就是这个意思。

我自己的觉得是，如今的产品，并不是做的太少，而是做的太多了。

九、容错准绳 就算用户操作错了。

也要有容错机制。

最好的方法是让失误不出现。

假设失误出现了，那么记得告知用户要素。

没有人青睐不知情。

假设可以做到，还应该通知用户有什么方法可以处置失误。

十、兽性化的协助准绳 原文：协助性提示最好的模式是：1、无需提示；2、一次性性提示；3、常驻提示；4；协助文档。

最好的设计就是像iPad这种，不须要说明书小好友都知道怎样操作。

反之，在须要疏导用户操作的中央，要给予协助性的提示。

PS：以上只是我团体的一些了解，假设有不同了解可留言一同探讨。

交互设计常识点——可用性测试

“可用性”这个概念自入行以来就据说过，然而没有好好的深入学习过，去年转正报告的未来上班方案也提了一下想对在做的几个系统启动可用性测试，只管不知道日程方案能不能提下来，这两周还是着重学习了一下可用性测试，本文做一些演绎总结。

可用性有如下五个属性： 而“可用性测试”就是约请 一批 实在的 典型用户 针对典型场景操作产品，并激励他们在尝试 成功义务 的时刻 出声思索 ，可用性上班人员在一旁 观察、倾听、记载 ， 发现 产品经常使用环节中的可用性疑问。

它顺应于产品前期设计开发、中期改良和前期保养完善的各个阶段，是以用户为中心设计思维的关键表现。

咱们作为产品的Manager、Designer、Coder，作为产品的爹妈，孩子身上有几颗痣都很清楚，孩子性情随我没故障，以为这个配置天经地义应该这样设计。

所以产品设计者是专家用户，而用户常识普通用户，咱们不能齐全代表典型用户的想法。

听听来自用户的实在声响，无利于优化设计价值。

所以可用性测试关键是为了从易学性、效率、可记忆性、失误率和满意度五个维度 权衡产品可用性 ，同时 定位产品疑问及发生要素 ，进而优化产品。

再有一点，设计须要平衡产品与商业之间的相关，所以可用性测试也与公司商业目的严密相关，只要这样，测试能力成为处置疑问和寻求时机的有效工具。

NNG的Jacob Nielsen列出了以下三个场景： 1. 在迭代的环节中，特意是两个迭代之间的时刻。

咱们须要知道咱们本期的设计能否处置了之前的疑问，或许咱们还须要继续改良咱们的设计方案。

2. 数据不会骗人——关于竞品的可用性剖析，可用性测试获取的目的是十分有用的。

3. 在每一次性新的颁布之前，咱们须要在脑海中有一个明晰的目的。

当咱们对如今的设计方案没有很大的掌握的时刻，一次性可用性测试可以通知咱们，新的版本是不是曾经预备好颁布了。

须要确定可用性测试的 疑问焦点 ，须要尽或许的精准、明晰、可测量、可观察，比如关于配置点、界面、流程等。

可以征询利益相关者，了解他们想要知道的信息，专一于能够成功产品ROI的钻研目的。

首先咱们须要有一个共识：“可用性测试义务是为了用户的实践目的，而不是我以为用户想要做的事”。

其次上方是义务设计的几条外围方法： a) 依据测试目的列出义务清单， 义务不宜过多 ，必需是 紧贴外围测试局部 的； b) 对每个义务 给予用户正当的动机 ，关于用户来说，产品的配置不关键，关键的是用户经常使用产品想要到达的目的； c) 将义务 赋予实在场景 ，毕竟用户经常使用产品都是有实在场景的。

总之，设计测试义务就是“谁在什么状况下要做什么事”，紧抓“人”、“情形”、“目的”三个要素。

撰写测试脚本是为了预防在正式测试时不知道该问什么，该记载什么，没有眉目，一片凌乱。

可以依据测试完结后的结果统计剖析的维度登程，联合义务清单，自下而上的剖析应该在测试时 须要问的疑问 ，还有 须要观察的留意点 。

比如：征询 ：进入页面，首先看到什么？而后看到什么？ 用户会想点开什么中央？每个分类上方的数字，用户有没有留意到？……观察 ：用户探求了那些内容？用户说了什么？侧面评价？负面评价？用户的表情，能否有皱眉噘嘴等负面表情？ 测试试验室所须要的硬环境必需是要完善的，比如： a)试验室环境 ：不论是会议室、还是专门的装有单面玻璃的观察试验室，至少要洁净整洁，能让用户心境安适的； b)测试设施 ：经常使用什么终端产品、网络环境要疏通、账号要先注册等； c)记载设施 ：录音、录像、录屏等，记载测试环节可以帮设计师会议访问的场景，填补一些缺失的笔记。

可以用一些录音机、摄像机、眼动仪、鼠标轨迹记载、QuickTime、Mobizen、Display Recorder、SCR、Magitest等软配件。

预测试就是正式实施之前，约请共事模拟几次，发现测试时的疑问。

把正式的流程走一下，包括设施调试、访谈切入、疑问提问、观察记载、结果剖析，把录音和录像都看一遍，从中 发现测试时的疑问 。

样本数量 ：依据Nielsen和Landauer的钻研，可用性测试发现系统中疑问数量与测试人数遵照以下公式： P=N （1-（1- L ） n ） 其中P为发现疑问的数量，N是系统中存在疑问的总量，L是经过钻研单个用户可以发现的用户比例，依据阅历L的值普通被定义为31%。

此时咱们可以绘制出P关于n的曲线，如下图所示。

此外，Nielsen还给出了以下的一份数据：依据83例NNgroup最近启动过的可用性咨询的案例剖析可以得出下右图的可用性疑问数量——招募用户数量的相关。

咱们可以看到，在招募 5-8名 用户的时刻，就足以暴显露系统中的大局部可用性疑问了。

而此时再测试更多的用户，并不会为咱们的洞察带来显著的优化。

寻觅用户 ：分为三步骤，招募信息投放—>挑选问卷—>电话咨询，外围准绳是“让最具备代表性的用户介入”，经过了解用户的态度、行为、目的来甄选，与用户画像婚配的用户。

从测试今日应酬用户开局就须要坚持一个友好态度，能够让用户放下警觉，能够有一个愉悦的心境去面对测试。

收场掌管人可以做一些自我引见，热热场，紧张一下测试的气氛，标明测试的目的，告知用户咱们十分宿愿您能各抒己见，这个测试没有对错之分，不要担忧做不好，真挚的宿愿咱们和您一同去发现产品的疑问。

而且假设有录音或录像，必定要让用户通晓有此类行为，然而会对测试资料隐秘，可以签订隐秘协定。

依据预备的测试脚本启动测试，至少须要两位上班人员，一名掌管人做义务疏导、征讯疑问上班，一名观察记载员观察用户心情、举措、记载用户行为、想法。

测试中须要留意以下几点： a)观察 ：察言观色，识别用户的心情，思索中、皱眉、犹疑、惊讶等，经过用户心情判别义务的难易，用户能否不可成功义务，那么就应该中断该义务的测试，并且舒缓用户心情。

b)征询 ：征询驳回普通不懂句，详细主观地重复用户刚才的行为表现，假设用户没有自己被动说出要素，可以“顺便”问以下“为什么？”或经过身材前倾、眼光注视等非言语模式来暗示用户你宿愿能听到更多内容，若用户很快、坚决地说出要素，则该理由的可信度较高；假设用户犹疑、或难以说出要素，就不要继续追问。

c)倾听 ：做一个好的倾听者，用户讲话时，可以用拍板、嗯嗯、眼神交换等反应给予用户提示咱们在仔细的听，您继续讲下去。

d)激励 ：激励用户出声思索，测试中的疑问大胆讲进去，而且要必需用户的倡导，给予激励夸赞，认同其价值。

用户遇到艰巨时，不要提供协助，可以适当激励。

首先一位用户测试完结后，可以先趁着历历在目，便捷的做半小时整顿上班，掌管人和笔录相互核查。

而后等所有测试成功再启动可用性水温和疑问剖析。

这里依照我的了解做了一份可用性疑问的总结模板： 在《Don`tMakeMeThink》中Steve提到一种10美分的繁难可用性测试，关于早期起步阶段、须要极速迭代的产品，可以驳回这种模式便捷做一下可用性测试。

《可用性工程》中讲到11条可用性的阅历准绳，也一同记载一下： 到这里让我想到前几天看到的十二条UX设计准绳，也在此安利一下，省得我找不到了，网站也做的很不错，网站地址👉： Laws of UX 。

[1]可用性工程 [2]点石成金：访客至上的Web和移动可用性设计秘笈 [3]如何启动可用性测试和用户钻研？ - fries的回答 - 知乎 [4]如何启动可用性测试和用户钻研？ - 妖叶秋的回答 - 知乎 [5]如何启动可用性测试和用户钻研？ - 韩正双的回答 - 知乎 [6]如何启动可用性测试和用户钻研？ - Kelly的回答 - 知乎 [7]如何启动可用性测试和用户钻研？ - 苏静婷蝙蝠小玩子的回答 - 知乎 [8]【用研说】可用性测试操作指南 [9]可用性测试：义务评价模型与计量模式 [10]4个方面，聊聊如何做一次性更高效的可用性测试 [11]如何启动可用性测试和用户钻研？- 人人都是产品经理 [12]用超多实例，解析「交互设计七大定律」在设计中的运行