四个案例教你打造集才华与美貌与一身的网站!

   网页设计 师面临的最大挑战之一,可能就是平衡网站的功能性和视觉性。你说,我也想「极简」,我也想「高大上」,可是不弄个红彤彤的按钮,用户就不知道点哪里嘛。在本篇文章中,我们举了4个例子,看看他们是如何解决这个世纪难题的。

  有一些网站仅仅是为我们提供服务,也有一些网站让我们看着赏心悦目,但是最好的网站两者兼备。令人愉悦的设计能给我们带来一种流连忘返的特别感受。

  如果一个网站只有花里胡哨的吉祥物,却没有实质,那么用不了多久,最初的魅力会逐渐消散,不留痕迹。我们下面列举了一些较优于行业水平的网页设计 案例,你可以从下文的案例中得到些灵感。

  只有最好的糖衣

  在分析案例之前,让我们来讨论一下赏心悦目的交互是如何适应于整体的设计。


  Aaron Walter在写Treehouse博客的时候,通过一个1943年发布的心理学的经典理论——马斯洛的需求层次理论,解释了什么是赏心悦目的设计。这个理论从本质上将人体需求按优先次序排列。从底层,即生理必须层 (其包括食物和氧气等),到最高层——非生理必须层,如自我实现。


  (感性的界面设计:热情的用户入口)

  把本理论运用于网页设计,Walter提出了新的需求层次理论。


  (感性的界面设计:热情的用户入口)

  一个可行的交互设计并不是非好看不可。一个网站只要有功能,可靠并且实用,哪怕外表有那么点丑(就如Craigslist网站)也可能成功。但是,一个好看的网站如果外强中干,迟早会失去它的感染力。因此影响交互设计最重要的因素,说到底还是实用性。

  上文并不是说美观不重要。正如Don Norman解释道:人类在进化,我们基于情感所做出决定,多于基于逻辑做出的决定。事实上,他接而提出「设计提高美观度甚至可提升可用性」这一观点,即通过创造一个愉快的氛围,产品可以使使用者放松,反过来使机械的程序运转得更加平稳。这就使学习操作网站变得简单许多。

  好看的设计如同蛋糕上的糖衣,不能填饱肚子,但也是蛋糕上最可口的那部分。一个又干又平淡无味的蛋糕是无法引起食欲的,一旦有更好的选择可选(更加多彩可口的蛋糕),饥饿的用户则会选择他们。另一方面,不管你的糖衣多美味诱人,很少有人只吃甜腻的糖衣。

  下面所说的网站非常的完整:清晰的目标、好用的界面、完善的功能——还有一点额外的东西。

  1. Bitly

  Bitly是一个广为人知的牌子。它广受欢迎的原因在于,哪怕在网络时代的早期,它的服务就已得到大家的认可。Bitly将网址缩短到几个字符,短小精炼。当你要分享链接的时候,不再需要用一长串毫无联系的字母和数字来压倒对方。它很好的证明了,只需运用一点巧妙的设计,你就可以创造一个前所未有的商机。

  这是Bitly的核心感染力,并且我们猜想,即使有意思的交互设计少一些,他们仍然可以完善该服务。有趣的交互设计是使Bitly脱颖而出的关键因素。


  这个网站的操作非常简明。用户们只需要将链接复制粘贴到左上角,旁边的一个菜单马上就会滑出一个新的简短的链接和图标,供人们归档、编辑、加标签或者分享链接。

  只需要单击鼠标,你就可以从简短的网址追踪到最复杂的链接,就像是施了魔法一般。当设计了其中有趣的颜色和河豚的卡通形象之后,使用体验从头到尾都是令人印象深刻的。再加入直观的链接跟踪和有韵律的陈列,这些体验会变得稍微使人沉迷——你会想看哪个链接点开次数最多,并回去研究为什么。

  正如交互设计师Ben Rowe所解释的,令人愉悦的设计有两层:表层和更深的流程层。也就是说,吉祥物和有趣的视觉设计组成表层,而「被动魔法式」的交互设计形成更重要的流程体验层面。

  2. Medium

  令人愉悦的设计并不是由绚丽的色彩和有趣的卡通形象堆砌而成的。正如Rowe所说,由于用户体验能建立更强的联系,所以好看的设计不仅仅只是依靠那些讨喜的动物形象,而是依托于实用性。

  作为最受欢迎的博客平台之一,Medium具有极简主义风格的特征,平台使用大量的白色,没有卡通或任何百搭的颜色。它登上我们「好看网站排行榜」的原因就是其简单却强大的用户体验。

  Medium的极简主义独特之处不仅在于外观:写作体验被网站运营者们视为重中之重,尽可能让新用户尽快上手,并且不会被那些小玩意、插件或其他功能所干扰。这不是说网站风格平淡无味,想想看,你看不到那些优雅的印刷体,或者是像其他网站上不断滚动的新闻条,是不是觉得耳目一新了?


  除了表层视觉,简洁干净的交互界面让用户能够更集中于写作。它的界面功能已经足够完成用户的核心目标,Medium只需要腾出空间,让奇迹自然发生。

  虽然界面极其简介,但通过设置悬停和隐藏,Medium给用户提供了所有必要的选择(上传图片/视频,插入内容等)。不像传统的博客平台体验给人感觉更多的是「内容管理模式」,Medium把写作功能和上传功能创造性地结合在一起。


  (极简的力量)

  如此简洁如白纸般的界面,即使是再小白的门外汉,写起博客来也会觉得自己如同大文豪海明威。

  网站也提供了其他很好的体验。比如每篇文章都会有一个阅读时间提示,你就会知道你阅读这篇文章大概会花多长时间。而在最基础的编辑页面,你甚至可以直接从百度图片里把搜索的图片复制粘贴上去,而不需要额外下载以及重新上传(这对那些长期写博客的博主来说真是一次解放!)。


  上述这些精巧细微的设计看似对于一个博客平台来说并非缺一不可,但正是它们出乎意料的有用,才提升了设计的档次。这些特质不只博用户一笑,也使他们更好地完成目标。如果你想创造一个完美的「愉悦设计」,就一定要在交互设计中加点「小心思」进去。

时间: 2024-08-30 20:55:57

四个案例教你打造集才华与美貌与一身的网站!的相关文章

老班:手把手教你打造完美符合SEO的博客(四)

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 老班坚持每天写一文,陆续写出了<手把手教你打造完美符合SEO的博客>前三讲内容,并都在A5里投稿了,内容已经讲到了如何选择博客主题这方面内容. 上一讲,老班讲了<如何选择博客主题>的初步思路,今天老班继续对博客的主题进行优化讲解,从SEO的角度,讲解如何进一步选择博客主题. 我们做一个优秀的博客,最大的希望就是能够让更

教你打造性感无比的PPT封面

今天给大家分享一个来自PPT达人面包的教程,一个手把手教你打造一款性感无比的PPT封面.这个PPT封面的灵感来源:是11月20日在逛淘宝的时候无意间看到的,觉得设计感不错,而且PPT可以非常容易的实现,所以今天给大家分享这种类型的版面设计. 先看上面这个图,我们先分析一下PPT页面构成的元素. 1.有质地的底纹; 2.底纹有渐变的效果,中间较亮,周边暗,可以起到聚焦的作用; 3.虚线的描边; 4.倾斜的字体; 5.不规则带阴影的图形(日期). OK,如果这儿东西继续演变下去,作为PPT模板,最核

30分钟教您打造自己的代码生成器

原文:30分钟教您打造自己的代码生成器             哇咔咔,离上次写文又有几个月了.不过上次写的<这些开源项目,你都知道吗?(持续更新中...)[原创]>受到广大读者的赞赏和推荐,也使得自己更有动力去写技术文章.好了,废话不多说,直接切入正题.       前方高能预警,由于此篇博文适合初学者入门或者各种大牛老男孩怀念那些年我们一起写过的代码生成器,所以请各路时间宝贵的大神慎重查看此篇博文,误入者后果自负!!!  一.前言背景(3分钟)       博主清晰的记得,大三的时候,老师

教大家打造一只梦幻创意星空眼睛效果

  教大家打造一只梦幻创意星空眼睛效果,要用到PS+SAI软件,纯数表也可以画完.有手绘板就更好画 分类: PS入门教程

三步教你打造非主流照片效果

三步教你打造非主流照片,今天是用最简单的方法快速的用ps把照片制作成非主流效果照片的教程了. 好了来看制作教程吧.用减淡工具,如下图设置. 再对MM脸进行一下下,如上图.

想感受“新零售”的未来吗?请看这四个案例!

文 | 崔瀚文 阿里研究 日前,阿里研究院.云零售事业部联合发布了<云服务重构新零售--阿里巴巴商业服务生态白皮书2017>.报告通过近百页的阐述,该报告全面而详实地介绍了阿里巴巴云零售服务生态系统的最新进展情况. 尤其是,通过数十个全新案例的引入,对于当前最前沿.最领先的服务平台.服务工具.服务市场进行了具体介绍. 本次我们从中甄选了四个案例,让读者从具体的现实实践中感受"新零售"的未来: 美宝莲:两小时卖出10000支口红 2016年4月14日傍晚,前往美宝莲纽约新品发

老班:手把手教你打造完美符合SEO的博客(三)

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 老班在前面两讲<老班:手把手教你打造完美符合SEO的博客(一) >与<老班:手把手教你打造完美符合SEO的博客(二) >主要讲了: 1.博客的策划(长期计划与短期计划) 2.如何选择博客程序(选择自己合适的,才是最好的) 这一讲的内容是:如何确定博客的主题. 写博如果仅仅是个兴趣而已,或者仅仅把它当做写日记一样看待.我

淘宝携手盛大游戏,打造集网游与电商于一体的B2C模式新形态

2月22日,淘宝携手盛大游戏,宣布双方正式达成在互联网领域展开全方位的战略合作,打造集网游与电商于一体的B2C模式新形态.这并不是淘宝在游戏上的首次试水.淘宝先后涉足虚拟道具交易市场和网页游戏联运平台.2012年,淘宝虚拟道具市场成交额276亿,位居行业第一. 淘宝行业运营事业部网游资深总监任伟认为,这次合作符合淘宝"游戏电商化"的发展策略,盛大游戏优质内容的加入,帮助提升了淘宝平台的内容价值. 与以往不同的是,淘宝和盛大的合作将从客户端网游开始,而不是单纯的网页游戏联运.盛大游戏副总

网络基础二 tcp/ip协议簇 端口 三次握手 四次挥手 11种状态集

第1章 概念介绍 1.1 VLAN 1.1.1 什么是VLAN VLAN(Virtual LAN),翻译成中文是"虚拟局域网".LAN可以是由少数几台家用计算机构成的网络,也可以是数以百计的计算机构成的企业网络.VLAN所指的LAN特指使用路由器分割的网络--也就是广播域. 1.1.2 划分VLAN的目的 1.     提高安全性 a)       举个例子:没有划分VLAN前,交换机端口连接下的所有PC都处于一个VLAN中即一个广播域中,实现ARP中间人攻击太简单了.划分了VLAN之