APP设计
可用性的四要素
o 功能性:这个产品能够正常工作吗?
o 可学习性:这个产品在不经过额外学习的情况下能够顺利使用吗?
o 灵活性:除了完成主要的任务之外,这个产品能做更多的事情吗?
o 工业设计:这个产品设计上是否足够优秀、漂亮?
用户体验的四要素
o 可用性:完成任务是否很容易?
o 适应性:用户是否很快开始顺利使用这个产品?
o 合意性:体验是否有趣并且引人入胜?
o 价值:产品对于用户而言是否有价值?
系列位置效应
1. 把重要的信息放在前面或者后面,不要放在中间,以达到最佳效果。
2. 列举的项目是视觉项目,记得把最重要的项目方案放在最前面。举个例子:第一屏放什么内容是各位最纠结的事情吧。
3. 列举的项目是听觉项目,记得把最重要的项目方案放在最后面,举个例子:《我是歌手》每期中,谁抽到最后一个出场都很兴奋。
4. 碰到用户要做出决定的情况下,如果必须在最后一项出现后选择,请把该项目放在最后,举个例子:规则条款阅读选项(如上图标记处);相反,请放在前面,以增加获选概率。
一、网格布局
网格,它的特点是会有一些单元格组,这些单元格按横竖空白列隔开。在一些手机 APP 和网站中,这样的设计很常见。
在左侧的示例中,有2列,留白间隙在水平和垂直方向上都有切割。间隙是可以调整,可以把它们按照你想的方式进行大小的调整。
通常,网格被用来将屏幕空间划分为大小相同的单元格,使得导航更容易理解。网格的美妙之处在于可以被定制并且能让你的设计变得更加有秩序。
网格的其他好处:
o 有效利用空间和结构。
o 网格可以让视觉上更加和谐。
二、列表布局
列表布局不同于网格布局,这种导航模式简单地由一个元素与另一个元素按字母顺序、数字顺序甚至是随机的顺序排列组成。在上面的示例中,你可以看到一个标准的产品列表。
在几乎所有的 APP 中,都有一些列表可以在某个地方被找到。在使用垂直滚动菜单时,它们非常适合给用户操作和阅读。列表可以有很多不同的变体,比如上面的产品列表甚至是下拉菜单。列表占用的空间比网格少,所以如果内容文本繁多,用列表布局就会是一个很不错的选择。
列表的其他好处:
o 适合高效的浏览。
o 在屏幕空间较少时表现更好。
网站的着陆页
1. 为页面设置一个明确的目标
o 点击一个特定的链接
o 查看视频
o 玩一个小游戏
o 填写表单
o 购买产品
o 分享内容到社交媒体
o 阅读,或者和内容进行互动
2. 为访客而设计
着陆页的设计,一定是要考虑到网站的访客,你的用户。这听起来挺理所当然,但是实际上很少有网站能够真正做到。整个页面中,所运用到的图片和元素应该和用户相关,文本和文案也应该以贴合用户甚至让用户喜爱和欣赏的方式来呈现。
你可以深入分析你的关键性的受众。
o 他们是男人还是女人?
o 他们年轻还是年长?
o 他们是否分布在特定的区域?
3. 使用风格强烈视觉有力的图片
风格强烈,视觉上有力,又或者是足够有趣的图片,往往会给用户留下深刻的第一印象,并且能够让用户参与进来。
4. 设计层次清晰的文本
绝大多数的网站中都会包含不同层级的文本内容,而每个层级的文本内容的重要性、功能都会有差异,有的需要抓人眼球,有的则需要用户专注地仔细阅读。所以,你的设计需要围绕着文本的功能来设计。
o 标题:使用精炼而吸引人的文本让用户注意到。
o 正文:主要的信息,简洁,直接,清晰。
o 行为召唤文本:通常以按钮和链接的形式存在,告诉用户要做什么,下一步执行什么,如何抵达目标等等。提供明确的、可操作的指引。
页脚:提供相关的链接和信息,诸如品牌、联系方式和社交媒体链接等,建立信任,提供周边信息。
5. 导航和关键词的结合
着陆页上的导航元素有助于告诉用户网站的内容,将导航元素视为整个网站的关键词系统的一个组成部分是非常有意义的。
6. 清晰的行为召唤
每个用户都应该知道他们所打开的网站是做什么的,清晰的行为召唤指引是至关重要的。不要以为用户是你肚子中的蛔虫,你往往需要通过指引来引导他们做你希望他们做的事情。
比较常见的行为召唤方式是按钮,填写表单,引导说明(比如“滚动以查看更多”),甚至动画。
7. 尽可能定制内容
着陆页本身就是为了特定功能而存在的,而且这个目标和功能通常是比较单一的,而这样的页面自然也需要足够的自定义设计来尽量达成目标。
8. 清晰而高关联性的品牌设计
着陆页最常见的问题就是容易让人感到厌倦,或者和主站的信息、设计上有所割裂。
在品牌设计上,着陆页和首页以及品牌本身应该有清晰的关联,确保用户不会有跳出感,让他们能够自然的参与到内容当中来。
9. 符合用户预期
当用户在其他的网站上点击链接跳转到这个着陆页上来的时候,他们会对这个页面或者网站有所期待,换句话来说,着陆页的设计应该具备特定的功能,迎合特定的需求,并且要贴合跳转的来源用户的预期。
Bills.com 这个网站的着陆页采用了相对简单的设计,它可以帮助用户管理财务。从网站的名称到功能,用户能够形成一个相对明晰的概念和预期,而完成整个流程之前,用户不会看到其他的无关内容。
这样的设计和网站的跳转来源(比如社交网络)有着紧密的关联,用户知道接下来会发生什么。
10. 构建层次结构和流程
设计良好的着陆页有着良好的可用性,这也意味着它有着清晰的层次结构。用户应该先看什么再看什么?他们将会在页面上执行什么任务,实现什么目标?合理的层次结构和贴合用户模式的流程很大程度上能够让用户和页面进行正确的互动,帮助用户达成目标。
在上面的 LSProductions 网站中,设计师让网站在视觉上呈现出清晰的行动流程,超大的视频背景,分别置于顶端两边的 LOGO 和菜单,以及向下滚动的 CTA 引导说明「Scroll for more」。用户可以在几秒钟内快速获取这些信息,并且开始操作。