台北設計交流論壇

標題: 《網頁設計综合指南》(一):網頁設計看這篇文章就够了 [打印本頁]

作者: admin 時間: 2023-8-15 13:55
標題: 《網頁設計综合指南》(一):網頁設計看這篇文章就够了
設計師和開辟职員在構建網站時，必要斟酌不少事變，從视觉外觀到功效設計。為了简化這個進程，咱们筹备了這個指南。限于篇幅限定，将這一指南分為三部門，此為第一部門内容。

本文将重點先容建立超卓用户體验的重要原则、法子和具备開导性的案例；從用户體验舆圖等总體布局起頭，到单個頁面的設計；還将先容網頁設計中其他首要的方面，比方挪動端适配和测试。

目次（加粗部門為本文内容）

1、設計用户體验舆圖

1.1 信息架構1.2 全局导航1.3 链接和导航選項1.4 阅读器的返回键1.5 面包屑式导航1.6 搜刮

2、頁面設計

3、挪動端适配

4、無停滞設計

5、测试

6、開辟交代

7、总结

1、設計用户體验舆圖

1.1 信息架構

人们常常将網站上的内容列表作為“信息架構”。不合错误，固然它是信息架構的一部門，但它们只是此中的一個方面。

信息架構因此一種清楚和合乎逻辑的方法组织信息。信息架構有一個明白的目标：帮忙用户阅读一组繁杂的信息。好的信息架構會建立一個合适用户指望的條理布局。但杰出的内容层级和直觀的导航其實不轻易，必要經由過程用户钻研和测试才能實現。

有不少法子可以钻研用户需求。凡是環境下，信息架構師會采纳用户访谈或卡片分類的方法来获知用户的指望，或找出潜伏用户是若何举行信息分類。信息架構師還必要领會可用性测试的成果，以便检察是不是可以或许高效导航。

卡片分類是一種简略的法子，可以按照用户信息找出内容分類的最好方法。信息架構師喜好卡片分類的缘由之一就是能清楚地获得架構模式。(Image credit: FosterMilo)

對用户访谈的成果举行分類，然後查验卡片分類是不是知足用户的生理模子。UX還會利用“Tree Testing”的法子来查验它的感化。信息架構要在設計详细頁面以前完成。

Tree Testing是一種肯定用户是不是可以或许經由過程所提议的信息布局解决需求的靠得pigav,住法子。(Image credit: Nielsen Norman Group)

1.2 全局导航

导航是可用性的基石。若是用户在網站迷失了标的目的，那你的網站内容有多好也無用。是以網站的导航應當遵守几個原则：

简略的导航。导航應當讓用户以起码點击的方法来拜候指望内容。清楚。不该该讓用户猜想导航選項的意义；每一個导航選項都應當是明白的。一致性：导航體系對工廠地板清洗，網站上的所有頁面都應當是一致的。

在設計导航時必要斟酌的一些事變：

按照用户的需求選擇导航模式。导航應當@知%6r84w%足大大%G1d26%都@用户的大大都需求。若方針群體指望與網站举行某種類型的互動，那末就知足他们的指望。比方，@若%JT4a7%是大大%G1d26%都@用户不認識圖标的寄义，请防止利用汉堡菜单导航。設置優先的导航選項。對导航選項举行優先排序的一種简略法子——将分歧的優先级選項分派给用户测试，然後将高優先级和频仍利用的路径在导航中凸起。导航要一向可見。正如Jakob Nielsen说，見到甚麼比记得甚麼更易。經由過程讓所有首要的导減脂茶,航選項可見，可抗老化保健食品,以最小化用户的影象感化。最首要的导航選項應當随時可見可用，而不只是當咱们指望用户利用它们時才可見。显示當前位置。“我在哪里？“這是一個根基問題，用户必要一個谜底，以便有用地导航。不显示當前位置是很多網站常見的問題。

1.3 链接和导航選項

链接和导航選項是导航進程中的關頭身分，直接影响用户的體验。遵守這些交互元素的法则：

熟悉内部和外部链接的區分。用户指望内部和外部链接有分歧的举動。所有内部链策應该在统一個标签頁中打開（如许，用户便可以利用“撤退退却”按钮）。若是想在新标签頁中打開外部链接，则應在打開以前告诉用户，好比添加一段文本到链接文本中，显示“（在新标签頁中打開）”。更改拜候链接的色彩。當已拜候的链接不扭转色彩時，用户可能偶然中從新拜候统一頁面。讓用户晓得哪些链接已拜候過，防止偶然中從新拜候。

查抄所有链接。點击链接後得到一個毛病頁面，會侵害用户體验。當拜候者正在搜刮内容，他们但愿每一個链接都應當時正确有用，而不是404頁面或他们不但愿看到的頁面。

1.4 阅读器的返回键

“撤退退却”按钮多是阅读器中利用率第二高的按键（在輸入地點以後）。确保“撤退退却”按钮按用户指望運行。當用户拜候頁面上的链接，然後单击“撤退退却”按钮時，他们但愿返回到原始頁面上的退出位置。防止點击“撤退退却”将用户带到原始頁面的顶部，而不是在頁面封闭的处所。如斯一来，用户必要转動他们已看過的内容，用户會由于没有符合的“返回位置”功效而感触绝望。

1.5 面包屑式

面包屑式导航是一组上下文链接，可以辅助網站导航。這是一個次要导航方案，凡是显示用户在網站上的位置。

固然這個元素不必要不少诠释，但有几件事值得一提：

不要用来作為重要导航方案。主导航應當导航選項指导用户，而面包屑是用户指导导航選項。将面包屑导航作為重要法子，而不是辅助的功效，凡是會是一個失败的导航。利用箭頭作為分開符，而不是斜杠（/）。為了清楚分隔每层，举荐（>）或（→），由于這些符号的指向能辅助用户理解。斜杠（/）不建议作為電子商務網站的分開符。若是您筹算利用它，ku11org,请确保產物種别将不會采纳斜線：

對付上面的種别，面包屑导航區别分歧的层级是比力难的。

1.6 搜刮

有些用户来到一個網站寻觅某個特定的内容。他们不會想利用导航選項。他们但愿在搜刮框中輸入文本，提交他们的搜刮哀求，然後找到他们要找的頁面内容。

在設計搜刮框時要斟酌到這些根基法则：

把搜刮框放在用户指望找到它的处所。下面的圖表是基于A. Dawn Shaikh和Keisi Lenz钻研。按照對142名介入者的查询拜访，搜刮框的用户预期位置。钻研發明，最便捷的位置是網頁的左上角或右上角。用户利用F形阅读模式，可以很轻易地找到搜刮框。

在内容丰硕的網站上，搜刮框必定要夺目。若是搜刮是網站的一個首要功效，那末就凸起显示它，由于它能低落用户發明的难度。輸入框的巨细要符合。搜刮框輸入區域過短是設計中常見的毛病。固然，用户可以在短字段中輸入一個长盘問，但只有部門文本可見，可用性欠好，由于没法當即看到全部盘問。究竟上，當搜刮框過短時，用户被迫利用短的、不切确的盘問。Nielsen Norman Group建议 27字符长度，這能笼盖90%的盘問。

将搜刮框加到每一個頁面。在每一個頁面上显示搜刮框，由于無论用户处在網站上的哪一個頁面，當他们不克不及导航到正在寻觅的内容，他们會测验考试利用搜刮。

歡迎光臨台北設計交流論壇 (https://digweb.com.tw/)