Android与iOS:两种设计语言的和而不同

整体风格对比

IOS: iOS7的Flat Design——是 Mobile 设计里程碑。原本栩栩如生的拟物化设计被拍扁,去除了冗余、厚重和繁杂的装饰效果,变成了“扁平化设计”,其核心思想就是让“信息”本身凸显出来,在设计元素上则强调了抽象、极简和符号化。自此扁平风格开始在移动端设计中广为盛行。

Android: 自从2014年11月3日,Android5.0 Lollipop 正式面向用户推出,Material Design 焕然一新的设计惊艳了全场,不仅仅是视觉效果,全新的“数字纸墨”的空间概念也赋予了界面全新的UI理念。

那么 Flat Design 与 Material Design,两个同样趋于简约的设计理念,他们具体的区别又在哪呢? 以下将会就这个话题具体分析两者在设计思路、动效和其他细节上的不同。

设计思路的不同——开发与封闭

如果只能用一对词来概括 Android 和 iOS 系统的不同,那应该是开放与封闭,也正是这两个截然不同的系统特性带来了设计思路的不同。

Android 的开放带来了多样化设计的同时(使用自定义控件几乎没有不能实现的设计效果),同时也带来了“杂乱无章”之感和众多因为不统一而造成的用户在使用时无从下手的情况。

iOS的 HIG(《Human Interface Guideline》人机交互规范)则更多“迫使”设计师去更多的使用系统原生的控件,设计师对于控件的修改非常局限,但这样做的好处就是每个 App

的基本操作都是在规范之内,具有一定的统一性,用户使用起来非常的方便,学习成本也相应降低了不少。这两者很难去评判孰优孰劣,可以说“iOS 的下限比 Android 高,但 Android 的上限比 iOS 高”,伴随着大屏时代的脚步,可以看到双方都在努力靠近彼此的一个趋势,相信在不久的将来,就可以达到一种“和而不同”的平衡。

动效展现原理不同——换个角度理解世界

现在动效的运用已经成为了许多 APP的标配,合理的动效不仅仅是为了视觉效果上的“酷炫”,更是帮助用户更好的理解层级、转场关系和关注到重点信息的利器。然而细心的设计师会发现,Android

和 iOS 的动效思路是截然不同的。用一句话概括两边设计语言的物理模型就是: Material Design 运用的是机械物理和电磁物理,而iOS 的动效更多建立在镜头运动和景深变化上。究其设计语言的本质就是让用户可以把客观经验移植到界面的一种思路。

Material Design 的隐喻是纸张,用户的手指就像磁铁一样把电子纸墨吸引过来,点击后就会泛起“涟漪”作为一个交互响应。而其他物体的排列则按照一种“深浅”的层级来排布,离手指越近的元素越亮,阴影越深,而离开远的元素则越暗,直至淹没在黑暗之中。

细观 iOS 的系统动效可以发现,iOS 的桌面就好像一片星空,每个 App 都是其中的一个小星星(点),每当用户去点击,镜头就会切近,而背景则是隐入了一片高斯模糊的景深之中,这应该是每个 iOS 用户最深刻的动效体验之一了。 高斯模糊也成为了 iOS 特有的一个表达层级关系的利器 (其中不仅是模糊,还存在着镜头晃动时的位移)。

同样类型的动效还体现在打开 APP 的时候由一个点放大成一个面,包括“日历”App 和“相册”App(皆为系统应用)中年-日-月切换的操作,均是镜头思路的表现形式。

无论是哪种动效,本质上都是帮助用户更好的理解界面信息在时间和空间上的关系。

其他设计形式——和而不同

(1)Tab bar的设计

iOS的Tab放在页面底部,通常通过点击来切换。Android一般放在页面顶端,可以通过滑动页面来切换Tab,当然Tab可以点击切换。Tab多的话,Tab本身也可以滑动。

单条item的操作

iOS单条item的操作有两种,点击和滑动,点击一般进入新的页面,滑动会出现对这条item的一些常用编辑操作,如微信里滑动一条订阅号,会出现取消关注和删除。

Android中,单条item的操作也有两种,点击和长按,点击一般进入新的页面。长按进入一个编辑模式,可以在里面进行批量和其他一个操作,比如删除,顶置等等。

字体

iPhone上的字体英文为:HelveticaNeue 。iOS9之后变为 苹方字体 ,该字体提供了6种字重。分别为:常规体、极细体、细体、纤细体、中黑体、中粗体。使用不同字重,更加界面上不同层级信息的表达。

Android 上的字体为:Droid sans fallback,是谷歌自己的字体,与微软雅黑很像。

规范与用户习惯的平衡

最后谈一谈微信,这个用户量级重达10亿的APP,他们是如何在Android和iOS的设计版本中平衡规范与用户习惯的。

微信的tab导航,iOS和Android端依然是保持一致,都放在底部的。其实在Android4.0时期,微信出过一个严格按照android规范的版本,把导航放在里侧滑里,但是随着用户使用习惯的逐渐被固化,发现很多常用的功能是不适合放在侧滑里的。所以后来的微信android版,还是把主导航放在了底部。只是在单条item的操作、输入框的样式等细节上按照android的规范来做。

总结

做设计,既要借鉴官方、行业主流的设计形式,更要分析和总结别人设计形式背后的逻辑。官方、主流设计已经将用户的认知和使用习惯培养起来了。

正如交互之父Alan  Cooper所说:如果你找不到更好的设计方案,就按照目前的标准来做,强打差异化有违用户习惯的,可能这对用户价值是有伤害的。 这就是最后要用微信为载体对比iOS和Android两大系统的差异。设计的目的在于提供适当场景的解决方案,当目前市场的解决方案都满足不了现有的业务需求,我们就要学会创造,但是在创造过程中最好依据现有标准设计来改变与创造。

  • Android涓巌OS:涓ょ璁捐璇█鐨勫拰鑰屼笉鍚
    绛旓細IOS锛 iOS7鐨凢lat Design鈥斺旀槸 Mobile 璁捐閲岀▼纰戙傚師鏈牘鏍╁鐢熺殑鎷熺墿鍖栬璁¤鎷嶆墎锛屽幓闄や簡鍐椾綑銆佸帤閲嶅拰绻佹潅鐨勮楗版晥鏋滐紝鍙樻垚浜嗏滄墎骞冲寲璁捐鈥濓紝鍏舵牳蹇冩濇兂灏辨槸璁┾滀俊鎭濇湰韬嚫鏄惧嚭鏉ワ紝鍦ㄨ璁″厓绱犱笂鍒欏己璋冧簡鎶借薄銆佹瀬绠鍜岀鍙峰寲銆傝嚜姝ゆ墎骞抽鏍煎紑濮嬪湪绉诲姩绔璁′腑骞夸负鐩涜銆Android锛 鑷粠2014骞11鏈3...
  • android鍜宨os鍖哄埆鏄粈涔堟剰鎬
    绛旓細Android鍜宨OS鏄涓ょ涓嶅悓鐨勭Щ鍔ㄦ搷浣滅郴缁熴侫ndroid鏄熀浜嶭inux鍐呮牳寮鍙戠殑寮婧愭搷浣滅郴缁燂紝鑰宨OS鍒欐槸鐢辫嫻鏋滃叕鍙稿紑鍙戠殑涓撴湁鎿嶄綔绯荤粺銆傝繖涔熸剰鍛崇潃Android鍏锋湁鏇村箍娉涚殑鍙畾鍒舵у拰寮鍙戣嚜鐢卞害锛岃宨OS鍒欐洿鍔犵ǔ瀹氬拰楂樻晥銆傚彟涓涓樉钁楃殑鍖哄埆鏄紝Android鍏佽鐢ㄦ埛浠庡涓簲鐢ㄥ晢搴楀拰鏉ユ簮涓嬭浇搴旂敤锛岃宨OS鍒欏彧鍏佽鐢ㄦ埛浠庡畼鏂瑰簲鐢ㄥ晢搴...
  • 鎵嬫満鐨勪袱涓郴缁熸槸鎸囦粈涔
    绛旓細Android鍜宨OS 1銆丄ndroid鏄竴涓熀浜嶭inux鍐呮牳鐨勫紑鏀炬簮浠g爜绉诲姩鎿嶄綔绯荤粺锛岀敱璋锋瓕鎴愮珛鐨勫紑鏀炬墜鎸佽澶囪仈鐩熸寔缁瀵间笌寮鍙戯紝涓昏璁捐鐢ㄤ簬瑙︽懜灞忕Щ鍔ㄨ澶囧鏅鸿兘鎵嬫満鍜屽钩鏉跨數鑴戜笌鍏朵粬渚挎惡寮忚澶囥侫ndroid鏈鍒濈敱瀹夎开路椴佸绛変汉寮鍙戝埗浣滐紝鏈鍒濆紑鍙戣繖涓郴缁熺殑鏃╂湡鏂瑰悜鏄垱寤轰竴涓暟瀛楃浉鏈虹殑鍏堣繘鎿嶄綔绯荤粺锛屼絾鏄悗鏉ュ彂鐜板競鍦洪渶姹...
  • android鍜宨os鐨勫尯鍒,瓒婅缁嗚秺濂姐
    绛旓細iOS娌℃湁铏氭嫙鏈猴紝鎬ц兘瑕佸ソ涓浜涳紝褰撶劧杩欎釜宸埆浼氶殢鐫Google鐨勬敼杩涜秺鏉ヨ秺灏 iOS鐨勫紑鍙戞鏋跺熀鏈笂鍜孧AC涓婇氱敤锛屽悓鏍风殑鐭ヨ瘑锛屽彲浠ュ紑鍙戞墜鏈猴紝涔熷彲浠ュ紑鍙慚AC搴旂敤锛Android娌℃湁杩欐牱鐨勪紭鐐 2銆佷笌鍏朵粬璁惧闆嗘垚绋嬪害 iOS鐨勮澶囬泦鎴愬害鍜岄┍鍔ㄤ紭鍖栭兘鏄渶濂界殑銆傜數婧愮鐞嗕竴鍧楀氨鍙涓鏂戯紝鑰孉ndroid鍘傚晢灏遍奔榫欐贩鏉傘傚彲鑳芥帓澶...
  • ios绯荤粺鍜孉ndroid鍖哄埆?
    绛旓細1銆佷袱鑰呰繍琛屾満鍒朵笉鍚岋細IOS閲囩敤鐨勬槸娌欑洅杩愯鏈哄埗锛瀹夊崜閲囩敤鐨勬槸铏氭嫙鏈鸿繍琛屾満鍒躲2銆佷袱鑰呭悗鍙板埗搴︿笉鍚岋細IOS涓换浣曠涓夋柟绋嬪簭閮戒笉鑳藉湪鍚庡彴杩愯锛涘畨鍗撲腑浠讳綍绋嬪簭閮借兘鍦ㄥ悗鍙拌繍琛岋紝鐩村埌娌℃湁鍐呭瓨鎵嶄細鍏抽棴銆3銆両OS涓敤浜嶶I鎸囦护鏉冮檺鏈楂橈紝瀹夊崜涓暟鎹鐞嗘寚浠ゆ潈闄愭渶楂樸
  • ios鍜宎ndroid璁捐瑙勮寖鍖哄埆
    绛旓細 1. StatusBar/TopBar 宸紓鍖栬璁  2. 甯哥敤鐨勪笁涓郴缁熷浘鏍/鎺т欢宸紓鍖  3. 鎼滅储/杈撳叆鎺т欢宸紓鍖 4. 寮圭獥鏍峰紡宸紓鍖   涓夈Android绯荤粺浜や簰涓巌OS绯荤粺浜や簰鐨勫樊寮傚寲璁捐 1. 浜や簰鏂瑰紡锛氶櫎浜嗕笂闈㈡彁鍒颁簡寮圭獥鏍峰紡涓庝氦浜掑樊寮傚寲涔嬪锛屽浜庝竴浜涚郴缁熶氦浜掕涓猴紝鎺ㄨ崘灏介噺浣跨敤 iOS ...
  • 濡備綍鍋氫竴濂楄璁$鍏煎Android鍜宨OS鍙屽钩鍙,IOS鍜屽畨鍗揢I鐨勫尯鍒
    绛旓細iOS绯荤粺浣跨敤鐨勫瓧浣撴槸Helvetica Neue锛岃瀹夊崜浣跨敤鐨勬槸Roboto銆傝櫧鐒涓ょ瀛椾綋鐨勯鏍煎悇涓嶇浉鍚岋紝浣嗗畠浠殑瑙勬牸鏄帴杩戠殑銆傚鏋滄兂淇濊瘉閫熷害鐨勮瘽锛屼篃鍙互閫夋嫨涓绉嶅瓧浣撲娇鐢ㄣ備絾闇瑕佷笌寮鍙戣呭仛濂芥矡閫氾紝閫夋嫨鐨勫瓧浣撳ぇ灏忚閫傜敤浜庡钩鍙颁腑銆傚湪澶勭悊杈冧负閲嶈鐨勫竷灞鎴栨瀬绔ぇ灏忕殑瀛楀彿鏃讹紝寤鸿瀵逛袱绉嶅瓧浣撻兘杩涜娴嬭瘯銆傚鏋滄兂杩芥眰鏁堟灉...
  • 娴呰皥iOS涓嶢ndroid璁捐瑙勮寖:6绫讳氦浜掕璁¤鑼冨姣
    绛旓細IOS锛鍑虹幇鍦ㄥ睆骞曚腑闂达紝鍙互甯﹀浘鏍囷紝鍙互涓嶅甫锛屽彲浠ユ槸闈欐佺殑锛屼篃鍙互鏄姩鎬佺殑銆Android锛氫笉鍙互甯﹀浘鏍囷紝涓嶈兘鏄姩鎬佺殑锛屾渶澶氬彧鍙互甯︿竴涓搷浣滄寜閽紝鏈澶氬彧鑳藉嚭鐜颁竴涓彁绀猴紝涓嶈兘鍜屼綆绔殑鎮诞鎸夐挳閲嶅悎銆傝В鏋愶細IOS鐨勮璁$悊蹇垫槸灏介噺涓嶆墦鎵扮敤鎴凤紝鍙鐢ㄦ埛鑳界湅瑙佸彉鍖栵紝杞绘槗涓嶄細鍑虹幇鎻愮ず锛屽彧鏈変竴浜涚敤鎴锋棤娉曟劅鐭ユ椂锛...
  • ios鍜宎ndroid鎵嬫満鐣岄潰璁捐鐨勫尯鍒
    绛旓細瀹夊崜寮婧愶紝鍙畾鍒 鏀圭紪
  • 瀹夊崜鍜孖OS鍚勮嚜鐨勪紭鍔
    绛旓細android浼樺娍锛1.绉诲姩绔(鎵嬫満绔)姝e湪閫愭铓曢pc绔(鐢佃剳绔)鐨勫競鍦轰唤棰濓紝鑰宎ndroid鐨勪晶閲嶅氨鏄Щ鍔ㄧ寮鍙 2.鐩墠涓浗甯傚満涓婃渶绱т繌鐨涓ょ绯荤粺IOS銆乤ndroid锛岃宎ndroid鐨勪紭鍔垮湪浜庢洿澶氱殑搴旂敤閫夋嫨锛屼笌澶氬厓鍖栫殑鑷畾鍒剁┖闂 3.android鏄紑婧愮殑锛岀浉瀵逛簬鑻规灉鐨処OS鏉ヨandroid鏇村鏄撲笂鎵嬶紝澶嶆潅绋嬪害娌℃湁闅句簬鐞嗚В鐨勫湴鏂广
  • 扩展阅读:android苹果版下载 ... 苹果免费下载app安装 ... android官方正版下载 ... 苹果android怎么设置 ... 苹果手机android在哪打开 ... android6.0下载官网 ... 苹果android怎么打开 ... android服务监视手机 ... 十款app禁止app安装 ...

    本站交流只代表网友个人观点,与本站立场无关
    欢迎反馈与建议,请联系电邮
    2024© 车视网