你的设计够出类拔萃吗?分享一些设计原理在网站的运用案例

          设计是在满足用户基本需求的前提下,再在设计过程中使用户产生共同感受和在用户使用过程中提升用户体验的行为。以此推导,设计是源于生活的再优化技能。原研哉大师也认为,设计不仅仅是制造技术,而是从生活中发现新问题的行为。再由此探寻下去,所谓的设计之美,其实质也是在平凡的日常生活中,擦出令人眼前一亮的创意火花。许多设计师都在想,如何才能使自己的设计能免于俗套,在众多的同类设计中脱颖而出。以下将根据一部分设计原理来分享一些案例。

友好的设计

        设计既然是提升用户体验的行为,那首先必须是友好的。所谓友好,就是在用户使用过程中有更好的引导,又或是近年讨论火热的情感化,与用户产生共情。

        当点击一个无效或不存在的链接时,网站通常会弹出一个404页面,用户一般会直接点击关闭离开。大多数时候,用户看到这个页面都是不快的,但对于网站的运行来说,这个页面也是必须存在的。若页面在做好行为引导的同时,和用户产生情感共鸣,或创造一些巧妙的视觉变化,令用户喜出望外,这将区别于普通的404页面,甚至令用户对404页面产生新的期待。

图片发自简书App

        萌购,一个国内日本亚马逊的代购平台。

        上图是它的商品不能购买提示页,一般出现于已被频繁购买导致不能代购的商品,或因运输禁令,海关条例原因不能下单的商品。      页面除了文案说明商品不能购买,配图是个用虚线勾勒的萌购娘形象,表情悲伤,跪地搀扶的动作。与商品不能购买时,用户悲伤不快的心情一致。同时考虑到该平台用户大多都是买日本宅物的用户,采用动漫角色来传递信息,也是投其所好的一个方式。角色形象只用虚线勾勒,还有背后竖排渐隐渐现的代码,告诉用户是不可控原因导致购买行为不能在页面实现下去,即使后台程序员努力了,页面也不能正常显示。

图片发自简书App

Weirdsgn,一个国外设计公司的网站

http://www.weirdsgn.com/404/

        这个团队偏欧美动漫风格,业务范围囊括大多数互联网设计。他们的404页面秉承了他们的设计风格,用了3个动漫形象在密谋做试验的动态场景。他们三人带着护目镜,在灯光下反着光,特别是正中的女士,眼睛透露一抹凶光。以此场景玩笑式暗示用户不应点入该页面,暗示此页面不能正常继续浏览。而且随着用户移动鼠标,该场景能实现3D动效般左右空间透视式移动。配合右侧404文案“哎呀!你要找的怪物不在这里”,更显设计师的幽默感。Oops这个单词也玩笑式的在中间加好几个o来起滑稽的强调作用。文案下方贴心的加上回首页按钮和收藏此页的链接按钮。

图片发自简书App

Illucolor,这是一个法国的设计团队的展示网站

http://www.illucolor.fr/illucolor404.html

          他们的404页面是以网站首页为基础做了页面裂开的效果,大大的404字体和失衡掉落的夸张人物充分体现了页面出现错误后的不可控效果。为了不影响页面效果,按钮设置在左上方。该按钮深色底色反白字,应用网站底部的配色,在白色底色上明显凸出,且做成类似镶嵌在页面上的质感效果,使用户寻找起来并不困难。

设计的色彩

        正如乔布斯所说,世界是由色彩组成的。设计时自然的色彩搭配对产品呈现有一定的参考价值。现在影响世界且用色丰富的大品牌案例数之不尽,最出名的要数谷歌的logo和奥运五环。以下分享的案例是个有趣的网站。

图片发自简书App

http://www.ktk-hd.com/recruit/

        这是日本的一个文具企业KATOKEN的官网首页。      首屏的文案和配图采用色彩斑斓的扁平化文具与色块组成,与其产品品类丰富,色彩多样相一致。文案下是一个游乐场,让用户感觉到用文具也是一件快乐的事。而且页面很多地方都是可动的,可以关注的点很多,整个页面每一个角落都可以细细品味好久。为了与主图适应,页底分割线也是不同颜色线段组成。整个配色和动画效果使用户感受到该品牌的年轻与活力。

简约的设计

        引用《简约之美》,在设计方面,简约不是简单的堆砌和随意的摆放,而是在设计上更强调功能,强调结构和形式的完整。简约而不简单,甚至比随意堆砌更难控制。要突出简约的美,需要反复推敲,认真思考,剔除那些可有可无的,非本质的东西,使设计以高度凝练的色彩和极致简约的结构呈现美。

图片发自简书App

https://amix-design.com/

        这是日本的一个设计公司官网首页。      页面内容不多,问句式主文案,两句辅助语句,模糊动效背景,底部引导icon。主要文案一屏居中,说出了用户的心声——需要做一个设计,该文案底部是若隐若现的公司logo,引导出用户需要的答案。副标题描述了公司的定位和服务意向,“让设计更加贴近身边,在日本的话可以随时接受委托”。背景的图案是一些相连的三维白线,节点是圆。这些图案被模糊并缓慢向前移动,产生了中部文案冲破各种思绪,充满力量向屏幕内部移动的效果。底部正中一个鼠标的小icon,配以下拉文案(scroll down),引导用户向下拉动,了解更多。顶部左边是公司logo,右边是菜单栏,相互平衡。

设计中的比例

        在设计中运用合适的比例,使设计的效果更美观的同时,也使设计排布有据可依。纵观以往很多大师的设计,即使设计时没有刻意使用比例,但因为对美的追求,对合适比例的内在认同,最终都被发现其作品与设计比例原理相一致。常用的设计比例是对称,其次是黄金比例和白银比例。黄金比例指的是把一条线段分割为两部分,较短部分与较长部分长度之比等于较长部分与整体长度之比,其比值是一个无理数,取其前三位数字的近似值是0.618。白银比例是指事物各部分间一定的数学比例关系,其比值为1.414 :1,其精确值为√2:1。白银比例较黄金比例不为人所熟知,现在日本等国较为流行。以下是一个黄金比例的例子。

图片发自简书App

http://808tokyo.com/

      这是一家日本六本木日式餐厅的官网首页。      页面内容不多,左上角logo右上角小字文案。 图片占据整个页面,轮播切换,而且图片的重心都在右边,为了平衡,在左侧中部加了3行文案。

图片发自简书App

        该图是该店店内装饰墙的一部分。拍摄的装饰花的摆放角度符合黄金分割的比例。一速光源由左侧logo露出,使用户在看到官网,就能从这一隅花枝感受到餐厅的高雅恬静。

图片发自简书App

因为是贩卖日本料理的餐厅,展示菜式的美味是必须的。该图拍摄的角度和食物摆放的角度刚好也是黄金分割比例,而且采用了边缘虚化,焦点清晰的拍摄手法。该图充分表现了鱼生的新鲜,美味和食物的精致。

图片发自简书App

        该图拍摄角度和食物摆放的角度的位置也刚好也是黄金分割比例,也采用了边缘虚化,焦点清晰的拍摄手法。鸭胸和配菜摆在右侧,那一列香料碎与鸭胸平衡,斜线的拍法刚好平衡了右侧的重量,整体看各物件的摆放都非常精致。该图对焦在鸭胸上,肉纹细节清晰可见,美味由屏幕溢出。

图片发自简书App

        该图手法和上面的图片类似,重心点在黑鱼子上,构图上大虾和面包的摆放边缘刚好落到黄金分割的比例弧线上,同时,蔬菜的新鲜和虾肉的鲜美跃然图上,看上去使人食指大动。

        设计理论其实还有许多,这里只列举几个,相信多学习参考相关设计理论,多实践,各位设计师同僚们,你们定能创造出更优秀的作品。








最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容