此文是愛奇藝無線UED負(fù)責(zé)人 @愛奇藝_曉生?采訪百度資深用戶界面設(shè)計(jì)師 @JJ-Ying?后撰寫的文章，這位GUI達(dá)人給我們分享了他的設(shè)計(jì)經(jīng)歷和一些觀點(diǎn)，有許多都是干貨，剛?cè)胄械脑O(shè)計(jì)師們趕緊來學(xué)習(xí)一下吧。

JJ-Ying 也曾分享過他的自學(xué)過程，想了解的童鞋們可以閱讀這篇：《非科班如何成為UI設(shè)計(jì)師？》

先介紹下自己吧

大家好~ 我是 JJ Ying。我一直覺得自己在圈里是比較典型的臉熟程度大過實(shí)際能力的設(shè)計(jì)師，只是因?yàn)樵缒?GUI 設(shè)計(jì)比賽還屈指可數(shù)的時(shí)候贏了個(gè)獎(jiǎng)所以被一些人知曉，其實(shí)我也是依舊在設(shè)計(jì)路上摸索前行的設(shè)計(jì)熱愛者。目前在百度上海繼續(xù)做著「做一款有人每天用的產(chǎn)品」的夢想。

（GUI Champs 2006?獲獎(jiǎng)作品）

曉生：

很榮幸你能接受采訪，08 年我還在讀書，你好像已經(jīng)出名了，也很遺憾錯(cuò)過一起共事的機(jī)會。當(dāng)時(shí)很好奇，一個(gè)學(xué)物理的會轉(zhuǎn)行做設(shè)計(jì)，后來發(fā)現(xiàn)GUI很多設(shè)計(jì)師都不是科班出身。那早期你是如何學(xué)習(xí) GUI 設(shè)計(jì)的？

JJ-Ying：

其實(shí)說「轉(zhuǎn)行」不是特別精確，哈哈，因?yàn)槲以谖锢韺I(yè)這條路上幾乎等于沒開始走~

和大部分設(shè)計(jì)師一樣，早期的 GUI 學(xué)習(xí)就是依靠各種練習(xí)。比起其他行業(yè)，做 GUI 的入門門檻是比較低的，因?yàn)樵O(shè)計(jì)時(shí)使用的專業(yè)軟件比如 Photoshop 上手還是很容易的，一本三流的書或者一些零散的教程就能幫助大家無障礙使用軟件了。

而之后的深入學(xué)習(xí)，關(guān)鍵是如何把這個(gè)「術(shù)」轉(zhuǎn)變成「藝」，我自己的經(jīng)驗(yàn)是這個(gè)階段要盡量減少單純的臨摹和練習(xí)，最好結(jié)合實(shí)際項(xiàng)目（沒有正式商業(yè)項(xiàng)目的話也可以自己尋找或者想一個(gè)課題），在實(shí)踐的時(shí)候不是單純想怎么做得好看，而要通過設(shè)計(jì)去解決一些實(shí)際需求。

 

曉生：

作為一名專業(yè)的設(shè)計(jì)師，你以為自身成功的關(guān)鍵是什么呢？

JJ-Ying：

培養(yǎng)并且持續(xù)維持熱情。每個(gè)把設(shè)計(jì)師作為職業(yè)的同學(xué)都會多多少少遇到一些問題，可能是市場環(huán)境沒法幫助我們實(shí)踐自己想做的東西、可能是工作內(nèi)容與預(yù)期目標(biāo)有距離、也有可能是覺得自己的付出和收獲不相符。所有這些問題都會一點(diǎn)點(diǎn)磨礪掉我們對設(shè)計(jì)的熱情。

工作當(dāng)中要去找到自己的 high 點(diǎn)，保持當(dāng)時(shí)入行的初心。

比如我自己一直的愿望就是設(shè)計(jì)一些用戶每天會用到的產(chǎn)品，所以經(jīng)常去查找用戶對自己負(fù)責(zé)的產(chǎn)品的反饋，不管這些反饋是正向的還是負(fù)面，知道有人用我設(shè)計(jì)的東西、care 我做的產(chǎn)品就讓我打心底里更有干勁。

 

曉生：

百度和 HP 這樣的外企，設(shè)計(jì)氛圍和工作方式有哪些不同呢？

JJ-Ying：

我所待過的這兩個(gè)公司差別真的不是一點(diǎn)點(diǎn)，舉個(gè)例子吧，我在 HP 參與的第一個(gè)正式項(xiàng)目是在我入職之后一年、做完并交付之后 9 個(gè)月上市的，而在百度入職之后第二天接到一個(gè)需求，第三天完成了初稿，過了個(gè)周末第四天調(diào)整了一下完成輸出第五天產(chǎn)品就上線了。

互聯(lián)網(wǎng)產(chǎn)品的一大特征就是「快」，快速迭代多次試錯(cuò)，內(nèi)部對產(chǎn)品雖然也有長線愿景與目標(biāo)，但很多時(shí)候產(chǎn)品的形態(tài)是根據(jù)用戶的反饋、競品的發(fā)展、產(chǎn)業(yè)的趨勢以及實(shí)現(xiàn)的技術(shù)快速調(diào)整的。而在惠普打印機(jī)部門這種做消費(fèi)類電子的集團(tuán)里產(chǎn)品生命周期以年計(jì)算，3 年乃至 5 年后的設(shè)計(jì)都會有嚴(yán)密的規(guī)劃，因此流程會比較細(xì)致，而從軟件到硬件的設(shè)計(jì)、開發(fā)團(tuán)隊(duì)在世界各地，設(shè)計(jì)工作中不得不把很多環(huán)節(jié)都文檔化，并且花很多時(shí)間在溝通上。

 

曉生：

從你的微博可以看出，視野很廣，經(jīng)常上哪些網(wǎng)站呢？

JJ-Ying：

在博客時(shí)代我曾經(jīng)很即可地訂閱了無數(shù)設(shè)計(jì)博客，但是資源日漸泛濫之后發(fā)覺大家的內(nèi)容同質(zhì)化很嚴(yán)重，所以后來也放棄 RSS 閱讀器，轉(zhuǎn)用 Flipboard 去隨意地瀏覽~ 但目前還是有那么幾個(gè)網(wǎng)站我是每篇必看的：

Sidebar.io

一個(gè)設(shè)計(jì)鏈接聚合，每天 5 篇左右的精華文章。另外目前剛出現(xiàn)的?Designer News?也是個(gè)不錯(cuò)的設(shè)計(jì) Link 聚合網(wǎng)站

Dribbble

雖然這個(gè)就像 GUI 設(shè)計(jì)師的門戶網(wǎng)站，很多人每天都上，但是依然有非常多的朋友問我怎么利用這個(gè)網(wǎng)站。上面既沒什么教程又不是滿屏大圖，怎么學(xué)習(xí)呢？其實(shí)大家不必刻意地去找那些細(xì)致的 step-by-step 教程，并不是學(xué)會了某個(gè)技法、某種表現(xiàn)形式怎么實(shí)現(xiàn)才叫學(xué)習(xí)。開拓自己的眼界，看看別人尤其是那些優(yōu)秀的設(shè)計(jì)師在做些什么在探索些什么對于自己的幫助更大。對于我自己來說，每天上 Dribbble 看大家牛叉作品的一個(gè)重要作用是告訴自己這個(gè)世界上不管哪個(gè)方面都有比我牛x幾百倍的人，而且很多比自己要勤奮很多，我要有危機(jī)感。
相關(guān)閱讀：
《設(shè)計(jì)師必讀！玩轉(zhuǎn)Dribbble終極指南》

Boston

很多紀(jì)實(shí)攝影的佳作，幫助我以其他人的視角更好地了解這個(gè)世界

Brand New

Logo 設(shè)計(jì)方面最棒的博客了，作者的咨詢十分新鮮，語言十分有趣和犀利

?Beautiful Pixels

被這個(gè)網(wǎng)站的介紹騙了不少錢，下了很多華而不實(shí)的 App，但總的來說這上面還是有很多設(shè)計(jì)得不錯(cuò)的 App 推薦給大家。

 

曉生：

你最喜歡哪些 App 的界面設(shè)計(jì)呢？為什么？

JJ-Ying：

National Parks

這個(gè)拿下了去年 Apple Design Award 的明星 App 在交互和視覺上頗具創(chuàng)新，尤其是動效讓我印象非常深刻。

Jetsetter

也是旅游行業(yè)的一個(gè) App，設(shè)計(jì)非常簡約，但是同樣動效豐富。特別喜歡他的標(biāo)題導(dǎo)航欄：始終存在于左上角的圓形在第一層級是產(chǎn)品 Logo 的一部分，轉(zhuǎn)場的時(shí)候承載「菊花」，子頁面中又充當(dāng)了返回按鈕。這些過程之間的轉(zhuǎn)場也很自然。

多年前的 Path

?

當(dāng)那個(gè)驚為天人的時(shí)間軸界面還沒出現(xiàn)、當(dāng)國內(nèi)的互聯(lián)網(wǎng)行業(yè)從業(yè)人員還沒涌入的時(shí)候 1.x 版的 Path 還是一個(gè)單純的照片分享應(yīng)用。很懷念當(dāng)時(shí)那個(gè)縮略圖都是橫條的設(shè)計(jì)是因?yàn)槟菚r(shí)候整個(gè)產(chǎn)品使用起來很有「韻律」。主頁面上可以快速瀏覽大量的朋友照片，喜歡的點(diǎn)細(xì)條放大，很單純，很美好。

 

曉生：

App 界面設(shè)計(jì)中字體非常重要，但手機(jī)操作系統(tǒng)中中文字體非常有限，如何才能做好中文界面的排版呢？

JJ-Ying：

常聽到朋友們抱怨說現(xiàn)在很多人畫一枚寫實(shí)圖標(biāo)就算是做過界面設(shè)計(jì)了，其實(shí)界面設(shè)計(jì)中非常重要的一環(huán)是布局和排版，排版的終極目標(biāo)是讓文字像優(yōu)秀印刷品一樣讓人讀起來愉悅，而布局的終極目標(biāo)是能梳理清楚界面中的層級關(guān)系。

中文字體選擇少，限制多這個(gè)現(xiàn)象在移動平臺乃至網(wǎng)頁端短期內(nèi)都不可能解決，但有時(shí)候我覺得這反而對設(shè)計(jì)師來說是個(gè)很好的機(jī)會。因?yàn)檫@會讓我們把眼光從字體好看與否轉(zhuǎn)移到布局本身。當(dāng)邊界條件比較嚴(yán)苛的情況下我們就只能利用最基礎(chǔ)的那些大小、顏色對比、點(diǎn)線面等基礎(chǔ)元素去做設(shè)計(jì)。

 

曉生：

你最得意的設(shè)計(jì)作品是什么，是否可以分享下其中的故事？

JJ-Ying：

我想說是我的個(gè)人博客圖月志。出于興趣從 06 年開始寫關(guān)于界面設(shè)計(jì)的博客。多年過去了好友鏈接里的 Link 一個(gè)個(gè)失效但我自己還在堅(jiān)持。從內(nèi)容上積淀了一些我自己的觀點(diǎn)，而從設(shè)計(jì)本身來講也一直作為一個(gè)前段技術(shù)的實(shí)驗(yàn)田被我翻來覆去得折騰。因?yàn)檫@個(gè)這個(gè)「產(chǎn)品」的 PM 就是我自己，所以在設(shè)計(jì)上能很自由地實(shí)驗(yàn)各種新的技術(shù)，從以前的 web font 到后來的響應(yīng)式設(shè)計(jì)。

 

曉生：

你參與過 WebOS 設(shè)計(jì)吧？你如何評價(jià)它的界面設(shè)計(jì)？一直認(rèn)為它的設(shè)計(jì)可以和iPhone 媲美，可惜商業(yè)方面非常的失敗。

JJ-Ying：

WebOS 在被 HP 收購之后從行政、開發(fā)和設(shè)計(jì)上一直比較獨(dú)立，我沒有直接參與過 WebOS 在手機(jī)上的界面設(shè)計(jì)，但是當(dāng) WebOS 還是 HP 一枚重要棋子，打算在 PC、打印機(jī)等產(chǎn)品上全線切換 WebOS 的時(shí)候參與了一些概念設(shè)計(jì)。

雖然很多人都對 WebOS 的界面設(shè)計(jì)記憶猶新、贊不絕口。但是單純從視覺設(shè)計(jì)上來說我想潑個(gè)冷水。我認(rèn)為他的統(tǒng)一性略有欠缺，iOS 上也有各種「千奇百怪」的采用擬物設(shè)計(jì)的原生 App，但是當(dāng)你見到下圖這樣的界面之后馬上就能意識到這是 iOS。而在 WebOS 上各種質(zhì)感、布局的處理不得不說精美，但缺少一些全局性的視覺線索，這個(gè)問題當(dāng)我們 Team 在嘗試把 WebOS 的界面移植到 HP 其他產(chǎn)品上的時(shí)候就突顯出來了。

不過在同硬件的結(jié)合上 WebOS 做得非常好，不論是交互上的一些創(chuàng)新操作模式，還是視覺上統(tǒng)領(lǐng)軟硬件的大圓角設(shè)計(jì)，都是典范。也許這點(diǎn)也是最終導(dǎo)致 WebOS 沒有用到 HP 全線產(chǎn)品上的原因之一，因?yàn)樗茈y去適配其他不是按照 Palm 原有美學(xué)理念去設(shè)計(jì)的其他硬件。

今天碰巧傳來了 WebOS 開源之后又被 LG 收購的消息，如果真的被應(yīng)用在家電上的話很有可能這個(gè)品牌就會被抹去，真是非常可惜啊。

 

曉生：

你如何看待 Metro 風(fēng)格？個(gè)人感覺有些超前，更適合內(nèi)容型 APP。

JJ-Ying：

在知乎上我曾談到 Metro UI 的風(fēng)格看起來與眾不同的一部分原因是因?yàn)橐褪袌錾弦呀?jīng)有的成熟產(chǎn)品 iOS 和 Android 做差異化。

當(dāng)然他也不是完全為了不一樣而不一樣， 往前追溯到第一代 Zune 播放器界面和更早的 Windows XP Media Center 版的一些設(shè)計(jì)風(fēng)格就已經(jīng)能看出 Metro 的影子來了，所以微軟是為了和兩大競爭對手產(chǎn)生差異化 而在內(nèi)部已經(jīng)形成的一些風(fēng)格上進(jìn)行了梳理、強(qiáng)化和普遍運(yùn)用。

很多人認(rèn)為 Metro 就是 平面化、就是用大字體，其實(shí)除了這些外在特征更包含了很多在交互與視覺上的變革。當(dāng)變革出現(xiàn)時(shí)， 用戶熟悉和接受必然需要一個(gè)過程，而且個(gè)性化強(qiáng)的設(shè)計(jì)很容易發(fā)生「喜歡的人很喜歡，討厭的人賊討厭」的狀況。再加上配套硬件的不給力，所以 Metro 風(fēng)格離占領(lǐng)市場還有很多路要走。

第二代 Zune（2007年）：

第一代 Zune（2006年）：

Windows XP Media Center 版（2004年）：

曉生：

作為設(shè)計(jì)師，會不停的學(xué)習(xí)和積累知識，比如為了設(shè)計(jì)好視頻客戶端，會建議我們的設(shè)計(jì)師學(xué)習(xí)海報(bào)等傳統(tǒng)領(lǐng)域的設(shè)計(jì)，你有同樣的感受嗎？平時(shí)會從哪些地方尋找設(shè)計(jì)靈感？

JJ-Ying：

設(shè)計(jì)師尤其是視覺設(shè)計(jì)師，也包括我自己很容易掉落的一個(gè)趨勢（現(xiàn)在貌似流行說閉環(huán)）是「接到需求 > 理解需求 > 找類似產(chǎn)品做參考 > 揉和進(jìn)需求所需要的品牌特征 > 產(chǎn)出」。其實(shí)美是相通的，我的建議是在尋找靈感階段多收集一些和產(chǎn)品無關(guān)的內(nèi)容，甚至可以是一張風(fēng)景照。當(dāng)眼光跳出其他人設(shè)定好的圈圈之后往往能有不一樣的收獲。

另外很多設(shè)計(jì)記得可以嘗試「留過夜」，這也是另一種跳出當(dāng)前思維的方式。

 

曉生：

最近有關(guān)注哪些領(lǐng)域的設(shè)計(jì)，或者在做新的嘗試嗎？

JJ-Ying：

最近對 Motion Design 頗感興趣。在自己的業(yè)余時(shí)間和工作中都嘗試把這些更多融入界面當(dāng)中。

我們的硬件和系統(tǒng)越來越先進(jìn)之后現(xiàn)在在移動設(shè)備和 web 上都已經(jīng)能實(shí)現(xiàn)很多細(xì)致的轉(zhuǎn)場動畫了。雖然動畫不是新鮮的東西，但在真是產(chǎn)品當(dāng)中這些以毫秒計(jì)算的短小動效有時(shí)候能起到很好的幫助用戶理解界面、減少學(xué)習(xí)時(shí)間。

 

曉生：

每個(gè)設(shè)計(jì)師都有自己的風(fēng)格，你喜歡哪些風(fēng)格呢？

JJ-Ying：

視覺設(shè)計(jì)的風(fēng)格、包括技術(shù)是變化很快的，比如兩年前大家張口閉口都說響應(yīng)式設(shè)計(jì)，去年大家都把網(wǎng)頁做成視察滾動的，而現(xiàn)在打開主流設(shè)計(jì)博客和設(shè)計(jì)師網(wǎng)站，哪個(gè)沒討論過Flat design vs ?skeuomorphism。

我喜歡的風(fēng)格其實(shí)不關(guān)乎這些表象，而是其中的「細(xì)節(jié)」。

比如流傳了很久的字體 Helvetica，甚至再早一點(diǎn) Futura，嘗試去了解其中的精巧細(xì)節(jié)為什么被作者設(shè)計(jì)成那樣之后會覺得很了不起，幾十年過去了，我們現(xiàn)在依舊每天使用著他們，最終成就這些經(jīng)典的不是諸如「去個(gè)性化」、「幾何形體」這種外在視覺風(fēng)格，而是細(xì)節(jié)。所以我喜歡所有「關(guān)注細(xì)節(jié)」的設(shè)計(jì)。

 

曉生：

看到你?Dribbble?上一款 Mac 輸入法面板，設(shè)計(jì)師自己不是用戶，應(yīng)該如何去提煉關(guān)鍵性元素（比如顏色/字體等）？

很早以前就有過爭論，關(guān)于設(shè)計(jì)師是不是要去嘗試「扮演」用戶以更好地理解產(chǎn)品。視覺設(shè)計(jì)這方面其實(shí)是個(gè)部分包含了感性元素的東西，所以要設(shè)計(jì)出對于某些人群有針對性的產(chǎn)品需要去觀察。

設(shè)計(jì)都是來源于生活。

每個(gè)人的審美也是在日常生活中可以流露出來的。這種觀察需要平時(shí)去積累，多接觸不一樣的人多了解他們的生活，并且，多觀察。

 

原文地址：daichuanqing
作者：@愛奇藝_曉生

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量58萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：