2015-4-1 用心設(shè)計
藍(lán)藍(lán)設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
每一個扁平化界面設(shè)計,都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計
來源:站酷網(wǎng)
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
氣,持續(xù)占據(jù)各大APP排行榜天氣類軟件第一位,在5年時間內(nèi),擁有超過3.3億的注冊用戶。人氣APP是怎么設(shè)計出來的?設(shè)計師應(yīng)該怎么加強自己的能力?帶著這些問題,站酷網(wǎng)探訪了墨跡天氣設(shè)計團隊,希望他們的觀點對同為設(shè)計師的你有所幫助。
受訪人:相輝,墨跡天氣副總裁 運營VP。
先后任職雅虎,百度等公司,前百度移動云事業(yè)部資深用戶體驗設(shè)計師,前百度易平臺負(fù)責(zé)人,曾擁豐富的交互設(shè)計經(jīng)驗和團隊管理經(jīng)驗。
受訪人:Tony石浩言,墨跡天氣設(shè)計總監(jiān)。
13年入職墨跡,兩年時間從設(shè)計師成長為設(shè)計總監(jiān),負(fù)責(zé)過墨跡天氣安卓/windows/國際版/pad等不同平臺的設(shè)計,目前正在帶領(lǐng)ios平臺的設(shè)計。
Tony石浩言和相輝
————————————————————————————————————————————————
墨跡天氣是怎么做設(shè)計的?
站酷:從推出到現(xiàn)在,墨跡天氣在UI設(shè)計風(fēng)格上都發(fā)生過哪些變化?哪些原因影響了這樣的改變?
Tony:主要有三次。第一次順應(yīng)潮流,老生常談,從擬物到扁平。第二次當(dāng)雅虎天氣的上滑式整體頁面體驗獲得了蘋果設(shè)計大獎后,我們也學(xué)習(xí)了這種交互形式,去掉底部的doc欄,啟用了上滑式的一體化設(shè)計。第三次就是近期的5.0改版,將上滑體驗和底doc欄做了結(jié)合,算是一種回歸。
設(shè)計師要有數(shù)據(jù)分析能力,我們所做的轉(zhuǎn)變大部分是基于數(shù)據(jù)分析得出。做設(shè)計之前,設(shè)計師必須知道為什么這樣去做,而不只是為了好看,UI是移動工程學(xué),是需要創(chuàng)造出來解決問題。當(dāng)軟件功能越來越多,就需要用戶更快地獲得他們所需要的信息,減少學(xué)習(xí)成本。比如,在5.0改版設(shè)計前,我們觀察數(shù)據(jù)發(fā)現(xiàn)因為一開始時景入口在首頁沒有標(biāo)明,而是通過首頁左右滑動獲得,這樣直接導(dǎo)致部分用戶找不到時景功能,相關(guān)點擊量就會較低。
墨跡天氣設(shè)計團隊
站酷:墨跡天氣的設(shè)計工作流程是怎樣的?
Tony:設(shè)計師在整個產(chǎn)品流程中是從一而終,一直貫穿的。首先需要了解產(chǎn)品,和產(chǎn)品部門一起參加內(nèi)部會議了解 功能點,期間有任何異議都可以提出。拿到功能文檔后開始研究交互,提煉設(shè)計,配合開發(fā)實現(xiàn),再到后來的配合運營做產(chǎn)品發(fā)版相關(guān)跟進。平時還需要和產(chǎn)品,開 發(fā)互相權(quán)衡并不斷打磨產(chǎn)品細(xì)節(jié)。
站酷:在這個流程中,設(shè)計團隊與其他部門是如何協(xié)作的?設(shè)計和開發(fā),圖形和交互如何平衡呢?
Tony:其實就是不停地聊。總體來說,在創(chuàng)業(yè)公司團隊的氛圍還是不錯的,大家都希望做出更好的東西。需要溝通的時候,UI設(shè)計師甚至搬上電腦坐在開發(fā)旁就一起進行了。我們的管理比較扁平,需要每個人都有垂直對接的能力。
墨跡天氣24節(jié)氣設(shè)計
交互這塊以產(chǎn)品為主,我們的設(shè)計師也會在平時的設(shè)計工作中培養(yǎng)交互能力,會主動地提出問題,和解決方案。比較理想的一點是,只要是好的建議,無論是產(chǎn)品,設(shè)計,還是開發(fā),大家都會互相采納。
站酷:注意到墨跡天氣在交互上的一些小動效,比如在“我的主頁”里,在向上和向下拖動頁面時,讓頭像和郵件在原有的基礎(chǔ)上發(fā)生了改變,這樣設(shè)計的原因是什么?對于動效在交互中的應(yīng)用你怎么看?
Tony:我們希望第一次點“我的頁面”,能給用戶帶來多一些的個性化色彩,所以突出頭像和個性背景,緊接著在產(chǎn)生二次操作上滑之后,用戶名和郵件入口滑向兩邊,重點在下面的list view信息,動效就是將二者結(jié)合的最佳方式之一。所以,動效的重點應(yīng)該是把不同的功能點完美銜接起來,而不是所謂的看上去炫,那只是動畫,不是動效。
墨跡天氣5.0的天氣信息設(shè)計
站酷:現(xiàn)在墨跡天氣功能越來越多,包括各種生活提示,如何處理大量的信息,讓用戶更快捷地找到自己想要的信息而又不讓頁面感覺擁擠,給設(shè)計師提出了很高的要求。你們是如何做的呢?
Tony:我們對現(xiàn)有功能的優(yōu)先級排列是基于測試數(shù)據(jù)的,需求低的功能點是能減就減的。
在我們的APP上,首屏上呈現(xiàn)的是高度歸納后的天氣信息;下滑后是二級信息多天預(yù)報;最底部的位置是指數(shù)方面的延伸,穿衣指數(shù),生活指數(shù)等等。指數(shù) 位置做天氣延展性內(nèi)容服務(wù),可拓展性也很高。比如進入穿衣指數(shù),我們將有共鳴的情感化描述和提示放在顯眼的位置,背景也會根據(jù)天氣呈現(xiàn)不同顏色,帶給用戶 最直觀的天氣感受。穿衣指數(shù)頁面下方,就有穿衣指南,這里對部分用戶而言優(yōu)先級不是很高,信息呈現(xiàn)上就會放在比較深的位置。另外,有新推出的探索性功能也 會從比較深的位置開始,通過數(shù)據(jù)再去了解有多少用戶專門去通過多步操作尋找這個功能。而在我們需要刪減功能時也不會直接砍掉,會先藏在較深的位置,然后根 據(jù)反饋靈活調(diào)整。
————————————————————————————————————————————————
設(shè)計師如何適應(yīng)變化和趨勢?
站酷:你是什么時候加入墨跡的,加入后你的工作發(fā)生了什么轉(zhuǎn)變,對你個人而言最大的收獲是什么?
相輝:我是14年來的墨跡,覺得30多歲了,別在大公司混了,創(chuàng)業(yè)一下,感覺和大公司真的非常不一樣。以前的工 作重心是設(shè)計,現(xiàn)在的重點是運營。大多數(shù)設(shè)計師會認(rèn)為運營是非常拼創(chuàng)意和腦力的工作,其實半年多下來發(fā)現(xiàn),運營更多靠心細(xì)靠規(guī)則。就像外人不了解設(shè)計一 樣,以為設(shè)計是美術(shù),但是設(shè)計師知道設(shè)計需要很棒的方法,嚴(yán)謹(jǐn)?shù)墓こ虒崿F(xiàn),流程來保證做出好設(shè)計。運營也是一樣,需要各種各樣的方法來了解每個細(xì)節(jié)來如何 保證產(chǎn)品的正常表達(dá),包括運營階段性的目標(biāo)是什么,如何和產(chǎn)品契合,從而反向推動產(chǎn)品做運營需求的改進,這些都有點像設(shè)計。
個人最大的成長還是學(xué)習(xí)的能力。就像我永遠(yuǎn)跟別人說四個詞:多思,勤奮,韌性,專一。多思,多思考,在同樣的環(huán)境和要求下,怎么能跟別人做得不一 樣。勤奮不多說了,就是勤能補拙。韌性,就是你一定會失敗而且失敗很多次,因為你要不停涉足全新的領(lǐng)域,但你也會學(xué)到很多東西,這就是創(chuàng)業(yè)牛逼的地方。這 過程中一定是痛苦的,在這痛苦中你能不能堅持下來,能不能很有韌性地一次次站起來,把它變成常態(tài),融入血液里這是非常難的。最后,專一,就是做事情要執(zhí) 著,你可做的事情非常多,創(chuàng)業(yè)公司更是這樣,可能十個事都能做,但是哪一個是投入產(chǎn)出比最高的,哪一個最能有投資回報?這需要你選擇。
墨跡天氣室內(nèi)陳設(shè)
站酷:概括一下,這是一個怎樣的團隊呢?
相輝:你晚上十一二點多來這里,基本上一半的人都還在,我們并沒有要求加班,但是大家愿意在這里,氛圍特別好。 因為我們覺得做天氣這件事很酷,特別有價值,可以獲得很多成就感,學(xué)到很多東西,這個過程非常激動人心,這是真正吸引人的地方。我們相信設(shè)計師需要更寬松 的創(chuàng)業(yè)環(huán)境。這里不怕你有想法而是怕你沒有想法,這里不只是做圖切圖,而是鼓勵設(shè)計師去做更多的嘗試,發(fā)揮個人價值。我們有太多的事情等著每個人去發(fā)掘。
站酷:在挑選成員時,你比較看重設(shè)計師哪些方面的能力?
相輝:潛力吧,看重一個人的發(fā)展能力,創(chuàng)業(yè)公司需要活力,需要這個人能適應(yīng)更多的崗位,不僅要做圖,還要做研究,做產(chǎn)品,做交互,當(dāng)然技法也很重要。墨跡加班很辛苦。但是為了夢想干活還是很爽的,所以越來越多人從大公司出來創(chuàng)業(yè)。
墨跡天氣室內(nèi)陳設(shè)
站酷:在看到一個新的手機APP或者同類的天氣app,你會首先關(guān)注哪些方面?
相輝:我會關(guān)注使用場景。新推出的app,一定滿足現(xiàn)有人對場景的訴求。為什么會有不同新app出來,就是人們 的使用場景在變,技術(shù)環(huán)境在變。變化產(chǎn)生新需求,催生軟件不斷革新。就像我們以前用QQ,后來用微信,就因為用戶使用場景,使用習(xí)慣變化,因為技術(shù)發(fā)生了 革新。天氣軟件也一樣,我們現(xiàn)在的天氣預(yù)報方法都是很古老的天氣預(yù)報方法,那么在未來有沒有可能出現(xiàn)新的預(yù)報方法,比如比如說到分鐘的短時預(yù)報,這種 功能一定會帶來設(shè)計的變化。所以作為天氣軟件,我們會關(guān)注這些變化,設(shè)計更好的體驗來滿足用戶需求,我相信在變化中帶來的機會是最多的,最可怕的是環(huán)境一 成不變。
站酷:所以,設(shè)計師要把眼光放得更遠(yuǎn)一些?
相輝:預(yù)判永遠(yuǎn)是最重要的,但是有時候預(yù)判不一定特別準(zhǔn),我們也會犯很多錯誤,更好的方法是根據(jù)數(shù)據(jù)去來試。數(shù) 據(jù)是不會騙人的,只要有基本的解讀數(shù)據(jù)的能力,通過很多維度就可以把方向試出來。在試之前,方向的選擇是經(jīng)驗的積累,但有時經(jīng)驗并不能完全可靠,所以需要 方法來幫助你找到正確的方向。真正好的設(shè)計師都是通過非常多的探索達(dá)成一個結(jié)果,并不斷修正這個結(jié)果。
墨跡天氣的5.0改版設(shè)計
站酷:產(chǎn)品的迭代設(shè)計中,最有挑戰(zhàn)性的是哪個部分?
相輝:天氣軟件使用這么長時間,用戶需求會有越來越多的變化,如何在變化中如何把握細(xì)節(jié),讓用戶更喜歡你的產(chǎn) 品,這是具有挑戰(zhàn)的,因為它很難大變。那么多電商網(wǎng)站,界面都不會有大的交互差異,只有細(xì)節(jié)是不一樣的。京東,淘寶都有自己的規(guī)則,用戶可能不會有明顯的 感覺,但是不同的商業(yè)模式一定帶來不同的交互。天氣軟件也是一樣。我們做了這么多年之后,積累了非常多用戶行為的數(shù)據(jù),包括用戶愿意在首屏看到什么信息。 這些重要的交互信息,要通過圖形設(shè)計和流程把它們詮釋出來,這是我們真正的挑戰(zhàn)。迭代要做的是潤物細(xì)無聲的改版,而不是全方面的革命。雖然設(shè)計師都喜歡革命,但其實真正的好產(chǎn)品是慢慢改進出來的。
站酷:您比較關(guān)注的圖形交互形式有哪些?怎么看待交互設(shè)計趨勢?
相輝:解決問題的UI是最重要的,其次才是帶有個性的設(shè)計,但是個性是浮于表面的。十幾年前UI對于設(shè)計的要 求,可能就是把線框圖做好,記得在雅虎的時候,產(chǎn)品經(jīng)理丟給我的頁面是完全靜態(tài)的,鼠標(biāo)點鏈接就可以來回走,設(shè)計師就是給頁面套上一層皮,保證css樣式 正確,保證每個交互符合規(guī)范。后來就不一樣了,到了手機端,場景越來越豐富,就要考慮不同的分辨率,手指的大小,點按的風(fēng)格,豐富信息的交互在手機上架 構(gòu)。未來就更不一樣了,你需要考慮多終端的適配,考慮軟硬件的結(jié)合,考慮更豐富的場景。因為現(xiàn)在的互聯(lián)網(wǎng)是線上和線下結(jié)合,你不僅需要了解線上的部分,比 如說你做軟件界面,你還需要了解業(yè)務(wù),你要了解線下服務(wù)的每個流程,用戶是在怎樣的場景下使用的。
我覺得現(xiàn)在的圖形交互設(shè)計師 才真正地開始像設(shè)計師。因為設(shè)計開始融入用戶生活,真正影響用戶,這樣就對設(shè)計師提出了更高的要求。不光是圖形方面交互方面的要求,而是對于生活,對于怎 么做項目,怎么做營銷,一個事是如何從1到100做成的,你需要對這些東西有理解,你才可能選擇最準(zhǔn)確的設(shè)計達(dá)到這個目標(biāo)。
站酷:智能設(shè)備越來越火,墨跡也在去年推出了空氣果,關(guān)于智能硬件的設(shè)計,有哪些問題值得關(guān)注?
相輝:還是更多地關(guān)注和研究場景。移動互聯(lián)網(wǎng)和硬件深刻地影響人們的生活,所以設(shè)計師要研究用戶在什么時候使用產(chǎn)品,需求到底是什么?
伴隨全新技術(shù)一定有全新的場景出來,一定要找到硬件適應(yīng)的場景。功能不是我們憑空想出來的。比如手機控制窗簾看上去很酷,但實際上很少用戶會高頻地去用。智能硬件不是說把硬件連上手機就智能了。在復(fù)雜的環(huán)境里面,一個產(chǎn)品的設(shè)計需要大量的研究和數(shù)據(jù)判斷,不斷試錯才能找到好的方向。但是硬件試錯不如軟件那么簡單,需要設(shè)計師尋找研究方法。真正好的產(chǎn)品是一步步迭代出來的。
站酷:2015年墨跡天氣會有哪些新的嘗試?
相輝:第一,國際化,因為國內(nèi)用戶量已經(jīng)很大,所以接下來會進行更多國際化的嘗試。
第二,把天氣軟件做厚。十幾年前我們看下天氣就夠了,后來我要看看實景,看看外面是什么樣的,再往后,我需要了解霧霾,了解完霧霾之后,我還想跟人 溝通下霧霾怎么防范的。我們現(xiàn)在有這么多指數(shù),看完指數(shù)后怎么能獲得更多信息來幫助我們的生活,這是我們對天氣軟件不同訴求的期待。這些期待我們未來一定 能滿足地更好。通過我們的設(shè)計和場景連接關(guān)心天氣的人和人,人和服務(wù),這是我們的目標(biāo)。
墨跡天氣安卓國際版
站酷:墨跡天氣在站酷已經(jīng)舉辦了兩屆插件設(shè)計大賽,作為評委,你看重參賽作品的那些特質(zhì)?
相輝:我會關(guān)注設(shè)計師對產(chǎn)品的理解,對總體設(shè)計的把控能力。那么多復(fù)雜的界面在一起,我要看他設(shè)計復(fù)雜的產(chǎn)品的歸納能力,看他是否能表現(xiàn)主題的韻味。比如,做宇宙主題,他是不是了解宇宙的一些元素,做了相關(guān)研究工作。比如,做中國風(fēng)的主題,設(shè)計師是不是正確理解中國文化的元素,理解中國符號背后的故事,作做出的設(shè)計一定是不同的。就像我們畫畫,理解肌肉和骨骼才能畫得像,幾個線條就能把人畫得很好,不理解的話,就很容易畫肉畫糊。所以,理性上,看設(shè)計師的歸納能力和整體架構(gòu)能力;感性上,看是否做了足夠多的文化研究和設(shè)計背景的調(diào)查。再有就是技法上是否能把這些完美表達(dá)出來。
站酷:墨跡天氣設(shè)計團隊對于站酷網(wǎng)是怎么看的?
相輝:站酷太棒了。尤其這兩年做得越來越好,做到設(shè)計師的聚合,在行業(yè)里的影響力越來越強,這是我們特別愿意看 到的。正因為有你們,包括早期的ChinaUI再到站酷,讓設(shè)計師有地方可以交流,取暖,有地方可以開開眼界,看看同行們用了哪些方法,在做什么事情。另 外,在你們那吼一嗓子也能招到很多人。
很感動你們在行業(yè)里的貢獻,提供交流的平臺,這個很重要。從以前天天被虐,到設(shè)計師地位越來越高,逐漸也成為一個公司必不可少的一部分,我能感覺到變化。
藍(lán)藍(lán)設(shè)計的小編 http://www.teruid.com