藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源：站酷網(wǎng)

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

氣，持續(xù)占據(jù)各大APP排行榜天氣類軟件第一位，在5年時(shí)間內(nèi)，擁有超過3.3億的注冊(cè)用戶。人氣APP是怎么設(shè)計(jì)出來(lái)的？設(shè)計(jì)師應(yīng)該怎么加強(qiáng)自己的能力？帶著這些問題，站酷網(wǎng)探訪了墨跡天氣設(shè)計(jì)團(tuán)隊(duì)，希望他們的觀點(diǎn)對(duì)同為設(shè)計(jì)師的你有所幫助。

受訪人：相輝，墨跡天氣副總裁  運(yùn)營(yíng)VP。

先后任職雅虎，百度等公司，前百度移動(dòng)云事業(yè)部資深用戶體驗(yàn)設(shè)計(jì)師，前百度易平臺(tái)負(fù)責(zé)人，曾擁豐富的交互設(shè)計(jì)經(jīng)驗(yàn)和團(tuán)隊(duì)管理經(jīng)驗(yàn)。

受訪人：Tony石浩言，墨跡天氣設(shè)計(jì)總監(jiān)。

13年入職墨跡，兩年時(shí)間從設(shè)計(jì)師成長(zhǎng)為設(shè)計(jì)總監(jiān)，負(fù)責(zé)過墨跡天氣安卓／windows／國(guó)際版／pad等不同平臺(tái)的設(shè)計(jì)，目前正在帶領(lǐng)ios平臺(tái)的設(shè)計(jì)。

Tony石浩言和相輝

————————————————————————————————————————————————

墨跡天氣是怎么做設(shè)計(jì)的？

站酷：從推出到現(xiàn)在，墨跡天氣在UI設(shè)計(jì)風(fēng)格上都發(fā)生過哪些變化？哪些原因影響了這樣的改變？

Tony：主要有三次。第一次順應(yīng)潮流，老生常談，從擬物到扁平。第二次當(dāng)雅虎天氣的上滑式整體頁(yè)面體驗(yàn)獲得了蘋果設(shè)計(jì)大獎(jiǎng)后，我們也學(xué)習(xí)了這種交互形式，去掉底部的doc欄，啟用了上滑式的一體化設(shè)計(jì)。第三次就是近期的5.0改版，將上滑體驗(yàn)和底doc欄做了結(jié)合，算是一種回歸。

設(shè)計(jì)師要有數(shù)據(jù)分析能力，我們所做的轉(zhuǎn)變大部分是基于數(shù)據(jù)分析得出。做設(shè)計(jì)之前，設(shè)計(jì)師必須知道為什么這樣去做，而不只是為了好看，UI是移動(dòng)工程學(xué)，是需要?jiǎng)?chuàng)造出來(lái)解決問題。當(dāng)軟件功能越來(lái)越多，就需要用戶更快地獲得他們所需要的信息，減少學(xué)習(xí)成本。比如，在5.0改版設(shè)計(jì)前，我們觀察數(shù)據(jù)發(fā)現(xiàn)因?yàn)橐婚_始時(shí)景入口在首頁(yè)沒有標(biāo)明，而是通過首頁(yè)左右滑動(dòng)獲得，這樣直接導(dǎo)致部分用戶找不到時(shí)景功能，相關(guān)點(diǎn)擊量就會(huì)較低。

墨跡天氣設(shè)計(jì)團(tuán)隊(duì)

站酷：墨跡天氣的設(shè)計(jì)工作流程是怎樣的？

Tony：設(shè)計(jì)師在整個(gè)產(chǎn)品流程中是從一而終，一直貫穿的。首先需要了解產(chǎn)品，和產(chǎn)品部門一起參加內(nèi)部會(huì)議了解 功能點(diǎn)，期間有任何異議都可以提出。拿到功能文檔后開始研究交互，提煉設(shè)計(jì)，配合開發(fā)實(shí)現(xiàn)，再到后來(lái)的配合運(yùn)營(yíng)做產(chǎn)品發(fā)版相關(guān)跟進(jìn)。平時(shí)還需要和產(chǎn)品，開 發(fā)互相權(quán)衡并不斷打磨產(chǎn)品細(xì)節(jié)。

站酷：在這個(gè)流程中，設(shè)計(jì)團(tuán)隊(duì)與其他部門是如何協(xié)作的？設(shè)計(jì)和開發(fā)，圖形和交互如何平衡呢？

Tony：其實(shí)就是不停地聊?？傮w來(lái)說，在創(chuàng)業(yè)公司團(tuán)隊(duì)的氛圍還是不錯(cuò)的，大家都希望做出更好的東西。需要溝通的時(shí)候，UI設(shè)計(jì)師甚至搬上電腦坐在開發(fā)旁就一起進(jìn)行了。我們的管理比較扁平，需要每個(gè)人都有垂直對(duì)接的能力。

墨跡天氣24節(jié)氣設(shè)計(jì)

交互這塊以產(chǎn)品為主，我們的設(shè)計(jì)師也會(huì)在平時(shí)的設(shè)計(jì)工作中培養(yǎng)交互能力，會(huì)主動(dòng)地提出問題，和解決方案。比較理想的一點(diǎn)是，只要是好的建議，無(wú)論是產(chǎn)品，設(shè)計(jì)，還是開發(fā)，大家都會(huì)互相采納。

站酷：注意到墨跡天氣在交互上的一些小動(dòng)效，比如在“我的主頁(yè)”里，在向上和向下拖動(dòng)頁(yè)面時(shí)，讓頭像和郵件在原有的基礎(chǔ)上發(fā)生了改變，這樣設(shè)計(jì)的原因是什么？對(duì)于動(dòng)效在交互中的應(yīng)用你怎么看？

Tony：我們希望第一次點(diǎn)“我的頁(yè)面”，能給用戶帶來(lái)多一些的個(gè)性化色彩，所以突出頭像和個(gè)性背景，緊接著在產(chǎn)生二次操作上滑之后，用戶名和郵件入口滑向兩邊，重點(diǎn)在下面的list view信息，動(dòng)效就是將二者結(jié)合的最佳方式之一。所以，動(dòng)效的重點(diǎn)應(yīng)該是把不同的功能點(diǎn)完美銜接起來(lái)，而不是所謂的看上去炫，那只是動(dòng)畫，不是動(dòng)效。

墨跡天氣5.0的天氣信息設(shè)計(jì)

站酷：現(xiàn)在墨跡天氣功能越來(lái)越多，包括各種生活提示，如何處理大量的信息，讓用戶更快捷地找到自己想要的信息而又不讓頁(yè)面感覺擁擠，給設(shè)計(jì)師提出了很高的要求。你們是如何做的呢？

Tony：我們對(duì)現(xiàn)有功能的優(yōu)先級(jí)排列是基于測(cè)試數(shù)據(jù)的，需求低的功能點(diǎn)是能減就減的。

在我們的APP上，首屏上呈現(xiàn)的是高度歸納后的天氣信息；下滑后是二級(jí)信息多天預(yù)報(bào)；最底部的位置是指數(shù)方面的延伸，穿衣指數(shù)，生活指數(shù)等等。指數(shù) 位置做天氣延展性內(nèi)容服務(wù)，可拓展性也很高。比如進(jìn)入穿衣指數(shù)，我們將有共鳴的情感化描述和提示放在顯眼的位置，背景也會(huì)根據(jù)天氣呈現(xiàn)不同顏色，帶給用戶 最直觀的天氣感受。穿衣指數(shù)頁(yè)面下方，就有穿衣指南，這里對(duì)部分用戶而言優(yōu)先級(jí)不是很高，信息呈現(xiàn)上就會(huì)放在比較深的位置。另外，有新推出的探索性功能也 會(huì)從比較深的位置開始，通過數(shù)據(jù)再去了解有多少用戶專門去通過多步操作尋找這個(gè)功能。而在我們需要?jiǎng)h減功能時(shí)也不會(huì)直接砍掉，會(huì)先藏在較深的位置，然后根 據(jù)反饋靈活調(diào)整。

————————————————————————————————————————————————

設(shè)計(jì)師如何適應(yīng)變化和趨勢(shì)？

站酷：你是什么時(shí)候加入墨跡的，加入后你的工作發(fā)生了什么轉(zhuǎn)變，對(duì)你個(gè)人而言最大的收獲是什么？

相輝：我是14年來(lái)的墨跡，覺得30多歲了，別在大公司混了，創(chuàng)業(yè)一下，感覺和大公司真的非常不一樣。以前的工 作重心是設(shè)計(jì)，現(xiàn)在的重點(diǎn)是運(yùn)營(yíng)。大多數(shù)設(shè)計(jì)師會(huì)認(rèn)為運(yùn)營(yíng)是非常拼創(chuàng)意和腦力的工作，其實(shí)半年多下來(lái)發(fā)現(xiàn)，運(yùn)營(yíng)更多靠心細(xì)靠規(guī)則。就像外人不了解設(shè)計(jì)一 樣，以為設(shè)計(jì)是美術(shù)，但是設(shè)計(jì)師知道設(shè)計(jì)需要很棒的方法，嚴(yán)謹(jǐn)?shù)墓こ虒?shí)現(xiàn)，流程來(lái)保證做出好設(shè)計(jì)。運(yùn)營(yíng)也是一樣，需要各種各樣的方法來(lái)了解每個(gè)細(xì)節(jié)來(lái)如何 保證產(chǎn)品的正常表達(dá)，包括運(yùn)營(yíng)階段性的目標(biāo)是什么，如何和產(chǎn)品契合，從而反向推動(dòng)產(chǎn)品做運(yùn)營(yíng)需求的改進(jìn)，這些都有點(diǎn)像設(shè)計(jì)。

個(gè)人最大的成長(zhǎng)還是學(xué)習(xí)的能力。就像我永遠(yuǎn)跟別人說四個(gè)詞：多思，勤奮，韌性，專一。多思，多思考，在同樣的環(huán)境和要求下，怎么能跟別人做得不一 樣。勤奮不多說了，就是勤能補(bǔ)拙。韌性，就是你一定會(huì)失敗而且失敗很多次，因?yàn)槟阋煌Ｉ孀闳碌念I(lǐng)域，但你也會(huì)學(xué)到很多東西，這就是創(chuàng)業(yè)牛逼的地方。這 過程中一定是痛苦的，在這痛苦中你能不能堅(jiān)持下來(lái)，能不能很有韌性地一次次站起來(lái)，把它變成常態(tài)，融入血液里這是非常難的。最后，專一，就是做事情要執(zhí) 著，你可做的事情非常多，創(chuàng)業(yè)公司更是這樣，可能十個(gè)事都能做，但是哪一個(gè)是投入產(chǎn)出比最高的，哪一個(gè)最能有投資回報(bào)？這需要你選擇。

墨跡天氣室內(nèi)陳設(shè)

站酷：概括一下，這是一個(gè)怎樣的團(tuán)隊(duì)呢？

相輝：你晚上十一二點(diǎn)多來(lái)這里，基本上一半的人都還在，我們并沒有要求加班，但是大家愿意在這里，氛圍特別好。 因?yàn)槲覀冇X得做天氣這件事很酷，特別有價(jià)值，可以獲得很多成就感，學(xué)到很多東西，這個(gè)過程非常激動(dòng)人心，這是真正吸引人的地方。我們相信設(shè)計(jì)師需要更寬松 的創(chuàng)業(yè)環(huán)境。這里不怕你有想法而是怕你沒有想法，這里不只是做圖切圖，而是鼓勵(lì)設(shè)計(jì)師去做更多的嘗試，發(fā)揮個(gè)人價(jià)值。我們有太多的事情等著每個(gè)人去發(fā)掘。

站酷：在挑選成員時(shí)，你比較看重設(shè)計(jì)師哪些方面的能力？

相輝：潛力吧，看重一個(gè)人的發(fā)展能力，創(chuàng)業(yè)公司需要活力，需要這個(gè)人能適應(yīng)更多的崗位，不僅要做圖，還要做研究，做產(chǎn)品，做交互，當(dāng)然技法也很重要。墨跡加班很辛苦。但是為了夢(mèng)想干活還是很爽的，所以越來(lái)越多人從大公司出來(lái)創(chuàng)業(yè)。

墨跡天氣室內(nèi)陳設(shè)

站酷：在看到一個(gè)新的手機(jī)APP或者同類的天氣app，你會(huì)首先關(guān)注哪些方面？

相輝：我會(huì)關(guān)注使用場(chǎng)景。新推出的app，一定滿足現(xiàn)有人對(duì)場(chǎng)景的訴求。為什么會(huì)有不同新app出來(lái)，就是人們 的使用場(chǎng)景在變，技術(shù)環(huán)境在變。變化產(chǎn)生新需求，催生軟件不斷革新。就像我們以前用QQ，后來(lái)用微信，就因?yàn)橛脩羰褂脠?chǎng)景，使用習(xí)慣變化，因?yàn)榧夹g(shù)發(fā)生了 革新。天氣軟件也一樣，我們現(xiàn)在的天氣預(yù)報(bào)方法都是很古老的天氣預(yù)報(bào)方法，那么在未來(lái)有沒有可能出現(xiàn)新的預(yù)報(bào)方法，比如比如說到分鐘的短時(shí)預(yù)報(bào)，這種 功能一定會(huì)帶來(lái)設(shè)計(jì)的變化。所以作為天氣軟件，我們會(huì)關(guān)注這些變化，設(shè)計(jì)更好的體驗(yàn)來(lái)滿足用戶需求，我相信在變化中帶來(lái)的機(jī)會(huì)是最多的，最可怕的是環(huán)境一 成不變。

 

站酷：所以，設(shè)計(jì)師要把眼光放得更遠(yuǎn)一些？

相輝：預(yù)判永遠(yuǎn)是最重要的，但是有時(shí)候預(yù)判不一定特別準(zhǔn)，我們也會(huì)犯很多錯(cuò)誤，更好的方法是根據(jù)數(shù)據(jù)去來(lái)試。數(shù) 據(jù)是不會(huì)騙人的，只要有基本的解讀數(shù)據(jù)的能力，通過很多維度就可以把方向試出來(lái)。在試之前，方向的選擇是經(jīng)驗(yàn)的積累，但有時(shí)經(jīng)驗(yàn)并不能完全可靠，所以需要 方法來(lái)幫助你找到正確的方向。真正好的設(shè)計(jì)師都是通過非常多的探索達(dá)成一個(gè)結(jié)果，并不斷修正這個(gè)結(jié)果。

墨跡天氣的5.0改版設(shè)計(jì)

站酷：產(chǎn)品的迭代設(shè)計(jì)中，最有挑戰(zhàn)性的是哪個(gè)部分？

相輝：天氣軟件使用這么長(zhǎng)時(shí)間，用戶需求會(huì)有越來(lái)越多的變化，如何在變化中如何把握細(xì)節(jié)，讓用戶更喜歡你的產(chǎn) 品，這是具有挑戰(zhàn)的，因?yàn)樗茈y大變。那么多電商網(wǎng)站，界面都不會(huì)有大的交互差異，只有細(xì)節(jié)是不一樣的。京東，淘寶都有自己的規(guī)則，用戶可能不會(huì)有明顯的 感覺，但是不同的商業(yè)模式一定帶來(lái)不同的交互。天氣軟件也是一樣。我們做了這么多年之后，積累了非常多用戶行為的數(shù)據(jù)，包括用戶愿意在首屏看到什么信息。 這些重要的交互信息，要通過圖形設(shè)計(jì)和流程把它們?cè)忈尦鰜?lái)，這是我們真正的挑戰(zhàn)。迭代要做的是潤(rùn)物細(xì)無(wú)聲的改版，而不是全方面的革命。雖然設(shè)計(jì)師都喜歡革命，但其實(shí)真正的好產(chǎn)品是慢慢改進(jìn)出來(lái)的。

站酷：您比較關(guān)注的圖形交互形式有哪些？怎么看待交互設(shè)計(jì)趨勢(shì)？

相輝：解決問題的UI是最重要的，其次才是帶有個(gè)性的設(shè)計(jì)，但是個(gè)性是浮于表面的。十幾年前UI對(duì)于設(shè)計(jì)的要 求,可能就是把線框圖做好，記得在雅虎的時(shí)候，產(chǎn)品經(jīng)理丟給我的頁(yè)面是完全靜態(tài)的，鼠標(biāo)點(diǎn)鏈接就可以來(lái)回走，設(shè)計(jì)師就是給頁(yè)面套上一層皮，保證css樣式 正確，保證每個(gè)交互符合規(guī)范。后來(lái)就不一樣了，到了手機(jī)端，場(chǎng)景越來(lái)越豐富，就要考慮不同的分辨率，手指的大小，點(diǎn)按的風(fēng)格，豐富信息的交互在手機(jī)上架 構(gòu)。未來(lái)就更不一樣了，你需要考慮多終端的適配，考慮軟硬件的結(jié)合，考慮更豐富的場(chǎng)景。因?yàn)楝F(xiàn)在的互聯(lián)網(wǎng)是線上和線下結(jié)合，你不僅需要了解線上的部分，比 如說你做軟件界面，你還需要了解業(yè)務(wù)，你要了解線下服務(wù)的每個(gè)流程，用戶是在怎樣的場(chǎng)景下使用的。

我覺得現(xiàn)在的圖形交互設(shè)計(jì)師 才真正地開始像設(shè)計(jì)師。因?yàn)樵O(shè)計(jì)開始融入用戶生活，真正影響用戶，這樣就對(duì)設(shè)計(jì)師提出了更高的要求。不光是圖形方面交互方面的要求，而是對(duì)于生活，對(duì)于怎 么做項(xiàng)目，怎么做營(yíng)銷，一個(gè)事是如何從1到100做成的，你需要對(duì)這些東西有理解，你才可能選擇最準(zhǔn)確的設(shè)計(jì)達(dá)到這個(gè)目標(biāo)。

站酷：智能設(shè)備越來(lái)越火，墨跡也在去年推出了空氣果，關(guān)于智能硬件的設(shè)計(jì)，有哪些問題值得關(guān)注？

相輝：還是更多地關(guān)注和研究場(chǎng)景。移動(dòng)互聯(lián)網(wǎng)和硬件深刻地影響人們的生活，所以設(shè)計(jì)師要研究用戶在什么時(shí)候使用產(chǎn)品，需求到底是什么？

伴隨全新技術(shù)一定有全新的場(chǎng)景出來(lái)，一定要找到硬件適應(yīng)的場(chǎng)景。功能不是我們憑空想出來(lái)的。比如手機(jī)控制窗簾看上去很酷，但實(shí)際上很少用戶會(huì)高頻地去用。智能硬件不是說把硬件連上手機(jī)就智能了。在復(fù)雜的環(huán)境里面，一個(gè)產(chǎn)品的設(shè)計(jì)需要大量的研究和數(shù)據(jù)判斷，不斷試錯(cuò)才能找到好的方向。但是硬件試錯(cuò)不如軟件那么簡(jiǎn)單，需要設(shè)計(jì)師尋找研究方法。真正好的產(chǎn)品是一步步迭代出來(lái)的。

站酷：2015年墨跡天氣會(huì)有哪些新的嘗試？

相輝：第一，國(guó)際化，因?yàn)閲?guó)內(nèi)用戶量已經(jīng)很大，所以接下來(lái)會(huì)進(jìn)行更多國(guó)際化的嘗試。

第二，把天氣軟件做厚。十幾年前我們看下天氣就夠了，后來(lái)我要看看實(shí)景，看看外面是什么樣的，再往后，我需要了解霧霾，了解完霧霾之后，我還想跟人 溝通下霧霾怎么防范的。我們現(xiàn)在有這么多指數(shù)，看完指數(shù)后怎么能獲得更多信息來(lái)幫助我們的生活，這是我們對(duì)天氣軟件不同訴求的期待。這些期待我們未來(lái)一定 能滿足地更好。通過我們的設(shè)計(jì)和場(chǎng)景連接關(guān)心天氣的人和人，人和服務(wù)，這是我們的目標(biāo)。

墨跡天氣安卓國(guó)際版

站酷：墨跡天氣在站酷已經(jīng)舉辦了兩屆插件設(shè)計(jì)大賽，作為評(píng)委，你看重參賽作品的那些特質(zhì)？

相輝：我會(huì)關(guān)注設(shè)計(jì)師對(duì)產(chǎn)品的理解，對(duì)總體設(shè)計(jì)的把控能力。那么多復(fù)雜的界面在一起，我要看他設(shè)計(jì)復(fù)雜的產(chǎn)品的歸納能力，看他是否能表現(xiàn)主題的韻味。比如，做宇宙主題，他是不是了解宇宙的一些元素，做了相關(guān)研究工作。比如，做中國(guó)風(fēng)的主題，設(shè)計(jì)師是不是正確理解中國(guó)文化的元素，理解中國(guó)符號(hào)背后的故事，作做出的設(shè)計(jì)一定是不同的。就像我們畫畫，理解肌肉和骨骼才能畫得像，幾個(gè)線條就能把人畫得很好，不理解的話，就很容易畫肉畫糊。所以，理性上，看設(shè)計(jì)師的歸納能力和整體架構(gòu)能力；感性上，看是否做了足夠多的文化研究和設(shè)計(jì)背景的調(diào)查。再有就是技法上是否能把這些完美表達(dá)出來(lái)。

站酷：墨跡天氣設(shè)計(jì)團(tuán)隊(duì)對(duì)于站酷網(wǎng)是怎么看的？

相輝：站酷太棒了。尤其這兩年做得越來(lái)越好，做到設(shè)計(jì)師的聚合，在行業(yè)里的影響力越來(lái)越強(qiáng)，這是我們特別愿意看 到的。正因?yàn)橛心銈?，包括早期的ChinaUI再到站酷，讓設(shè)計(jì)師有地方可以交流，取暖，有地方可以開開眼界，看看同行們用了哪些方法，在做什么事情。另 外，在你們那吼一嗓子也能招到很多人。

很感動(dòng)你們?cè)谛袠I(yè)里的貢獻(xiàn)，提供交流的平臺(tái)，這個(gè)很重要。從以前天天被虐，到設(shè)計(jì)師地位越來(lái)越高，逐漸也成為一個(gè)公司必不可少的一部分，我能感覺到變化。