位優(yōu)秀的移動APP客戶端的UI設(shè)計師，在接到一個移動case的時候，腦海中應(yīng)該浮現(xiàn)很多相關(guān)的一點(diǎn)APP UI碎片。

肯定很多人會說，擁有這個功力肯定不是應(yīng)屆APPUI畢業(yè)生所能掌握的。25學(xué)堂的小編說，未必。只要平常我們多安裝一些優(yōu)秀的APP、每天來欣賞一款獨(dú)特美的APP。

把這些好的APP 翻來覆去的瀏覽即可。

做設(shè)計多年，創(chuàng)過幾次業(yè)，總想靠著手上的技藝真正做成一件事。然而，看過太多曇花一現(xiàn)的優(yōu)秀“設(shè)計”產(chǎn)品，在市場上掙扎、覆滅，作為一名設(shè)計師的無力感卻越發(fā)深重。

問問自己，你喜歡的app有哪些呢？肯定很多人都會說微信、QQ、支付寶、美團(tuán)、微博等等常用的這些APP吧。其實(shí)你真的懂現(xiàn)在的用戶嗎？這里特別舉2例子告訴大家，目前年輕人喜歡的APP。

同樣的一項(xiàng)產(chǎn)品，目標(biāo)族群不同，產(chǎn)品外觀也會不同；拿給不同的人使用，也會得到不同的結(jié)果。甚至連任務(wù)目標(biāo)（用戶想透過產(chǎn)品完成什么事）都會不一樣。

比如這款給嬰幼兒訓(xùn)練抓握力、色彩、形狀、推理能力用的積木。

UI 的中文名是用戶界面（User interface），而我們現(xiàn)在使用的大多數(shù)設(shè)備界面都是圖形用戶界面，即 GUI（Graphical user interface）。我們通過這些可視化的圖形界面來理解計算機(jī)，進(jìn)行工作。

但是最初的界面可不這么友好，那時的界面還是命令行界面，CLI（Command line interface）。計算機(jī)只是被政府或大型機(jī)構(gòu)使用，在普通人眼中是完全不能理解的存在。

我本人也有過這樣的經(jīng)歷，之前我們設(shè)計一個大數(shù)據(jù)產(chǎn)品的官網(wǎng)，設(shè)計師做完我很滿意，但是老板提出了意見：你們這是C端（customer）風(fēng)格，我 這是一個to B（business）的網(wǎng)站，以后不要再給我搞這種C端風(fēng)格！我們后來分析了很多to B的網(wǎng)站風(fēng)格，發(fā)現(xiàn)它們確實(shí)存在明顯的共性，而我們卻習(xí)慣于已有的C端經(jīng)驗(yàn)而忽視了這類網(wǎng)站這么明顯的特質(zhì)。當(dāng)時我也在反思，為什么不懂設(shè)計的老板反而能 發(fā)現(xiàn)設(shè)計上的問題？因?yàn)樗龑I(yè)務(wù)足夠理解，并且她的視野更寬闊！可見要真正做好設(shè)計，只懂設(shè)計層面的東西是不夠的，需要拓寬眼界和知識面，從更高的角度來 看問題。

完善的公司會把項(xiàng)目相關(guān)人員聚集起來，產(chǎn)品經(jīng)理會把產(chǎn)品詳細(xì)的用原型展示出來，包括產(chǎn)品定位，市場需求，主打賣點(diǎn)，產(chǎn)品性質(zhì)以及各模塊具體功能，邏輯跳轉(zhuǎn)演示一下；之后會評估項(xiàng)目用時，各部門協(xié)調(diào)，項(xiàng)目啟動。

話不多說，接到原型，那我們應(yīng)該做什么準(zhǔn)備工作呢？

藍(lán)藍(lán)設(shè)計( www.izc.net.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

來源：莫貝網(wǎng)

仔細(xì)閱讀MD的規(guī)范，似乎寫的很清楚，但是如果和Android4.0規(guī)范放在一起，還是會發(fā)現(xiàn)很多有出入的地方。不過規(guī)范的目的是為了培養(yǎng)并迎合用戶使用習(xí)慣，減少用戶認(rèn)知負(fù)擔(dān)。文字是死的，人是活的，靈活應(yīng)用才是關(guān)鍵。

在以MD為基礎(chǔ)的app設(shè)計中，經(jīng)常會出現(xiàn)以下結(jié)構(gòu)（如圖1）

在Android 4.0和material design設(shè)計規(guī)范中都專門對選項(xiàng)卡進(jìn)行了說明，但兩者的說法不同。

在Android 4.0中，選項(xiàng)卡tabs屬于操作欄的一部分，可以很輕松探索 app 中的不同功能,或?yàn)g覽不同分類的數(shù)據(jù)集，就是說tabs選項(xiàng)卡是可以作為導(dǎo)航使用的，類似于iOS的標(biāo)簽欄，只是iOS放在屏幕底部，安卓是放在屏幕頂端（如上圖2）。

但在material design中，tabs 的作用是將大量關(guān)聯(lián)的數(shù)據(jù)或者選項(xiàng)劃分成更易理解的分組，雖然很容易讓人聯(lián)想到導(dǎo)航，但其本身并不是用來導(dǎo)航的。每個tab的內(nèi)容應(yīng)該互相關(guān)聯(lián)并且是在同 一個主題下（如下圖）。圖中出行方式可以通過tab劃分成多種方式，但是搜索、指南、設(shè)置卻完全屬于不同的功能導(dǎo)航。

如此看來，兩種規(guī)范似乎是相互沖突的，而且只要留心一下你會發(fā)現(xiàn)，現(xiàn)在市場上經(jīng)常是這兩種形式都有。googel官方比較推崇應(yīng)用結(jié)構(gòu)是：左側(cè)導(dǎo)航抽屜+應(yīng)用欄+tabs（Tab可選），但是同一種結(jié)構(gòu)卻有兩種不同表現(xiàn)方式。

方式一：谷歌主推形式

側(cè)邊欄導(dǎo)航作為應(yīng)用的主導(dǎo)航，頭屏顯示應(yīng)用最重要的功能或內(nèi)容，如果在較低層級中有多個平行相關(guān)視圖，可以用Tab結(jié)構(gòu)（當(dāng)然也可以沒有）。這種結(jié) 構(gòu)的關(guān)鍵是主要功能或內(nèi)容很突出，所以頭屏最大化顯示，而其他功能相對較弱，不需要頻繁切換側(cè)邊欄導(dǎo)航（如下圖）。谷歌發(fā)布的inbox郵箱，左側(cè)導(dǎo)航欄作為主導(dǎo)航，默認(rèn)顯示收件箱頁面，用戶最常用也最重要的功能是查看收件箱，至于其他的發(fā)件箱、垃圾郵件等都可以放在導(dǎo)航抽屜內(nèi)收起。googel圖書頂部是應(yīng)用欄+tabs結(jié)構(gòu)，此處Tab強(qiáng)調(diào)的是在同一主題下的不同歸類，而不是導(dǎo)航。

方式二：市場發(fā)展

或許是受4.0規(guī)范的影響，在左側(cè)導(dǎo)航抽 屜+應(yīng)用欄+tabs的應(yīng)用結(jié)構(gòu)中，Tab作為應(yīng)用的主導(dǎo)航，而左側(cè)抽屜作為輔導(dǎo)航，收納一些用戶不常使用的功能，像用戶中心、設(shè)置、反饋等。這種結(jié)構(gòu)適 合那些多個相同等級的功能視圖需要頻繁切換的app，且只需要手指左右滑動就能快速切換Tab視圖，這將大大提高應(yīng)用使用效率。如下圖所示，雖然是概念設(shè)計（主要是國內(nèi)安卓應(yīng)用喜歡延續(xù)iOS風(fēng)格，將Tab放在屏幕底部，米找到合適的例子，且MD沒有被普遍應(yīng)用），但很適合該場景下的示例。這款產(chǎn)品類似于微信，將主要功能導(dǎo)航放在頂部，實(shí)現(xiàn)快速切換，側(cè)邊抽屜導(dǎo)航放置收藏、狀態(tài)、設(shè)置等次要功能。

以上兩種方式并不沖突，關(guān)鍵是看你應(yīng)用的功能內(nèi)容。如果你的應(yīng)用核心功能很突出，且不需要其他功能頻繁切換，就選擇第一種；如果你的應(yīng)用有兩個或者兩個以上相同重要的功能模塊，且需要頻繁切換，比如微信的即時聊天和朋友圈，那就嘗試第二種。

Android部分暫時就到這里，來看看iOS。如果展開來講，體系太龐大，暫且用一張圖表示，雖然都是很基礎(chǔ)的內(nèi)容。

另外，Android和IOS很明顯的差異是層級返回和編輯選擇。

1、層級返回

IOS平臺沒有實(shí)體返回按鍵，所以涉及層級間的導(dǎo)航，app界面本身一定要有返回按鈕，而實(shí)體home鍵只負(fù)責(zé)應(yīng)用退出。Android平臺有物理 返回按鍵，且點(diǎn)擊返回的是動作流。比如，在搜索界面，點(diǎn)擊搜索框調(diào)出軟鍵盤，再點(diǎn)返回按鍵，不是返回上一頁，而是收回彈出的軟鍵盤，它強(qiáng)調(diào)的是返回上一個 動作的界面，而非層級關(guān)系。在Android平臺上的app，如果應(yīng)用本身含有返回按鈕，返回的是上一層級，設(shè)計的是層級間的導(dǎo)航。另外，在安卓app的首頁點(diǎn)擊返回按鍵，就是退出應(yīng)用。可看如下關(guān)系圖

2、編輯選擇

對于編輯選擇功能，IOS有明確的入口，通常在導(dǎo)航欄 上有編輯按鈕，點(diǎn)擊后進(jìn)入編輯模式，通常可以多選，同時底部或頂部會增加工具欄，用來處理多選內(nèi)容。當(dāng)然也可以單選刪除，通過點(diǎn)按向左滑動刪除，或者是點(diǎn) 擊按鈕從底部呼出操作菜單，逐個刪除。但Android是通過長安方式進(jìn)入編輯模式，此時操作欄被一個臨時情景操作欄覆蓋（情景操作欄可以覆蓋頂部操作欄 和底部操作欄），界面內(nèi)容允許單個或多個操作（如下圖）

以上部分其實(shí)都是一些平臺規(guī)范總結(jié)，將區(qū)別大且重要部分整理出來，也是為了方便閱讀查看，后期會持續(xù)更新一些其他交互內(nèi)容。

作者：butter
來源：jianshu

動畫新手有的時候會天馬行空想到一些奇怪的效果，可能會不符合整體設(shè)計風(fēng)格，可能會違反現(xiàn)實(shí)物理規(guī)律，有自己的想法，還要和產(chǎn)品設(shè)計確認(rèn)。比如這個頁面：

在聊美術(shù)需求以前，我們先來聊一個跟繪畫有密切關(guān)系的東西：素描