优秀网站的设计思路

失败的网页设计各不相同,但是优秀的网页设计则有着共通的特点。你需要思考人们想要的是什么,什么东西能够触动他们,让他们欲罢不能,无法忘怀。

听起来似乎很简单,不是吗?取悦用户的关键在于像用户一样思考。并不是每一次创新、每一次重塑、每一种新技术都能让用户愉悦,那些真正易于理解、便于使用、降低难度的技术、设计手法和抓人的视觉元素,才是一切的关键。下面总结的7项秘诀,会让你的网页脱颖而出的。

定制化,或者说个性化,是今天网页设计中最典型的趋势之一。用户希望浏览网页的时候获得更加私人的浏览体验,无论是玩页游还是购物。

看看世界上最著名的那些网站是怎么做的吧。Amazon 为用户提供基于购买历史的产品推荐,Netflix 则会推荐相关的作品、有待观看的下一部,并且基于用户 Twitter 上的内容来进行推荐。

每一个微小的自定义设计,都能让用户感觉这些用户体验设计是为他们而做的。同时,这种设计也会给用户一种参与感和沟通的体验,从而加深用户的忠诚度。如此一来,用户会更好地融入整个网站的用户群或者社区。

另外一个大热的流行趋势,就是动效设计。它不仅能为用户带来惊喜,而且具备强大的引导性。

动效设计的精髓在于简单。令人头晕或者不知所措的动效,应该不是你要的东西吧?动效应该是有目的性的,和其他所有的设计元素一样,有针对性,达成目标是它存在的意义。

对动效或者说动画最熟悉的,无疑是迪士尼。Frank Thomas 的《生命的错觉:迪士尼动画》中,就详细总结了创造今天动画的12个原则:

·挤压和拉伸
·预期
·登台
·连续动作和姿态对应
·缓进缓出
·弧形运动
·次要动作
·时序
·夸张
·立体刻画
·吸引力

对于常见的问题,设计模式就是可靠且可复用的解决方案。简而言之,最常见的信息和交互方式被整合到一个界面当中,比如点击按钮,滚动页面,滑动解锁,它们都是设计师模式。

你需要熟悉这些常见的设计模式,并且在设计界面和交互的时候将它们用进去。这符合用户在体验上的诉求,也是易用性的最基本构成。

同时你也要在自己的设计中创造设计模式,在不同的页面中使用相同、相似或者规则化的设计,让用户习惯。比如,不同页面中的CTA按钮的色彩保持一致,卡片式的元素使用相同的样式,等等等等。

没人会喜欢单调无聊的设计。你的网站应当同你的品牌保持一致的性格,拥有独特的气息。

要做到这一点,通常需要用到微妙走心的文案和亲切自然的语调如果你真的不知道怎么做,可以看看MailChimp 是怎么做的。(请注意他们的文本和图片是如何无缝地连接到一起的)

用户同网站交互都是在屏幕内进行的,无论是桌面端还是移动端,整个体验都是围绕着屏幕进行的。

这并不是一句废话。屏幕是一个区域,它界定范畴,赋予概念,创造隐喻。这也解释了为什么视差滚动和卡片式界面是如此的流行。这两种概念将一定量的信息合理地放置到屏幕这个容器中,让用户随之同下一个元素进行互动。

如何运用好这个概念其实并不是那么容易。一个屏幕内应当承载多少信息,需要仔细考虑。一个桌面端页面所能承载的信息量在移动端屏幕上,可能需要划分到几个页面当中去。

从屏幕的角度来考虑问题,可能会让你的计划更加庞大复杂,但是这种考量是有价值的,这种基于屏幕或者基于设备的考虑能让用户感觉更加便捷贴心。

视频、游戏、测试都争取让用户能与之进行互动,这种互动的目的在于驱动用户参与到设计中来。用户与界面交互的越多,用户所获得的体验就越好。

不过,有趣的元素能让这一切截然不同。

让交互内容尽量简单,不要牵扯太多,让用户可以一目了然,让他们轻松获得反馈的信息,不用在冗杂的体验中沦陷。这其实和美剧的5分钟原则有着异曲同工之妙。

最后一个秘诀并非不重要,它甚至可以说是最基础的原则:让你的设计保持干净、整洁和有序。使用栅格可以让每一个页面元素都有准确的位置。将响应式设计落实到每一个元素,能让页面能从一个设备兼容到另一个设备。

简约风和极简风能成为设计趋势是有道理的。用户可以更轻松理解这一切。简约的视觉设计更容易交互。没有复杂信息并且被精心设计的界面能更好地运作,赋予更好的体验。

苹果的官方App Store 和Google Play 都推荐过的游戏 Two Dots 就是个典型案例。谁都可以拿起手机毫无障碍地开始玩儿,它设计简单干净,容易互动,视觉元素周围有足够的空间,无需担心误触。同时,其他游戏所具备的东西它也有——有趣好玩,可以共享得分,能分享到社交媒体。

界定一个网站的体验与否有的时候并不是单一的标准,而今天所推荐的7条秘诀本身也更接近于基本的Guideline,了解用户,熟悉趋势才能提供优秀的体验。

designshack

译文地址:优设

作者:CARRIE COUSINS

优设译文:@陈子木

(0)

相关推荐

  • 网站导航设计的3个基本原则!

    为网站设计导航就如同为房子打基础.如果地基不牢靠,再壮观的设计也无法掩盖建筑结构的潜在风险,其实网站也是如此,如果想让网站拥有优秀的用户体验,良好的转化率,可观的销售额,你需要花费相当的时间去了解你的 ...

  • 2018年优秀动态网页设计大赏【附教程】

    随着设计行业的的不断进步和发展,动态网页设计已经成为设计师必须掌握的重要技能之一.对于许多设计师来说,缺乏设计灵感和网页设计是阻碍设计的主要问题.针对这些问题,小编在本文中为设计师精心准备了优秀网页设 ...

  • 50个设计思路帮你解析创意404页面(下)

    好玩的地方在于,404页面的设计思路其实可以拓展到许多其他的地方,UI设计.网页设计甚至室内设计.设计的思路和原则原本就是相通的,这些独树一帜或者别具匠心的404页面单独看的时候并没有什么,但是深入总 ...

  • 优秀极简设计的套路

    @葱爷:看几千个案例其实还不如看懂几个案例. 阅前一叨逼:所谓极简就是,简还不行,得非常非常简,然后还得招人喜欢. 极简设计一直是设计师很推崇的一种设计风格,因为它容易给人一种格外轻松.舒服.高大上的 ...

  • 手把手教你做电商网站导航设计

    双十一马上就要到了,大家憋了一年终于又可以买买买了,可是广大辛勤的设计师却还在为了网站的优化而默默的奋斗中,特别是刚入门的设计师,也许电商的一个网站导航也要纠结半天,别担心,这都不是事儿,今天带来的文 ...

  • 用PPT中的表格工具模仿优秀的网页设计

    用PPT中的表格工具模仿优秀的网页设计 只要肯留心,处处皆学问",这句话用在PPT学习上真的是再确切不过了.随着PowerPoint软件的升级换代,PPT在视觉呈现方面能力越来越强,可以说是 ...

  • PPT目录页优秀设计欣赏与设计原则

    PPT目录页优秀设计欣赏与设计原则.下面我们欣赏几张优秀的PPT目录页作品. 这是比较喜欢的存在手机里的几张目录,相信这几张目录页很多小伙伴都可以很好的模仿出来,制作难度不是很大,却有着较高的颜值,原 ...

  • B端产品 — 浅谈Atlas设计思路

    今天分享一款运维相关的B端产品,主要阐述自身的设计思路及产品的优化过程. B端产品对产品链路有着高流畅度与高效率的诉求.设计师在做B端产品的的时候要有全链路和小白用户视角,以体验及效率为先,我们需要协 ...

  • “色*界”派对-设计思路

    小编:今天给大家带来的是由猫铭给大家分享的"色*界"派对-设计思路.如此绚丽的一张画报有没有瞬间直逼你的眼球呢?色彩搭配的方式与风格非常多元化,如此大胆的配色你爱不爱呢?作者已经给 ...