有太多的天氣應(yīng)用UI設(shè)計(jì)極為繁復(fù)，并不適合只需天氣、溫度等信息的普通用戶，今天我們精選了一些天氣應(yīng)用UI設(shè)計(jì)，讓你享受每一度的極簡(jiǎn)。

你是否也會(huì)被這些「極簡(jiǎn)」款中的一二所吸引，那些滿屏各種指數(shù)的天氣 App 似乎是專為天氣專家們所設(shè)計(jì)的，而選擇這些「極簡(jiǎn)」天氣 App，更便于我們掌握那些我們所需要的天氣信息。

如果你是一個(gè)APP狂熱分子，你會(huì)花大量的時(shí)間在各種APP的嘗鮮中，你會(huì)明顯感受到一些APP在采用著某種風(fēng)格鮮明的設(shè)計(jì)語言，來標(biāo)榜自己的獨(dú)特之處，行成自己的設(shè)計(jì)風(fēng)格，甚至引領(lǐng)設(shè)計(jì)風(fēng)向。去年我們關(guān)注到隨著Metro設(shè)計(jì)風(fēng)格的影響和iOS7的發(fā)布，APP明顯都開始嘗試扁平化的設(shè)計(jì)語言了，除此之外，還有哪些顯性化的設(shè)計(jì)語言嶄露頭角呢？

@劉津legene ：設(shè)計(jì)師和理發(fā)師其實(shí)有點(diǎn)像，理發(fā)師基本分為三種：一種是只會(huì)搞基礎(chǔ)發(fā)型的，比如寸頭、中規(guī)中矩的長發(fā)、老太太卷頭等；一種是只會(huì)剪流行發(fā)型的（這種發(fā)型師還很容易搖身一變成為造型大師，告訴你你應(yīng)該改變，應(yīng)該剪目前最流行的某款發(fā)型，但實(shí)際上可能是他只擅長這款發(fā)型）；還有一種是最可遇不可求的，他根據(jù)你的臉型、性格等，用最簡(jiǎn)單的手法量身設(shè)計(jì)發(fā)型，讓顧客的氣質(zhì)度立刻得到提升。

設(shè)計(jì)師和理發(fā)師其實(shí)有點(diǎn)像，理發(fā)師基本分為三種：一種是只會(huì)搞基礎(chǔ)發(fā)型的，比如寸頭、中規(guī)中矩的長發(fā)、老太太卷頭等；一種是只會(huì)剪流行發(fā)型的（這種發(fā)型師還很容易 搖身一變成為造型大師，告訴你你應(yīng)該改變，應(yīng)該剪目前最流行的某款發(fā)型，但實(shí)際上可能是他只擅長這款發(fā)型）；還有一種是最可遇不可求的，他根據(jù)你的臉型、 性格等，用最簡(jiǎn)單的手法量身設(shè)計(jì)發(fā)型，讓顧客的氣質(zhì)度立刻得到提升。

入行這么些年，我接觸的設(shè)計(jì)師也不少，大體也分這幾種：只會(huì)做基礎(chǔ)設(shè)計(jì)的初級(jí)設(shè)計(jì)師（工）；技藝精湛，能搞定所有流行風(fēng)格的高級(jí)設(shè)計(jì)師（匠）；能根據(jù)產(chǎn)品性格、特征量身打造設(shè)計(jì)風(fēng)格的設(shè)計(jì)大師（師）。那么怎樣才能成為第三種設(shè)計(jì)師呢？

當(dāng)然，第三種設(shè)計(jì)師十分的稀少，即使有一般也都處在一個(gè)很高的位置上，不一定親自做設(shè)計(jì)了。

首先，能夠洞穿并還原產(chǎn)品本質(zhì)

其次，能夠通過分析研究尋找方向

第三，能夠講清楚設(shè)計(jì)思路，并得到大家認(rèn)同

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

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

來源：莫貝網(wǎng)

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

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

在Android 4.0和material design設(shè)計(jì)規(guī)范中都專門對(duì)選項(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)航的。每個(gè)tab的內(nèi)容應(yīng)該互相關(guān)聯(lián)并且是在同 一個(gè)主題下（如下圖）。圖中出行方式可以通過tab劃分成多種方式，但是搜索、指南、設(shè)置卻完全屬于不同的功能導(dǎo)航。

如此看來，兩種規(guī)范似乎是相互沖突的，而且只要留心一下你會(huì)發(fā)現(xiàn)，現(xiàn)在市場(chǎng)上經(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)容，如果在較低層級(jí)中有多個(gè)平行相關(guān)視圖，可以用Tab結(jié)構(gòu)（當(dāng)然也可以沒有）。這種結(jié) 構(gòu)的關(guān)鍵是主要功能或內(nèi)容很突出，所以頭屏最大化顯示，而其他功能相對(duì)較弱，不需要頻繁切換側(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)航。

方式二：市場(chǎng)發(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)適 合那些多個(gè)相同等級(jí)的功能視圖需要頻繁切換的app，且只需要手指左右滑動(dòng)就能快速切換Tab視圖，這將大大提高應(yīng)用使用效率。如下圖所示，雖然是概念設(shè)計(jì)（主要是國內(nèi)安卓應(yīng)用喜歡延續(xù)iOS風(fēng)格，將Tab放在屏幕底部，米找到合適的例子，且MD沒有被普遍應(yīng)用），但很適合該場(chǎng)景下的示例。這款產(chǎn)品類似于微信，將主要功能導(dǎo)航放在頂部，實(shí)現(xiàn)快速切換，側(cè)邊抽屜導(dǎo)航放置收藏、狀態(tài)、設(shè)置等次要功能。

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

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

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

1、層級(jí)返回

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

2、編輯選擇

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

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

作者：butter
來源：jianshu

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

藍(lán)藍(lán)注：國慶期間，我?guī)缀趺刻於蓟〞r(shí)間看行業(yè)內(nèi)各優(yōu)秀人才的視覺和演講實(shí)錄，發(fā)現(xiàn)他們好可愛，大都坦率、真誠、樂于分享，把自己知道的好東西分享給更多的人。讓這個(gè)行業(yè)不斷的在進(jìn)步，也同時(shí)收獲著應(yīng)得的名聲和財(cái)富。

羅子雄不是特有名，這是我第一次看到他的演講，但如行云流水，準(zhǔn)備充分，卻講演自然無痕，生動(dòng)有趣，顏值爆表。做為一個(gè)設(shè)計(jì)師，從98年到2015年，17年的時(shí)間，從菜鳥到大牛，分享的干貨，值得學(xué)習(xí)。

在路上，我們都在路上，不斷著提高著自已審美，反省著不足，努力的向各行各業(yè)的精英學(xué)習(xí)著。

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

假日，應(yīng)超脫日常的思維，做一些前贍性、長遠(yuǎn)性、必要的思考和學(xué)習(xí)。

藍(lán)藍(lán)注：這篇文章寫的非常具體，對(duì)于一個(gè)公司的初級(jí)和中級(jí)網(wǎng)站，比較實(shí)用，可參照。

一、感官體驗(yàn)：呈現(xiàn)給用戶視聽上的體驗(yàn)，強(qiáng)調(diào)舒適性

1. 設(shè)計(jì)風(fēng)格：符合目標(biāo)客戶的審美習(xí)慣，并具有一定的引導(dǎo)性。

網(wǎng)站在設(shè)計(jì)之前，必須明確目標(biāo)客戶群體，并針對(duì)目標(biāo)客戶的審美喜好，進(jìn)行分析，從而確定網(wǎng)站的總體設(shè)計(jì)風(fēng)格。

2. 網(wǎng)站LOGO：確保logo的保護(hù)空間，確保品牌的清晰展示而又不占據(jù)過分空間。

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

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

5. 頁面色彩：與品牌整體形象相統(tǒng)一，主色調(diào)+輔助色不超過三種顏色。以恰當(dāng)?shù)纳拭鞫群土炼龋_保瀏覽者的瀏覽舒適度。

6. 動(dòng)畫效果：與主畫面相協(xié)調(diào)，打開速度快，動(dòng)畫效果節(jié)奏適中，不干擾主畫面瀏覽。

7. 頁面導(dǎo)航：導(dǎo)航條清晰明了、突出，層級(jí)分明。

8. 頁面大?。哼m合多數(shù)瀏覽器瀏覽(以15寸及17寸顯示器為主)。

9. 圖片展示：比例協(xié)調(diào)、不變形，圖片清晰。圖片排列既不過于密集，也不會(huì)過于疏遠(yuǎn)。

10. 圖標(biāo)使用：簡(jiǎn)潔、明了、易懂、準(zhǔn)確，與頁面整體風(fēng)格統(tǒng)一。

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

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

我覺得我是360最大的產(chǎn)品經(jīng)理，當(dāng)然，我認(rèn)為這不是因?yàn)槲矣卸嗝闯晒?，而是因?yàn)槲以?jīng)是最大的失敗者，曾經(jīng)在用戶體驗(yàn)上犯了非常巨大的錯(cuò)誤，甚至被別人罵得狗血噴頭。很多人看到的是我投資和參與做的成功產(chǎn)品，但沒有看到背后還有很多不成功的功能、不成功的產(chǎn)品，這些失敗沒有被大家所關(guān)注和記得。但正是這些經(jīng)驗(yàn)教訓(xùn)，才幫助我做出更好的產(chǎn)品。我覺得要成為優(yōu)秀的產(chǎn)品經(jīng)理，還得有“四心”。

用心：對(duì)自己對(duì)產(chǎn)品負(fù)責(zé)任

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

事實(shí)上，很多產(chǎn)品經(jīng)理應(yīng)該自省，你們做產(chǎn)品真是為自己在做，還只是在執(zhí)行老板的旨意或上級(jí)的命令，是真的在用心嗎?

很多人認(rèn)為自己只是公司的一顆螺絲釘，甚至還不是。但如果把自己看得太小，只把自己看成一個(gè)打工仔，這樣的層次和胸懷不可能成為一個(gè)真正能做好產(chǎn)品的產(chǎn)品經(jīng)理。所以我希望產(chǎn)品經(jīng)理們?cè)诠旧习嗟臅r(shí)候，也不用管公司是不是你自己的，拿出一點(diǎn)創(chuàng)業(yè)精神。很多人會(huì)說我又不是創(chuàng)業(yè)者，我干嗎要?jiǎng)?chuàng)業(yè)精神。那換個(gè)方式思考，難道非要自己辦公司才能把一個(gè)產(chǎn)品做好嗎?在別人的平臺(tái)上花著老板的錢，花著公司資源，做不成是公司交學(xué)費(fèi)，這多好。如果在公司能把自己充分調(diào)動(dòng)起來，把一個(gè)產(chǎn)品做到，讓產(chǎn)品在市場(chǎng)獲得成功，將可以給自己積累聲望、人脈關(guān)系，當(dāng)然也可能是積累經(jīng)驗(yàn)教訓(xùn)，但即便是教訓(xùn)也能夠?yàn)槟阆乱淮纬晒ψ鲣亯|。

即便自己出去做一個(gè)公司，你真覺得你做產(chǎn)品的能力就有所提升、完全不一樣嗎?未必。我常跟產(chǎn)品經(jīng)理講，你心里要有一個(gè)大我，要對(duì)產(chǎn)品負(fù)責(zé)任，要把產(chǎn)品看成你自己的產(chǎn)品，我認(rèn)為每個(gè)人都是有潛力的。很多產(chǎn)品經(jīng)理也在努力做產(chǎn)品，但仍能挑出很多問題，事實(shí)上他也盡到了工作職責(zé)，僅僅靠盡到工作職責(zé)，很難成為優(yōu)秀產(chǎn)品經(jīng)理，還得真的用心。

黑白灰的經(jīng)典配色是永恒不變的教父級(jí)色彩，也是含蓄內(nèi)秀的典范。今天@飛屋睿UIdesign挑選了13個(gè)優(yōu)雅的黑白灰配色網(wǎng)站，同學(xué)們也可以拿來作為網(wǎng)頁設(shè)計(jì)時(shí)色系風(fēng)格的參考 >>>

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