- 作者:kaijie
- 发表时间:2019-07-01
- 来源:未知
作剖析为规划者来说,咱们在许多方面都被Apple影响着,无论是其优秀的操作系统、时尚前卫的消费产品,还是他们在Web/使用规划上的引导趋势。从 Apple的产品和线上网站可以看出,Apple始终关注用户体会和可用性多一些。规划上重视可用性是十分重要的,它必须给用户留下一个好的印象,基于此,用户会愈加喜欢购买Apple的产品,网站的可用性很大程度上反响了其产品的人性化操作。
可以学到许多常识,所以我用这个网站作为一个个案,研究一下Web规划过程中需求留意的一些可用性方面的常识。
1. 流通有用的内容导航和菜单
主菜单(Main Menu)- Apple的菜单应该是最值得学习和仿效的规划了。你可能会问,这样如此简略平常的导航为什么会强壮?首先,便是其规划的一致性,这个主菜单的整个页面中的定位明晰一致,是防止困扰用户操作的最直观的体现办法。
此外,这个菜单也运用了十分简略的鼠标hover事件,但这些体现现已足够了。
JavaScript Mac 菜单:这个名声在外的 Mac menu 是规划最简练、安排最紧凑的导航之一,是在有用的特定空间内最好的内容安排办法。比较合理的内容安排更重要的便是操作的便当了,尤其响应鼠标的labels更是挥洒自如。
侧边栏菜单:侧边栏导航能给人深入的印象,可用性强。这个细巧的折叠层可以满足有限区域内容容纳更多链接内容的需求,即使有新的增加进来也不会对布局产生影响。
Gallery 导航: 除了基于导航规划的内容安排外,图片的安排也相同是极其重要的。Apple.com完成了一个十分简略的图片展示功用,除了运用了缩略图菜单外,还运用了 lightbox 的体现效果,简略简练的规划,却让用户的操作体现的流通完美。
在每一个 lightbox gallery中,所有的图片都是安排在 lightbox下,咱们不用再把时刻花费在“上一幅、下一幅”的点击操作上了。
iPhone 特征菜单:又一个简练但功用强壮的菜单, iPhone 的内容是一个基于多个列表的样式化导航。
Bread Crumbs导航:面包屑导航告知用户他当前的操作坐落整个网站的具体位置。Apple在每一页面的底部都供给了这样一个位置导航功用,关于希望无障碍地快速网站的用户来说十分有用。
Site Map - 就Web的可用性来说,网站地图是一个更不起眼的功用,但它在使用中却必不可少。 Apple.com 有一个坐落页脚的网站地图,协助用户更方便地找到需求的页面
2. 规整流通的网格布局
任何网站规划(或者说任何一个层规划)都是从最简略的网格开始的,网格是任何层和内容的基础。Apple 在每一个页面,一致运用规整的网格布局规划,给用户一个愉快的体会。
虽然Apple在每个页面都运用了网格布局,但是页面间的布局却又各不相同,这就需求规划的灵活性和创新意识。与此同时,坚持框架一致的网格区域,也能给用户视觉上的愉悦。
3. 一致慎重的颜色,高质量的图片
除流通的布局规划外,页面的颜色也在很大程度上反映了网站的可用性规划。颜色计划是一个网站表达感觉和视觉最直观的要素,起决定性效果。
对比度/颜色规划:Apple运用一个完美的颜色规划,表达出一种和谐专业的感觉。平滑的对比度增强了内容的可辨识度。十分合理的网站饱和度提高了易读性。此外,比较底子文字,链接文字的不同颜色也是为内容的可读性增色不少。
图片:和颜色紧密相关的是,图画的质量也是一个十分重要的方面。Apple.com在内容中混合了许多的图画,这些图画都是高质量的,在网站的专业性方面充当了一个相当重要的人物,好的图画需求在细节处下足功夫。
空地:合理的空地使用是完美页面布局规划必不可少的成分。恰当的使用可以防止混乱的布局,使布局看起来愈加明晰。Margins、行距离, 字距离的科学人性化规划都会增强内容的可读性,减少视觉上的阅览疲惫。
4. 流通可扫描的内容安排
内容为王,是网站存在的底子。内容的安排形式会直接影响到用户对内容的反映。尤其是一个像Apple.com这样的网站,充溢许多的内容,是否可以扫描就成了十分重要的目标。
距离:距离和文字大小在可读性方面是相同重要的目标。首选,行距离对文本的可读性尤其重要,假如太小,读者阅览会十分的费劲;假如太大,就会显得太多独立,损失相关性。Apple.com运用一个行高的数值解决了这个问题。
规则的图片布局:不像许多文章型网站,Apple运用通明布景的图片,在图片和盘绕文字之间合理地设置空隙。
可扫描的Headers/Text:标题和文本的安排除了方便阅览之外,还能更容易地完成内容的扫描。
高亮的关键字和不同字体的运用都是使得文本更容易扫描的最好办法,当然,行高也是相同重要。
5. 快速的加载时刻加载时刻的
长短决定着用户是否会离开网站,假如网站的加载过慢,那么用户将会失掉等候的耐性,不再继续浏览网站。
简练和良好的代码风格可以供给加载功率。最小化加载时刻的办法许多,包括紧缩图片 、删去不用要的内容、运用加载时刻测验东西等等。这是一个十分大的话题, 类似的文章 也是十分多。
6. 查找功用
网站的查找功用不可低估,一个具备可用性的强壮查找引擎是任何网站必须的元素。绝大多少的网站只运用一个简略的查找条敷衍了事。而关于 Apple.com,却在布局和功用上都增强了查找功用,网站运用JavaScript技术完成了查找框自动显现下拉相关关键字的办法,引导用户显现查找 结果,可见其人性化规划已是渗透到了每一个细节。
Apple.com把查找条放置在了顶部导航菜单的右侧,并且整站页面一致显现。
7. 细节
关于规划来说,检测的便是细节的处理,细节做到了,那么这个产品就会得到用户的肯定,当然,Apple.com也是这样做的,这也是为什么会体现的如此专业的原因。
链接:在内容中刺进链接文字时,把这些链接作高亮处理是十分必要的,并且,关于内容和列表中的链接,还是作了细微的区别处理。
隔离:在列表中,相似的元素、目标间作必要的分离是十分必要的,有时,一个简略的1px线条会起到画龙点睛的效果。
回到顶部:回到顶部链接是一个常见的使用,不容忽视。在页面过长时,方便用户回来页面顶部进行操作。
言语选择:假如你的产品客户是不同国家不同区域的人,那么假如没有准确的语种供用户选择的话就太糟糕了。Apple做到了,供给各种言语版本供用户选择运用,从而扩大了产品的市场规模。
好了,以上便是基于Apple.com对Web规划过程中需求留意的可用性方面的一些简介。假如你也有你的观点,那么为何不分享出来呢?