网站首页 > 网站设计> 文章内容

设计:4个要点教你设计更好的

※发布时间:2018-5-14 3:36:06   ※发布作者:habao   ※出自何处: 

  相比于直接搜索,用户更喜欢用,因为是让用户做选择题,而搜索是填空题。那本文主要谈谈设计,看怎样的设计更能让用户喜欢。

  McGovern(the founder and CEO of Customer Carewords)说相比于直接搜索,用户更喜欢用,因为是让用户做选择题,而搜索是填空题(文案是现有的信息,不需要经过用户大脑的额外加工去进行搜索)。并且他解释道:如果链接的文案与用户寻找的内容相符,那他们直接点击链接的可能性更大。

  尽管设计一直是一个有争议的话题,仍然有一些比较好的应用规则,是作为用户体验设计师的我们,在进行网站设计时值得注意的:

  连贯性的产生也需要经过内容的筛选,不是所有的项目都需要展示其子页面链接,亦或者全都不展示;而是要展示那些会让用户误以为不展示其子页面链接,就没有更多内容的项目。

  如果子页面链接没有在一级结构中展示,那么就要确保其在各个板块的次级结构中的使用始终保持一致(不要在这个版块是一级结构中展示,而到了另一个版块却是在二级结构中展示)。

  同样,所有的一级项目要么都是跳转到落地页的链接,要么都是作为二级链接的标题。如果一部分是跳转到落地页,另一部分则是二级链接的标题,那么用户就会在点击时产生疑惑。

  在视觉设计上,同样应该比较明显的示意处,一级项目到底是跳转到落地页的链接?还是二级机构的标题、字体的颜色和样式,鼠标指针的变化?

  此外,如果一级项目是一个链接,那么就要清楚地示意相关操作,或者通过文案措辞或者通过视觉设计。

  在Faix County Public School’s 官网的Full menu栏下,用户可以通过点击“Career”文案来链接到“Career”落地页,或者点击向右的箭头来展开查看次级项目的标题。

  这与前面讲的机构的一致性也是相符的:一级项目要么都调到次级落地页;要么都作为二级项目的标题入口。如果两者都有,那么就在样式上作区分。

  如果新添加的内容不能很好地匹配当前网站的各个板块,那么是时候重新思考一下网站的层级结构了,或者重新审视一下——既然这个部分的内容与网站的其他内容不相符,那为什么还要存在?是不是可以被删掉或者将它合并到一个内容相关的页面?

  如果有些页面需要被更加便捷地触达,那么可以考虑在首页试用一种响应时出现的功能模块或者一个模块的落地页(浮层?)。用户其实更愿意去关注这些模块,对用户来说很重要并且特征显著的模块并不会干扰到整个网站的结构。

  但是面包屑,需要非常精确才能起到效果,不能丢失任何层级或者引导至错误层级的页面。对于一些只有两种层级结构的小网站,使用面包屑就没有必要了,如果一定要使用那么就要保持层级的连贯性和一致性,可以去UI-Patterns 这个网站学习更多关于面包屑的实际运用案例。

  视觉元素的变化,可以帮助用户搞清楚网站有哪些可能的交互形式。例如:把关闭状态的按钮滑至意味着某个设置改变了,并且知道如何反置。当icon没有改变,那么用户可能就无法预知操作结果。

  有时候icon可以替代文字链,包括带有icon标签的使用可以减少理解成本。例如:相比于(单独)使用有争议的汉堡包式的icon,在其旁边放一个“Menu”标签会很好的解决这个潜在的可用性问题。

  根据NNG study的研究:用当户在网页检索信息时,相比于只有文案,通过颜色和icon的差异化设计的视觉能让用户快37%。将icon的颜色做区分处理,而不仅仅只是设计成不同的样式,可以让用户更容易到这些icon有着不同的作用。

  例如:twitter上那些不能交互的icon,被设计成灰色方形内配合白色(描边)icon。例如:“liked”(已经赞过的点赞按钮)和“followed you”(已经关注的关注按钮)。

  那些用户可以进行交互的icon则被设计成灰色,并且当用户hover的时候进行颜色切换并展示一个解释性的信息。

  为了设计一个很好的结构,好的网站信息架构和层级才是关键。当网站的信息层级结构图已经出来时,此时就要尽力去设计一个扁平的结构,这种扁平的结构要能让用户只需要点击一两次就可以去到最底层的页面。

  尽管扁平的结构固然是最理想的,但是仅仅因为短时记忆的局限,而把菜单设计得很简短也是错的。

  所以菜单必须设计的简短以方便用户浏览,但是信息必须表达明确。(菜单栏必须设计得简洁明了,表意准确)

  结构的层级数最终是由网站的信息层级所决定,理想状态下,用户需要点击的层级越少,那么用户到达他们的目标页面也就越快越清晰。

  通常,绝大部分网站都是三到四个信息层级,这样网站的页面比较容易被触达,不过这样做需要确保网站的结构不至于太过宽泛。

  要想弄清到底几个信息层级是合适的,试着把现有的信息层级结构划分成互不相关的部分。然后审视一下各个子页面的分组,看看他们是否可以被升至更高一个层级。

  合并内容或者删掉内容也是同样可行的,把扁平化的设计做到极致,当前正成为全页面设计的潮流这种做法,就是没有子页面并且只有一个信息层级。

  用户应该能够快速浏览信息,并且知道那些链接分别是哪个层级的项目,这些链接的摆放和分组都应该建立在这种层级基础上。

  像字体样式、字体大小、字体权重或者颜色这些视觉设计,都应该建立在层级之上,并且应该始终保持一致。如果使用一个次级,那么它与其父/子或者同级链接的设计,也同样应该区分开来并且与主保持一致。

  Antro网站菜单的一级文案与二级文案在字体、字号、颜色一级hover状态上都有区分

  就像面包屑结构,栏上的当前释义能帮助用户找到自己当前的,尤其是如果他们处在一个层级比较深的页面,这种清晰的视觉可以帮助用户明白他们在哪个页面。

  一个好的结构可以很好的适应手机和平板电脑,设计结构时应该考虑到多端通用,或者考虑使用两种相似的结构,这种结构不会让用户去切换思维模式去适应移动端和PC端的不同。

  用户在PC端hover主项目时状态显示次级的内容链接,然而移动端没有hover状态,这就会使得移动端和PC端不能保持一致。用户在使用移动设备时,不会像在PC上本能地hover菜单来找他们想要的内容。

  如果非得要把两种交互形式用在一个内容链接上,可以考虑设计两个不同的点击(产生不同的点击效果),就像之前看过的Faix County Public Schools 的案例——点击主标题文案本身可以跳转到一个页面,然后点击标题文案旁边的加号,可以展开这一部分主的内容。

  例如:日本的时代周刊在PC端的结构设计,用的是宽屏而且是横向分布排列的条。而在移动端同样的内容用的是汉堡包式设计,并且它在展开时利用的是手机长条的纵向空间这种特点。

  当点击一级标题时,二级标题会在其下方展开,而不是将区域分割成一级、二级两条纵列。

  这种设计并不是机械的把PC端的形式照搬到移动端,可以注意到移动端蓝色线条,是更加挨着次级标题而不是主,这实际上更符合移动端上的设计。

  说明:喜欢翻译国外交互设计体验设计网站优秀文章案例,仅供互相学习探讨,翻译有版权,如有错误,请多~

  

相关阅读
  • 没有资料