藍藍設計( www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

來源：莫貝網

仔細閱讀MD的規范，似乎寫的很清楚，但是如果和Android4.0規范放在一起，還是會發現很多有出入的地方。不過規范的目的是為了培養并迎合用戶使用習慣，減少用戶認知負擔。文字是死的，人是活的，靈活應用才是關鍵。

在以MD為基礎的app設計中，經常會出現以下結構（如圖1）

在Android 4.0和material design設計規范中都專門對選項卡進行了說明，但兩者的說法不同。

在Android 4.0中，選項卡tabs屬于操作欄的一部分，可以很輕松探索 app 中的不同功能,或瀏覽不同分類的數據集，就是說tabs選項卡是可以作為導航使用的，類似于iOS的標簽欄，只是iOS放在屏幕底部，安卓是放在屏幕頂端（如上圖2）。

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

如此看來，兩種規范似乎是相互沖突的，而且只要留心一下你會發現，現在市場上經常是這兩種形式都有。googel官方比較推崇應用結構是：左側導航抽屜+應用欄+tabs（Tab可選），但是同一種結構卻有兩種不同表現方式。

方式一：谷歌主推形式

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

方式二：市場發展

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

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

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

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

1、層級返回

IOS平臺沒有實體返回按鍵，所以涉及層級間的導航，app界面本身一定要有返回按鈕，而實體home鍵只負責應用退出。Android平臺有物理 返回按鍵，且點擊返回的是動作流。比如，在搜索界面，點擊搜索框調出軟鍵盤，再點返回按鍵，不是返回上一頁，而是收回彈出的軟鍵盤，它強調的是返回上一個 動作的界面，而非層級關系。在Android平臺上的app，如果應用本身含有返回按鈕，返回的是上一層級，設計的是層級間的導航。另外，在安卓app的首頁點擊返回按鍵，就是退出應用。可看如下關系圖

2、編輯選擇

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

以上部分其實都是一些平臺規范總結，將區別大且重要部分整理出來，也是為了方便閱讀查看，后期會持續更新一些其他交互內容。

作者：butter
來源：jianshu

@琛桑要做芝麻藝人 ：作為入行不久的交互設計師，我發現自己在交互設計的實踐中無法顧及到方方面面，是存在思維盲區的。其中有欠缺經驗的原因，也有自身知識局限的問題。進入開發階段后，每次需要修改交互時，心里都會有些慚愧，感覺為小伙伴們帶來了不必要的工作量。

藍藍注：國慶期間，我幾乎每天都花時間看行業內各優秀人才的視覺和演講實錄，發現他們好可愛，大都坦率、真誠、樂于分享，把自己知道的好東西分享給更多的人。讓這個行業不斷的在進步，也同時收獲著應得的名聲和財富。

羅子雄不是特有名，這是我第一次看到他的演講，但如行云流水，準備充分，卻講演自然無痕，生動有趣，顏值爆表。做為一個設計師，從98年到2015年，17年的時間，從菜鳥到大牛，分享的干貨，值得學習。

在路上，我們都在路上，不斷著提高著自已審美，反省著不足，努力的向各行各業的精英學習著。

國慶期間，我沒有讓自己做一些日常的工作，那些上班再去做就好了。

假日，應超脫日常的思維，做一些前贍性、長遠性、必要的思考和學習。

藍藍注：這篇文章寫的非常具體，對于一個公司的初級和中級網站，比較實用，可參照。

一、感官體驗：呈現給用戶視聽上的體驗，強調舒適性

1. 設計風格：符合目標客戶的審美習慣，并具有一定的引導性。

網站在設計之前，必須明確目標客戶群體，并針對目標客戶的審美喜好，進行分析，從而確定網站的總體設計風格。

2. 網站LOGO：確保logo的保護空間，確保品牌的清晰展示而又不占據過分空間。

3. 頁面速度：正常情況下,盡量確保頁面在5秒內打開。如果是大 型門戶網站，必須考慮南北互通問題，進行必要的壓力測試。

4. 頁面布局：重點突出，主次分明，圖文并茂。與企業的營銷目標相結合，將目標客戶最感興趣的，最具有銷售力的信息放置在最重要的位置。

5. 頁面色彩：與品牌整體形象相統一，主色調+輔助色不超過三種顏色。以恰當的色彩明度和亮度，確保瀏覽者的瀏覽舒適度。

6. 動畫效果：與主畫面相協調，打開速度快，動畫效果節奏適中，不干擾主畫面瀏覽。

7. 頁面導航：導航條清晰明了、突出，層級分明。

8. 頁面大小：適合多數瀏覽器瀏覽(以15寸及17寸顯示器為主)。

9. 圖片展示：比例協調、不變形，圖片清晰。圖片排列既不過于密集，也不會過于疏遠。

10. 圖標使用：簡潔、明了、易懂、準確，與頁面整體風格統一。

11. 廣告位：避免干擾視線，廣告圖片符合整體風格，避免喧賓奪主。

（藍藍寫在前面，這篇文章我很欣賞，很有共鳴！做產品和做ui設計是一樣的，要用心，要有主人翁心態，意識到這是為自己做的，百分百投入去做，受得了委屈，成得了事，不怕做的不好被客戶批評。要從失敗中汲取價值和可改進的地方。但如果把自己看得太小，只把自己看成一個打工仔，這樣的層次和胸懷不可能成為一個真正能做好產品的產品經理及好的設計師。）

我覺得我是360最大的產品經理，當然，我認為這不是因為我有多么成功，而是因為我曾經是最大的失敗者，曾經在用戶體驗上犯了非常巨大的錯誤，甚至被別人罵得狗血噴頭。很多人看到的是我投資和參與做的成功產品，但沒有看到背后還有很多不成功的功能、不成功的產品，這些失敗沒有被大家所關注和記得。但正是這些經驗教訓，才幫助我做出更好的產品。我覺得要成為優秀的產品經理，還得有“四心”。

用心：對自己對產品負責任

大家可能會覺得我講了一個特虛的“用心”，不是。大家會覺得我在產品上有一些心得，實話說每次做一個新產品，我也不是拿出幾個錦囊，也不能三分鐘就有靈感，我也花很多時間看同行的產品，去論壇看用戶評論，然后也花很長時間用產品，每個產品都是要嘔心瀝血。有時候感覺做產品像是媽媽十月懷胎生孩子，就算你成功養育了三個孩子，第四個孩子不用十個月，三個月就生出來，可能嗎?還是要經歷十個月的痛苦孕育過程。我覺得用心，對自己負責任，對自己做的產品負責任，是一個產品經理的基本前提。

事實上，很多產品經理應該自省，你們做產品真是為自己在做，還只是在執行老板的旨意或上級的命令，是真的在用心嗎?

很多人認為自己只是公司的一顆螺絲釘，甚至還不是。但如果把自己看得太小，只把自己看成一個打工仔，這樣的層次和胸懷不可能成為一個真正能做好產品的產品經理。所以我希望產品經理們在公司上班的時候，也不用管公司是不是你自己的，拿出一點創業精神。很多人會說我又不是創業者，我干嗎要創業精神。那換個方式思考，難道非要自己辦公司才能把一個產品做好嗎?在別人的平臺上花著老板的錢，花著公司資源，做不成是公司交學費，這多好。如果在公司能把自己充分調動起來，把一個產品做到，讓產品在市場獲得成功，將可以給自己積累聲望、人脈關系，當然也可能是積累經驗教訓，但即便是教訓也能夠為你下一次成功做鋪墊。

即便自己出去做一個公司，你真覺得你做產品的能力就有所提升、完全不一樣嗎?未必。我常跟產品經理講，你心里要有一個大我，要對產品負責任，要把產品看成你自己的產品，我認為每個人都是有潛力的。很多產品經理也在努力做產品，但仍能挑出很多問題，事實上他也盡到了工作職責，僅僅靠盡到工作職責，很難成為優秀產品經理，還得真的用心。

黑白灰的經典配色是永恒不變的教父級色彩，也是含蓄內秀的典范。今天@飛屋睿UIdesign挑選了13個優雅的黑白灰配色網站，同學們也可以拿來作為網頁設計時色系風格的參考 >>>

@飛屋睿UIdesign ：在經典配色中，可能每個人都不會否認黑白灰的永恒魅力。雖然人們總是想“outstanding”，眼球搶奪，注意吸引……但想要把用戶永遠留住，除了第一印象，更多需要日后方方面面的細節。況且在我們的身邊已經太多色彩大爆炸了，我們顏色識別系統也許到了某一峰值，總也想要有停下運轉的時刻。這時，黑白灰的配色就從一大堆顏色中尤為突出，甚至能讓人心恢復平靜，這也是這兩年開始盛行極簡風格的原因。

編者按：福爾摩斯說猜是不好的習慣，視覺設計的同學們平時習慣了讓感性帶動設計，可能還沒看過今天這類設計文。這篇由@百度MUX 集結整個團隊，歷時3個季度總結的2015年趨勢預測，行文科學嚴謹，有理有序，對加深對界面設計的理解非常有幫助 >>>

【今年人氣最高的資源+教程，同學你不看一眼么？】 >>> 《年度頒獎盛典！2014年的設計資源大盤點》

視覺設計是一門隨著時代發展與社會變遷，隨著人類認知提升與生活環境變化，而不斷進化的專業學科，無論是從小眾喜好走上大眾審美，還是從零星的創意苗頭轉為流行趨勢，它都代表了一個時期人們審美取向與內心述求。與此同時伴隨著城市生活節奏加快、人們生活方式日新月異，如今的優秀設計不僅要具備產品使用的功能性，更要符合未來人群的生活方式和潛在審美需求。而作為設計師需要具備敏銳的洞察力與捕捉趨勢的能力，充分消化和理解潮流設計元素，不斷汲取其中的精華養分，歷練實踐轉化與效果表達的掌控力，才能具備更加開闊的視野、獨到的品味和充滿靈性的設計感覺。

“蘋果是否做用戶研究？”

這個頗具爭議的問題，黃峰給出自己與蘋果用戶體驗布道師Mark Kawano溝通的結果。蘋果撤掉了專門的用戶研究團隊，但其職能被設計師團隊所消化與分擔。真正專業的用戶體驗設計師，對于基礎的用戶研究已具備執行與分析的能力。大規模的定量研究由內部或外部其他專業團隊來完成。

“在產品創新過程中，誰該主導產品的設計？PM or UX？”

黃峰認為PM和UX本為一家，需要緊密協作。PM是一個非固定崗位，也是一種qualification，即無論是研發、設計亦或項目管理，在滿足條件的情況下都可以成為某個產品的產品經理。同時黃峰也直言，目前多數企業的多數PM實質上并非產品經理（Product Manager）,  更多的是項目經理（Project Manager）。真正的產品經理（Product Manager）是需要為產品的Vision, Strategy, Roadmap, 市場反饋監測與產品調整等負責，這才是真正的UX頂尖人才的終極目標。黃峰以電影行業為例子，生動闡述了UX在產品/服務創新領域的定位和價值與電影中的導演與其他專業的關系有幾分相似。在他看來，理想中的產品經理更需要全面的UX能力，我們當下不必拘泥于某個歷史留下的title, 關鍵還是看實際的工作內容和定位。

藍藍寫

我在言又已書店發現了這本好書《通用設計方法》，記錄了通常在設計中的一些方法，屬于綱目類的介紹，每頁一種調查方法，共90多種呢，雖然寫的沒有展開，但大概從書中可以看到思路方法，結合自己的實踐可以應用起來～～

這本書近100元呢，抱歉，我考慮了一下還是沒有買。這本書大概知道就好，細讀內容不夠的，查了下網上有pdf，回去細看吧～～～ 

通用設計方法PDF全書在此

眼動追蹤法---常用重點方法，得有設備配合啊～～

焦點小組--常用重點方法

涂鴉法--鼓勵人們自由寫，隱秘的調查～～

動畫新手有的時候會天馬行空想到一些奇怪的效果，可能會不符合整體設計風格，可能會違反現實物理規律，有自己的想法，還要和產品設計確認。比如這個頁面：