android產品設計

Ⅰ 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 平台設計規范有哪些

1、尺寸以及解析度：

Android的界面尺寸比較流行的有：480*800、720*1280、1080*1920，我們在做設計圖的 時候建議是以 480*800的尺寸為標准；

2、界面基本組成元素：

界面基本組成元素包括：狀態欄+導航欄+主菜單欄+內容區域；以480*800的尺寸為標准下的 各個元素的高度(其實導航欄和菜單欄每一個應用都或許不一樣，android對於尺寸沒有太明確的 數據規范)如下：

3、字體：

Android 系統中，Droid Sans 是默認字體，與微軟雅黑很像；

4、操作欄：

1、」操作欄」對於 Android 應用來說是最重要的設計元素，它通常在應用運行的所有時間都呆 在屏幕頂部；

2、 操作欄的基本布局：

1向上＋2 Spinner視圖控制＋3 重要操作按鈕＋4 更多操作：其中，向上按鈕，點擊後是去到 當前界面的上一個層級，非第一層級界面有此按鈕，第一層級界面則無向上按鈕；Spinner 是 用於展示內容的下拉菜單，其內容包括視圖的快速切換和顯示相關內容的完整信息；更多操作 （action overflow）是集合操作欄中不常用的和非重要操作的地方。

5、多面板布局：

多面板布局更多的是針對平板電腦，把手機端的目錄視圖和詳情視圖兩個層級的界面，甚至更 多的頁面，復合展示在同一個界面中，有效地利用平板電腦的屏幕空間，扁平化層級結構，簡 化導航。這點在iPad上已經運用得相當嫻熟了。

6、選擇：

Android4.0中的長按與Android2.3及更早期的版本有很大的不同。早期版本長按操作後，是 出現情境菜單的浮出層。在Android4.0中，長按後在操作欄的位置會覆蓋一個臨時的情境操 作欄，不再彈出情境菜單浮出層。在臨時情境操作欄的環境下，當前界面的內容項允許被單個 處理，也允許被批量處理。

7、返回和向上：

返回按鍵用在手機全局的虛擬導航欄中，基於用戶最近查看的界面歷史，採用時間倒序的方式， 連接界面間的關系。向上按鈕用在操作欄的左側，基於層級結構，點擊後是去到當前界面的上一 個層級，若當前界面已經是最高一級，則沒有向上按鈕。

8、主題樣式：

推出三套默認主題：Holo淺色主題、Holo深色主題、Holo淺色底+深色操作欄主題。主推app在 這三套默認主題的基礎上做設計，以加快app研發效率，但只是建議使用，並沒有完全強制。

9、觸摸與反饋：

用戶觸摸應用中的可操作區域，應當在視覺上有響應，微小的反饋會給用戶帶來很好地效果；

10、按鈕：

1、按鈕的3種表現形式如下圖：

2、對於僅包括圖標的按鈕，不需要使用背景色；

11、滑塊：

滑塊的幾種表現形式如下圖：

12、進度條：

如果某個操作需要花費很長的時間，就需要用進度條的指示和旋轉圈的形式來表示：

1、如果你可以知道當前任務完成的比例，那麼使用進度條，讓用戶了解大約還需要多久才能完成；

2、當使用旋轉圓圈時，不要配以文字標簽。旋轉的圓圈已經表明了正在進行後台操作。

13、開關：

用戶通過開關作出選擇，包括3種形式：復選框+單選按鈕+開關；

1、復選框：用戶可以在一個集合中作出多個選擇：

2、單選按鈕：單選按鈕允許用戶在一個集合中做一次選擇；

3、開關：開關控制單個選項的狀態；

14、對話框：

應用通過對話框讓用戶作出決定或者填寫一些信息，

1、對話框的左邊一般情況下是取消按鈕，右邊是確定按鈕；

Ⅲ Android 5.0 Lollipop甯︽潵鍝浜涘墠鎵鏈鏈夌殑璁捐″拰鎬ц兘鎻愬崌錛

Android 5.0 Lollipop錛氬彶涓婃渶澶у彉闈╃殑鍗佸ぇ浜鐐

璋鋒瓕鐨凙ndroid緋葷粺鍦ㄤ笉鍒頒竴騫寸殑闂撮殧鍚庯紝浠嶬itKat璺ㄨ秺鍒頒簡Lollipop錛屼袱嬈＄硸闇滃懡鍚嶅槳鏄懼叾钀ラ攢絳栫暐銆侺ollipop鐨勫嚭鐜版棤鐤戞槸Android鍘嗗彶涓婃渶澶х殑闈╂柊鍗囩駭銆備互涓嬫槸鍏朵腑鍗佷釜鍏抽敭鐗規э細

1. Material Design椋庢牸鐨勬墎騫沖寲鐣岄潰

鏂拌捐¤璦褰誨簳姝ュ叆鎵佸鉤鍖栨椂浠ｏ紝鍊熼壌鍗板埛璁捐″厓緔狅紝鏃ㄥ湪鎻愪緵綰稿紶鑸鐨勮Е鎰熶綋楠屻傚疄浣撻殣鍠葷悊蹇佃祴浜堢晫闈㈠疄浣撹〃闈涓庤竟緙樼殑璐ㄦ劅錛屾彁鍗囩敤鎴風悊瑙ｅ拰璁ょ煡銆傚姩鎬佹晥鏋滃垯澧炲己浜嗘暣浣撹繛緇鎬т綋楠屻

2. 璁懼囧吋瀹規ф墿灞

Android Lollipop璺ㄨ秺璁懼囩晫闄愶紝鏀鎸佷粠鏅鴻兘鎵嬫満鍒版櫤鑳界數瑙嗐佹苯杞︾瓑澶氱被璁懼囷紝涓庡井杞鐨刉indows 10璺ㄥ鉤鍙扮瓥鐣ョ浉鍛煎簲銆

3. 鐜頒唬鍖栫殑閫氱煡涓蹇

鏂扮殑閫氱煡涓蹇冧紭鍖栦簡淇℃伅鍛堢幇錛岀獊鍑洪噸瑕佷簨欏癸紝鎻愪緵閿佸睆鏌ョ湅鍜屽嵆鏃跺洖澶嶅姛鑳斤紝鎻愬崌浜嗙敤鎴蜂氦浜掍綋楠屻

4. ART鉶氭嫙鏈虹殑鎬ц兘椋炶穬

ART鉶氭嫙鏈虹殑寮曞叆錛屽疄鐜拌法騫沖彴緙栬瘧錛屽ぇ騫呮彁楂樺唴瀛樺崰鐢ㄥ拰搴旂敤紼嬪簭鍔犺澆閫熷害錛屾敮鎸64浣嶏紝棰勭ず鐫鏇村ぇ鍐呭瓨瀹歸噺鐨勬湭鏉ャ

5. Project Volta鐢墊睜綆＄悊鏀硅繘

Volta璁″垝甯鍔╁紑鍙戣呬紭鍖栫數奼犱嬌鐢錛屾彁渚汢attery Historian鍜孞ob Scheler API錛屼互鍙夿attery Saver妯″紡錛屽歡闀胯懼囩畫鑸銆

6. 鏈鏂板簲鐢ㄧ▼搴忕晫闈

鍊熼壌Chrome嫻忚堝櫒鐨勬爣絳懼紡璁捐★紝絎涓夋柟寮鍙戣呮湁鏈轟細鎵╁睍搴旂敤鍔熻兘錛屾彁渚涙柊棰栦綋楠屻

7. 瀹夊叏鎬х殑澧炲己

鍖呮嫭钃濈墮璁懼囪瘑鍒瑙ｉ攣鍜岀郴緇熸暟鎹鍔犲瘑錛屼嬌寰楁伓鎰忚蔣浠舵洿闅句互渚靛叆錛屼繚闅滅敤鎴蜂俊鎮瀹夊叏銆

8. 鏁版嵁鐙絝嬪瓨鍌

璁懼囨暟鎹鐙絝嬩笖鏈夎抗鍙寰錛屼笁鏄熺殑Knox緋葷粺涔熷緱鍒版敮鎸侊紝鎻愪緵鏇寸粏鑷寸殑鏁版嵁鍒嗙被鍜屼繚鎶ゃ

9. 鏀硅繘鐨勬悳緔㈠姛鑳

緋葷粺鏇村姞鏅鴻兘錛屾牴鎹鐢ㄦ埛琛屼負璋冩暣鎼滅儲緇撴灉錛屽簲鐢ㄦ悳緔㈡彁渚涗究鎹風殑鎻愮ず鍜岀洿杈懼姛鑳姐

10. 鏂癆PI鍜屽姛鑳芥墿灞

鍖呮嫭钃濈墮4.1銆乁SB Audio鍜屽氫漢鍒嗕韓絳夛紝鏀鎸佹洿澶氳懼囦氦浜掑拰鏁版嵁鍏變韓錛屽炲己浜嗙敤鎴蜂綋楠屻