最近准备做ipad web app 读到此文故收之。

大部分的用户都并非对体验与设计有深入研究,而是从“看着舒服、用着好用”的角度来衡量一款产品,据笔者观察一些网页设计与数码设计,发现两者之间有着异曲同工之妙,他们对用户的研究、设计发展趋势几乎是共通的,例如苹果著名的COVERFLOW,和网站设计首页焦点图展示的效果。因此,我们常提的CROSSOVER思维可以用上了,互联网与传统数码的视觉设计与交互体验可互为灵感参考。

前言

为什么蓝魔的设计感觉“山寨”,而苹果的设计却被无数人追捧为“艺术品”?

为什么很多国产品牌模仿国际品牌,作品仍然缺乏吸引力?

笔者认为,很大的原因是因为他们都缺少自己的设计理念。好的设计应该有自己的理念,如QQ概念版的设计理念是“生命力空间感时间感”,所有的设计都应该围绕理念进行,所有的模仿都应该建立在理念基础上,这是设计的灵魂。苹果的理念是简约质感;Google是技术派,看似简单却有对用户行为深刻的理解;索爱手机的UI追求精致时尚;韩系品牌大都走柔和可爱风。好的品牌都有自己的独有风格和深入理解,不管如何模仿借鉴,精髓仍在。

关键词一:圆角阴影高光

圆角、阴影、高光广泛应用于苹果产品设计和互联网设计中,这三种元素的加入,可以增加图标的“质感”。

仔细观察一下IPAD的图标,是否很明显的体现了这三种设计元素?圆角处理,月牙型的高光像从上而下打光,字体上淡灰色的阴影(是为了防止白色字体在白色背景上看不清楚,苹果考虑很细致)。不仅是产品,苹果的LOGO设计都没有脱离这三种元素。

我们再看看Google的chrome浏览器,圆角、阴影、高光的效果仍在(图标圆角处理、图标边缘阴影以突出立体感、鼠标移至某一图标时的高光效果)。

关键词二:空间感

空间感并非一个空泛的概念,而是处处体现在设计中。它的一个典型表现方式,就是打破平面感,用立体与三维方式来展现。空间感的设计一是可以增加炫酷和华丽,二是可以用于凸显重要内容。

空间感的典型运用之一:苹果cover flow专辑封面展现方式

空间感运用于网站设计上,OPPO官网改版时焦点图类似cover flow效果。

有了空间感的思维之后,发现常规的设计可以有非常多的突破!那就是,把每一个界面都想象成一个实实在在的物体,任我们翻转把玩!例如打破常规的图片展示,我们可以把图片翻过来,在背面写备注;使用多点触摸把图片抓到叠在一起;用便签纸的立体形式展示备忘录,随意贴在桌面的任何地方等等。

关键词三:半透明

半透明的设计元素是个人的一个偏好,尤其当用于菜单与边框设计时,半透明可增加灵动、深邃和通透感,别有风韵!另外,半透明也可用于当一些菜单弹出,却不想挡住背景,可把菜单设计成半透明的感觉,既美观又不干扰视觉。

仔细观察一下IPAD的设计,很多地方都用了半透明的元素,包括首先进入时“移动滑块来解锁”的界面边框,以及进入后的主界面边框。

半透明元素在网站设计中也广泛沿用,比如著名的twitter。

另一个用到半透明元素的网站。

关键词四:拟物化生命力

提起拟物化,大家首先想到的肯定是IPAD的IBOOKS书本表现方式,如同真书般惟妙惟肖,也赢得了很多用户的口碑。拟物化使用好了,可以增加亲切感,减少数码产品的冰冷感,因为用户对生活中的事物才是最熟悉的。同时,拟物化的使用,往往可以在第一眼打动用户,就是我们俗称的“惊艳”。

微软courier的拟物化,让数码脱离了机器冰冷的感觉。

除了IBOOKS之外,三星P3里的小插件,飞舞的蝴蝶、散落花瓣的花朵、饼干人、电灯调节亮度等,其实也是试图通过生活中的事物,来增加用户的好感。

在网站设计中,也不难发现一些生命力的元素,如twitter的小鸟,可爱生动。

关键词五:动态效果

很难想象如果没有动态效果的使用,设计将会变成怎样。动态效果将会让设计更加绚丽、好玩、生动。

仔细观察一下苹果,我深深被它界面过渡的动态效果所吸引,华丽又不失自然。例如照片删除时唰的回到垃圾桶的效果,还有书本翻页的过渡效果。

灰常多人都在玩的植物大战僵尸,每种下一棵植物,它都会轻轻摇摆,是不是很可爱呢?这也是一种动态效果。

我承认喜欢索爱的原因就是因为它的UI符合我的胃口。除了图标设计精致之外,图标周围有动态变幻的小元素,就像跳舞的精灵。

很多网站也用动态效果来表现,如菜单在鼠标移上去时的动作反馈,不仅绚丽动感,也是给用户操作信心。

关键词六:拟物音效

这里需要再提一下植物大战僵尸,仔细观察这个游戏,会发现它也闪耀着智慧的光芒,从视觉设计的生动感、每个植物与僵尸角色的设计、情节布局的环环相扣、甚至是音效的配合都有很多值得学习的地方。

植物大战僵尸中大量使用了拟物音效,种植物时与草地摩擦的声音、子弹打到僵尸身上的响声、僵尸来临时的恐怖音效、脑子被吃掉时的哀嚎。拟物音效让这个游戏更加生动,不会苍白平淡。

再观察一下IPAD,翻阅图书时纸张的摩擦声、翻阅报纸时报纸的摩擦声,这个小细节让我感觉很兴奋。更加认定这个品牌是在用心做产品。

音效的使用可以让用户更有身临其境的感觉,尤其是模拟真实的音效。

以上是这几天的不完全观察,IPAD设计值得学习的地方还有很多,例如提示与暗示的巧妙使用、皮套的贴心设计等。笔者认为IPAD作为电脑的补充,是非常成功的一款产品(平板电脑完全替代电脑是不可能的)。至少,苹果在如今传统数码新品类发展的瓶颈时期,开拓了符合人类使用习惯的新思路,单从这点值得很多中国品牌学习。

转载于:https://www.cnblogs.com/radom/archive/2012/03/30/2426184.html

苹果iPad视觉设计分析相关推荐

  1. 不一样的手感至薄A7强芯 苹果iPad Air评测

    没有Touch ID,没有传说中的土豪金,这代iPad的发布会少了一丝浮夸而多了更为实在的改进,这次发布的iPad Air和带有Retina屏幕的iPad mini其实早在发布之前已经被曝光,因此外形 ...

  2. 部分用户称苹果iPad Air 5产品质量下降 外壳有异响

    3月21日消息,据国外媒体报道,部分苹果用户在外网社交媒体发帖称,苹果iPad Air 5出现产品质量下降问题,普遍来说,用户抱怨的点集中在设备后壳问题. 用户抱怨称,iPad Air外壳明显更薄,吱 ...

  3. 会涨价么?苹果iPad和MacBook拟采用三星OLED屏幕

    苹果从Apple Watch开始采用更轻更薄.亮度更高色彩也更鲜艳的OLED屏幕,随后扩展到了iPhone产品线,而现在外媒的报道显示,苹果的iPad和MacBook这两条产品线也有意采用OLED屏幕 ...

  4. 苹果ipad如何横向_苹果iPad的阵容是一个完整的混乱

    苹果ipad如何横向 In the last two months Apple has released three new iPads, first was the iPad Pro, which ...

  5. 打入苹果ipad的大陆芯片供应商

    苹果ipad发布,平板电脑立即成为业界热点,其实作为概念平板电脑并非Apple的专利,作为掌上操作的计算平台,平板电脑从应用来看并没有特别创新,虽然如此老杳依然看好苹果ipad的未来前景,即使应用没有 ...

  6. 吃鸡神器!免费送一台新款苹果 iPad

    为了回馈长期以来各位老铁对本号的关注支持,更好的去看paper,提高技术水平,直接给你送一个 2021新款苹果iPad !无论是自己用,还是当礼物送人,都比较不错的. 赠送规则 本号的读者众多,大家使 ...

  7. 2021 新款苹果 iPad 真香,包邮送一个!

    为了回馈长期以来各位老铁对本号的关注支持,更好的去看paper,提高技术水平,直接给你送一个 2021新款苹果iPad !无论是自己用,还是当礼物送人,都比较不错的. 赠送规则 本号的读者众多,大家使 ...

  8. 吃鸡神器!新款苹果 iPad,免费送一台!

    为了回馈长期以来各位老铁对本号的关注支持,更好的去看paper,提高技术水平,直接给你送一个 2021新款苹果iPad !无论是自己用,还是当礼物送人,都比较不错的. 赠送规则 本号的读者众多,大家使 ...

  9. 迎国庆,2021新款苹果 iPad,包邮送一台!

    为了回馈长期以来各位老铁对本号的关注支持,更好的去看paper,提高技术水平,直接给你送一个 2021新款苹果iPad !无论是自己用,还是当礼物送人,都比较不错的. 赠送规则 本号的读者众多,大家使 ...

最新文章

  1. 可构建AI的「AI」诞生:几分之一秒内,就能预测新网络的参数
  2. Leangoo敏捷开发项目管理平台新增测试用例管理、测试结果统计功能
  3. V2X 是自动驾驶重要基石,巨头纷纷抢滩布局
  4. oracle12基本操作
  5. awk之特征相同行的合并 ~转
  6. mysql高可用最佳实践_mysql高可用方案
  7. C++模板函数只声明一种类型但输入两种类型参数
  8. debian9为什么默认是pip2_Debian9 安装后基本配置
  9. 4009-基于邻接表的边的删除(C++,附思路)
  10. 解惑“高深”的Kafka时间轮原理,原来也就这么回事!
  11. C++ Traits技术
  12. 【干货分享】通用工具类
  13. TensorFlow精进之路(九):TensorFlow编程基础
  14. Essential Booklist of .Net Framework
  15. 遗传算法matlab_三分钟学会遗传算法
  16. C站能力认证(C4前端基础认证) //任务二:根据浮动布局以及定位布局的特性,实现构建下列(截图)中的页面
  17. Latex排版大括号让其左对齐
  18. uniapp 小程序端上传并压缩图片
  19. 【Udacity】数据的差异性:值域、IQR、方差和标准差
  20. 苹果6s为什么连接不上服务器未响应,iPhone6s/6s plus连接iTunes没反应怎么办?苹果手机无法连接iTunes的解决方法...

热门文章

  1. snap安装指定版本的软件
  2. poj2411 Mondriaan's Dream (状压dp+多米诺骨牌问题)
  3. 写给 Android 应用工程师的 Binder 原理剖析
  4. 46.Express框架 GET 方法和POST 方法
  5. 【Python】Python 过滤列表
  6. JavaScript强化教程 -- cocosjs场景切换
  7. JAVA构造方法,继承关系和SUPER关键字
  8. 快速找到Word 2007长文档的某一页
  9. Scott Mitchell 的ASP.NET 2.0数据教程之十一: 基于数据的自定义格式化
  10. 修改/etc/sudoers权限后的补救方法