设计大量内容的页面时,该注意哪些 UI 设计准则?

  • 网站建设 2018-08-13
<返回列表

 设计大量内容的页面时,该注意哪些 UI 设计准则?



  依专案的不同,在设计上需要考量的项目也有所不同。当我们接到需要呈现大量内容的产品设计任务时(如新闻、入口网站),该思考哪些要点呢?另外,使用者会不会因为大量内容而造成使用上的困扰?


  为何要谈设计准则 ?如果网页上有太多区块或细节,使用者相当容易迷失方向。以下提供几项设计准则 ,可让繁杂的资讯更容易理解并与读者(使用者)互动。

  

 设计大量内容的页面时,该注意哪些 UI 设计准则?



  1. 清晰的资讯层(Hierarchy of Information)

  当使用者初访网站,设计者必须要让他们清楚知道 “应该要先看哪边”?另外,研究结果指出:平均一个页面的浏览时间低于一分钟。所以你必须让使用者轻易地找到他们所想找的(所想看的内容)。

  首先,他们需要知道眼前这页面是他所要的,这部分可以靠 header 或导航列来提示。接着,他们也需要知道这些页面间的组织与这些页面可如何被操作。基本上,最好能让使用者藉由扫视(scan)就能大致了解这些资讯,而不需要仔细阅读内容

  当设计完你的页面架构后,还必须知道一件事情:就是阅读的 F模式。意指使用者会由左至右、由上而下的扫视,而呈现出 F型的视觉动线图。因此,最重要的资讯应该要安排于最上方与左侧。

  

 设计大量内容的页面时,该注意哪些 UI 设计准则?



  2. 什么是使用者在那当下想要看到的?

  透过研究、调查网页上的使用者们,当下最急迫想执行的动作是什么?而这些调查后的资讯也能帮助你组织其页面的内容,并优先提供与使用者最有关的内容。这个简单的方法可让使用者更轻易、快速地完成任务。譬如说,在 email 系统中,让 “撰写" 这个使用者最需要的核心功能总是出现且明显被看到,尽管使用者处于阅读其他的信件页面。

  3. 隐藏更多细节

  在静态页面上展示所有的细节将会显得拥挤杂乱,所以先提供使用者足够的资讯就好,再设计让使用者进一步了解资讯的机制。

  

 设计大量内容的页面时,该注意哪些 UI 设计准则?



  有几个方法:

  使用 “小提示" 来显示更多细节或说明。

  隐蔽过长的文字内容,可判断内容的重要程度,以 ‘…’ 取代。

  提供检索或筛选机制,若还有提供检索建议和自动推荐的功能,就更具效率了。

  4. 明显的导航(Navigation)

  一个网站应该要让使用者 “总是" 知道他们在网站中的位置、某页面怎么连过去、怎么回到首页 … 等。我们可以透过一些简单的视觉手法,让导航这件事变得更具体。例如:使用者点选了一个新页面,而这个页面由左侧滑入,就知道这个页面取代了原本的,成为你现在正在浏览的页面。此外,Google 推出的 Material Design 利用了 “纸" 的特性(实体及空间感),让导航与层变得更具体且具逻辑性。

  只要一展开导航列,其呈现的项目能让使用者有足够的资讯来判断所对应的内容,且让网站的导航列清楚易见,使用者便能更快且轻松的理解你的网站

  

 设计大量内容的页面时,该注意哪些 UI 设计准则?



  5. 让可操作的元素显而易见

  若某个元素(文字、icon、图片)可被点击或编辑,应该不需再解释它,只需透过 “视觉上” 的差异来提供线索即可。如按钮要让它看起来可被点击,并做出状态上的差异(如游标覆盖)。

  在编辑内容时,使用者也应该获得这些内容状态的视觉回馈。例如:当他们在填写表格时,可让他们注意到输入的内容是否符合规范?是否有错误?或是已被修改过? (清楚的状态回馈)。

  6. 预防错误发生

更多阅读

SEO解决方案主要是根据哪些内

诊断教程 2020-06-11
SEO解决方案主要是根据哪些内容来改善?现在有很多企业都会非常重视网站这一......查看全文

百度关键词优化一般都要做什

诊断教程 2020-06-11
百度关键词优化一般都要做什么事情?现在有非常多人都很关心互联网上的信息......查看全文

关键词优化SEO有什么样的考核

诊断教程 2020-06-11
关键词优化SEO有什么样的考核指标?关键词优化SEO在进行实际考核的过程当中将......查看全文
返回全部新闻
扫描二维码分享到微信
确 认
友情链接: SEO 米菲纸尿裤 百度刷排名