提到這個(gè)話題有兩層不同的討論方向，在工作中對公司項(xiàng)目進(jìn)行設(shè)計(jì)改版和利用業(yè)余時(shí)間進(jìn)行自由主題的改版練習(xí)。這次我們主要以后者為出發(fā)點(diǎn)進(jìn)行討論，其目的是為了給部分設(shè)計(jì)師在利用自己業(yè)余時(shí)間上面探索出一個(gè)新的方向。在工作項(xiàng)目中進(jìn)行UI設(shè)計(jì)改版分為團(tuán)隊(duì)發(fā)起和自我發(fā)起，這個(gè)我們下一次一起來討論。

UI設(shè)計(jì)師的自我提升來源于多方面的綜合體現(xiàn)，工作項(xiàng)目中的實(shí)戰(zhàn)經(jīng)驗(yàn)、團(tuán)隊(duì)協(xié)作的互補(bǔ)學(xué)習(xí)、項(xiàng)目沉淀與反思、碎片化閱讀的查漏補(bǔ)缺、業(yè)余時(shí)間的自我驅(qū)動(dòng)、閱讀帶來的知識(shí)沉淀等等。如何充分利用自己的業(yè)余時(shí)間是被很多初入行業(yè)的設(shè)計(jì)師所忽略的，一晃三五年過去了，卻發(fā)現(xiàn)自己找不到更多的作品用來豐富簡歷，很快便進(jìn)入了瓶頸期。

面對未來的自己可能會(huì)出現(xiàn)這樣的情況，我們一起提前探討一下這個(gè)話題，以 UI設(shè)計(jì)改版為突破口展開我們的話題，希望帶給即將入行和剛?cè)胄械脑O(shè)計(jì)伙伴兒一個(gè)新的方向。

目錄

1、UI改版的目的，從不做無意義的事情；

2、制定時(shí)間規(guī)劃，是為了治療懶病；

3、如何挑選改版產(chǎn)品，再也不是選“美”了；

4、體驗(yàn)，這是你的第一次深度探尋；

5、功能梳理，理清流程好開工；

6、競品分析，做好知己知彼；

7、素材采集，打開禁錮的思維；

8、體驗(yàn)，走了一圈才發(fā)現(xiàn)你可以更好；

9、交互設(shè)計(jì)，實(shí)現(xiàn)你心中的更好；

10、設(shè)計(jì)風(fēng)格推導(dǎo)，符合產(chǎn)品的設(shè)計(jì)趨勢運(yùn)用；

11、界面設(shè)計(jì)，碎片化積累；

12、審核，尋找導(dǎo)師；

13、調(diào)整優(yōu)化，不放過任何一個(gè)細(xì)節(jié)；

14、包裝，整理設(shè)計(jì)思路；

15、分享，設(shè)計(jì)交流。

正文

1、UI改版的目的，從不做無意義的事情

工作中的項(xiàng)目參與對UI設(shè)計(jì)師的專業(yè)提升是非常重要的，由于很多公司都處于高速發(fā)展的階段，項(xiàng)目的周期很緊張，都希望每個(gè)支援板塊能夠具備更高的效率，推進(jìn)項(xiàng)目更快的完成迭代上線。在設(shè)計(jì)板塊，很多成熟的平臺(tái)也是愿意花費(fèi)更高的福利待遇引進(jìn)資深及以上級別的設(shè)計(jì)師支持項(xiàng)目的運(yùn)轉(zhuǎn)，那么設(shè)計(jì)師的進(jìn)階之路便是你在職場中穩(wěn)中求進(jìn)的關(guān)鍵。

在真實(shí)的場景中，有一部分設(shè)計(jì)師也存在著以下情況：

• a. 項(xiàng)目參與度低，沒有更多的機(jī)會(huì)發(fā)揮自己的專業(yè)；

• b. 公司產(chǎn)品迭代緩慢或者視覺支持較小，空余時(shí)間較多；

• c. 沒有機(jī)會(huì)在項(xiàng)目中嘗試一些新的設(shè)計(jì)語言；

• d. 自學(xué) UI 中，沒有真實(shí)項(xiàng)目能夠發(fā)揮；

• e. 增強(qiáng)設(shè)計(jì)效率和產(chǎn)品設(shè)計(jì)思維等能力。

如果你擁有以上的情況之一，利用自己的業(yè)余時(shí)間進(jìn)行 APP 設(shè)計(jì)改版將會(huì)給你帶來更多的提升空間，不但可以通過練習(xí)增強(qiáng)自己的設(shè)計(jì)效率，也能體驗(yàn)更加豐富的產(chǎn)品設(shè)計(jì)。在改版中也能不斷加強(qiáng)一些交互或者產(chǎn)品的思維，可以讓你在以后的工作項(xiàng)目中不局限在視覺層面，具備更多的產(chǎn)品思考，做出更合理的設(shè)計(jì)。

2、制定時(shí)間規(guī)劃，是為了治療懶病

如果你想要改變現(xiàn)狀，也拿出前所未有的熱度值，那就趁熱打鐵吧，制定一份時(shí)間表是必須的，千萬別忽略它的重要性，如果你不按照這個(gè)時(shí)間計(jì)劃去推進(jìn)，可能這個(gè)熱度值將會(huì)被懶寶寶不斷地熄滅^_^。

制定時(shí)間規(guī)劃不僅可以合理的利用好自己的業(yè)余時(shí)間，也能更好的按照這個(gè)規(guī)劃表去逐步的推進(jìn)這次改版項(xiàng)目，把一個(gè)大的事項(xiàng)拆分為若干的小事項(xiàng)，每天推進(jìn)一部分，一次改版設(shè)計(jì)很快就在不斷的推進(jìn)中被完成。

APP 改版時(shí)間規(guī)劃表大家可根據(jù)自己的習(xí)慣設(shè)置，表格形式還是簡單的文字記錄都可以，進(jìn)度把控需要結(jié)合自身情況而定，確保其有效性。

3、如何挑選改版產(chǎn)品，再也不是選“美”了

面對應(yīng)用商城里面海量的 APP 產(chǎn)品，你是否有點(diǎn)不知所措，如果選擇一個(gè)自己從來不玩的 APP，改版的時(shí)候?qū)Ξa(chǎn)品的服務(wù)模式、功能架構(gòu)、交互邏輯等都是比較陌生的，需要一定的時(shí)間進(jìn)行學(xué)習(xí)。如果選擇一些大型的產(chǎn)品，由于其自身的設(shè)計(jì)團(tuán)隊(duì)就是非常的專業(yè)，你很難從中發(fā)現(xiàn)可以優(yōu)化的點(diǎn)，即使勉強(qiáng)進(jìn)行改版，也會(huì)發(fā)現(xiàn)自己設(shè)計(jì)得不如原版的好，進(jìn)而打擊自己的自信心。

通過上面的分析，我們在挑選改版產(chǎn)品的時(shí)候，需要結(jié)合自身的一些情況先做出一定的預(yù)判，然后再去挑選現(xiàn)階段相對比較符合的產(chǎn)品進(jìn)行改版練習(xí)。

a. 挑選自己接觸過的直接產(chǎn)品或者間接產(chǎn)品；

b. 對 APP 里面所提供的產(chǎn)品或者服務(wù)比較認(rèn)可或者沒有一定的排斥感；

c. 挑選無論是視覺層面還是交互層面都有一定優(yōu)化空間的產(chǎn)品，別輕易嘗試精品；

d. 如果身邊有朋友使用過的產(chǎn)品優(yōu)先考慮，因?yàn)榭梢猿蔀槟阏{(diào)研數(shù)據(jù)的來源；

e. 選擇陽光積極型的產(chǎn)品，不做傳遞負(fù)能量或者違反規(guī)定的產(chǎn)品；

f. 初次嘗試 APP 改版設(shè)計(jì)，從輕量級的產(chǎn)品入手，可以控制練習(xí)時(shí)間和自己的駕馭度。

4、體驗(yàn)，這是你的第一次深度探尋

當(dāng)你確定自己改版的 APP 對象以后，我們就開始做一次體驗(yàn)吧，這是你的第一次深度探尋。體驗(yàn)情況根據(jù)設(shè)計(jì)師對該產(chǎn)品的熟悉程度而定，你需要通過不斷的進(jìn)行操作把自己從小白用戶升級到專家級用戶。

這個(gè)過程需要你對產(chǎn)品有一個(gè)很深入的了解，不只是熟悉主流程操作邏輯，對一些偏冷門的功能操作也要非常的熟悉，如果是需要注冊使用的產(chǎn)品，一定不要忽略注冊會(huì)員以后的體驗(yàn)。最終達(dá)到的級別是你可以向身邊任何一位朋友輕松的進(jìn)行推薦和演說，能夠通過你的講解讓他輕松地學(xué)會(huì)使用該產(chǎn)品。

5、功能梳理，理清流程好開工

當(dāng)你對改版 APP 進(jìn)行第一次深度體驗(yàn)之后，利用思維導(dǎo)圖軟件繪制出整個(gè)產(chǎn)品的功能結(jié)構(gòu)圖，思維導(dǎo)圖軟件種類很多，大家自行選擇，我常用的是 MindNode。第一次進(jìn)行功能梳理無需進(jìn)行增刪處理，真實(shí)還原產(chǎn)品現(xiàn)有功能即可，其目的是整理自家“倉庫”，做到心中有數(shù)。

在進(jìn)行功能梳理的時(shí)候，如果遇到操作復(fù)雜的功能需要備注信息，以便自己后期預(yù)覽時(shí)能夠快速理解其含義。如果是第一次做功能結(jié)構(gòu)圖越詳細(xì)越好，這將有助于你充分理解每個(gè)功能傳達(dá)的含義。

6、競品分析，做好知己知彼

深度體驗(yàn)完改版 APP 之后，做了功能結(jié)構(gòu)圖，此時(shí)你對所需要改版的 APP 以及這個(gè)行業(yè)的產(chǎn)品都有一定的認(rèn)知，此時(shí)你再去體驗(yàn)直接競品和間接競品必然是以一個(gè)專家級用戶的水平去探尋。在體驗(yàn)過程中需要結(jié)合改版產(chǎn)品的功能進(jìn)行對比，可能第一遍體驗(yàn)無法很好的進(jìn)行對比，所以需要至少體驗(yàn) 3 次以上才能很好的得出對比的結(jié)論。

體驗(yàn)產(chǎn)品時(shí)需要注意的幾個(gè)維度：

• a. 不要急于進(jìn)行總結(jié)，先進(jìn)行至少 3 次以上體驗(yàn)；

• b. 先看整體布局再分析局部細(xì)節(jié)；

• c. 重點(diǎn)功能交互形式需要提取出來進(jìn)行對比；

• d. 主界面的各版塊布局設(shè)計(jì)需要進(jìn)行對比；

• e. 配色分析，作為改版時(shí)的配色優(yōu)化指導(dǎo)；

• f. 圖標(biāo)和組件庫的分析，找出細(xì)節(jié)的優(yōu)化方向。

進(jìn)行競品體驗(yàn)時(shí)，盡可能多的找出差異化的設(shè)計(jì)形式，作為改版 APP 優(yōu)化的指導(dǎo)方向。由于作為 UI 設(shè)計(jì)師進(jìn)行 APP 改版練習(xí)更多是視覺優(yōu)化為主，交互優(yōu)化為輔，所以我們需要在相同模塊上面找出更多不同的設(shè)計(jì)樣式，作為視覺優(yōu)化的方向。

如果你自身交互能力較好，也可以以交互優(yōu)化為主，視覺優(yōu)化為輔，這個(gè)可以結(jié)合自身情況選擇。在進(jìn)行競品體驗(yàn)的時(shí)候也要根據(jù)優(yōu)化目的的不同，著重的轉(zhuǎn)移體驗(yàn)的重心。

7、素材采集，打開禁錮的思維

通過競品體驗(yàn)?zāi)銜?huì)總結(jié)出改版 APP 各個(gè)模塊的差異化，相同的功能模塊各自產(chǎn)品的交互形式、布局樣式、視覺風(fēng)格都存在各自的差異。此時(shí)，你對改版 APP 中的很多設(shè)計(jì)都一個(gè)初步的優(yōu)化清單，你需要再深入一步，因?yàn)楦偲返脑O(shè)計(jì)樣式不一定就是值得借鑒的，我們需要尋找更多的靈感，打開自己禁錮的思維。

通過國內(nèi)外的一些設(shè)計(jì)平臺(tái)、素材網(wǎng)站等我們可以去采集更多的設(shè)計(jì)樣式作為靈感借鑒，日常的一個(gè)采集收藏習(xí)慣也就變得尤為重要了，作為一個(gè)優(yōu)秀的 UI 設(shè)計(jì)師，我們需要養(yǎng)成這樣的習(xí)慣。個(gè)人平時(shí)經(jīng)常訪問的設(shè)計(jì)平臺(tái)有站酷、UI中國、致設(shè)計(jì)、Dribbble、Behance等，采集收藏靈感會(huì)經(jīng)常用Pinterest和花瓣，都是一些大家經(jīng)常訪問的平臺(tái)，所以不是別人知道你所不知的優(yōu)秀平臺(tái)，而是你沒有他的良好習(xí)慣。

8、體驗(yàn)，走了一圈才發(fā)現(xiàn)你可以更好

采集完一些靈感素材之后，我們又回到體驗(yàn)改版 APP 的起點(diǎn)，走了一圈之后你會(huì)發(fā)現(xiàn)改版 APP 中很多你可以入手優(yōu)化的方向，比起第一次體驗(yàn)，你會(huì)更加有信心能夠做出一個(gè)不一樣的設(shè)計(jì)作品。再次進(jìn)行產(chǎn)品體驗(yàn)的時(shí)候，你需要帶著腦海中處理相同功能板塊的不同設(shè)計(jì)表現(xiàn)形式進(jìn)行思考，尋找出更好的設(shè)計(jì)表現(xiàn)形式來解決這個(gè)功能模塊。

在構(gòu)思優(yōu)化樣式的時(shí)候，可以繪制一些簡單的草圖，以防后期進(jìn)行交互輸出的時(shí)候遺漏靈感細(xì)節(jié)。在進(jìn)行設(shè)計(jì)優(yōu)化的時(shí)候先從靈感庫中尋找較為符合的樣式進(jìn)行思維嵌套，然后再發(fā)散思維，融入自己原創(chuàng)性的思維，形成自己的原創(chuàng)思路。

9、交互設(shè)計(jì)，實(shí)現(xiàn)你心中的更好

通過前期的準(zhǔn)備工作，我們即將進(jìn)入重要的設(shè)計(jì)部分，大家不要忽略前期的準(zhǔn)備階段，只有思路成熟且清晰，后面的設(shè)計(jì)工作才能更加順暢。

作為 UI 設(shè)計(jì)師最終輸出的必然是高保真的視覺稿，那么交互原型設(shè)計(jì)是為了快速的把自己的思路展現(xiàn)出來，所以不局限于原型軟件的繪制，哪怕是紙上的草圖繪制也是可行的方案。最終的交互稿是給自己看的，所以能看懂就能達(dá)到最終的目的。

如果你考慮后期進(jìn)行作品包裝展示時(shí)，希望能展示出交互思維，那你花點(diǎn)時(shí)間適當(dāng)?shù)膶Φ捅Ｕ娼换ピ瓦M(jìn)行繪制也是不錯(cuò)的選擇，也能鍛煉自己原型制作軟件的操作能力^_^。

10、設(shè)計(jì)風(fēng)格推導(dǎo)，符合產(chǎn)品的設(shè)計(jì)趨勢運(yùn)用

在開始進(jìn)入界面視覺設(shè)計(jì)時(shí)，我們需要對整體 APP 設(shè)計(jì)做風(fēng)格推導(dǎo)，這將直接關(guān)系著最終界面呈現(xiàn)的效果。如果你是一位對行業(yè)趨勢關(guān)注的設(shè)計(jì)師，各種設(shè)計(jì)趨勢呈現(xiàn)在你腦海中，你需要進(jìn)行篩選，結(jié)合改版產(chǎn)品的屬性選擇合適的設(shè)計(jì)語言去表達(dá)，切不可為了趨勢而犧牲產(chǎn)品定位。

在進(jìn)行風(fēng)格確定的時(shí)候，顏色的選擇也占據(jù)一定的因素，我們可以選擇改版 APP 現(xiàn)有的主色進(jìn)行優(yōu)化，也可以進(jìn)行推翻重選。如果是重新選擇配色方案，我們可以通過情緒版的方式在身邊朋友或者各種群里進(jìn)行。也可以與競品形成視覺差異化，選擇一些形成對比的配色方案，方式很多，大家根據(jù)自己的條件和思路自行展開。

確定好配色方案之后，我們需要考慮設(shè)計(jì)的表現(xiàn)形式，無論是何種設(shè)計(jì)形式都需要符合產(chǎn)品的屬性。比如大標(biāo)題、大圓角卡片、大投影等設(shè)計(jì)表現(xiàn)形式會(huì)在視覺層面帶來不錯(cuò)的效果，卻需要考慮信息量的因素，如果本身改版 APP 就屬于信息量很大的產(chǎn)品，在選擇時(shí)就要綜合考慮。根據(jù) APP 的風(fēng)格定位，比如文藝類、娛樂類、兒童類等，那么設(shè)計(jì)的風(fēng)格也會(huì)對產(chǎn)品風(fēng)格定位起到一定的影響。

11、界面設(shè)計(jì)，碎片化積累

當(dāng)你打開設(shè)計(jì)軟件進(jìn)行界面設(shè)計(jì)的時(shí)候，剩下的就是“滿血復(fù)活”的激情，為了能夠充分利用好業(yè)余時(shí)間，我們需要把數(shù)十個(gè)界面分配到具體的日程中，的利用碎片化的時(shí)間進(jìn)行積累。規(guī)定自己一天完成兩個(gè)界面，就要嚴(yán)格執(zhí)行，只有這樣你才能具備超強(qiáng)的戰(zhàn)斗力。

提到界面設(shè)計(jì)很多設(shè)計(jì)師會(huì)糾結(jié)在軟件的選擇上面，總會(huì)問老司機(jī)們你們用什么軟件，其實(shí)軟件的選擇并不是問題，它只是一個(gè)工具，用的順手即可，現(xiàn)在很多軟件都能帶來最終的目的。隨著很多輕量級的軟件不斷豐富多樣，軟件的操作也更加簡單便捷，只要你充分的利用互聯(lián)網(wǎng)資源，軟件的學(xué)習(xí)只是熟練度的問題，設(shè)計(jì)的思路與技巧才是需要更多的學(xué)習(xí)、研究和總結(jié)。

12、審核，尋找導(dǎo)師

歷盡艱辛你收獲了希望，一套 APP 改版設(shè)計(jì)作品初步完成，接下來你需要尋找到一位導(dǎo)師，俗話說當(dāng)局者迷，你自己構(gòu)思出來的東西需要得到驗(yàn)證，尋找一位資深的設(shè)計(jì)老司機(jī)給你指點(diǎn)作品，將會(huì)給你的成長帶來很大的幫助。他們會(huì)站在更高的專業(yè)角度給你指出一些優(yōu)化建議，也能使你的作品更加成熟。

導(dǎo)師在哪里？

• a. 可以是身邊的同事，別以為導(dǎo)師一定是大神，旁觀者的意見都是具有一定的思考價(jià)值；

• b. 通過一些設(shè)計(jì)交流群尋求意見，建群的意義其實(shí)就是交流設(shè)計(jì)（可是現(xiàn)在演變?yōu)闀痴勅松?(ㄒoㄒ)/~~）；

• c. 通過設(shè)計(jì)平臺(tái)尋找那些活躍的老司機(jī)，只要是真誠的設(shè)計(jì)交流，他們都會(huì)樂于分享；

• d. 機(jī)緣巧合下加上的大神微信或者QQ，平時(shí)要注意不要群發(fā)小廣告去騷擾他們，他們關(guān)鍵時(shí)候會(huì)樂于給你專業(yè)性的指點(diǎn)；

• e. 相信你能找到更多的方法，尋求幫助。

13、調(diào)整優(yōu)化，不放過任何一個(gè)細(xì)節(jié)

通過不同形式的意見反饋，我們即將面臨一次調(diào)整優(yōu)化，在眾多的反饋意見中，我們也不能盲目的進(jìn)行修改。我們要做有思考能力的設(shè)計(jì)師，去分析這些修改意見，遇到意見相左的修改建議要結(jié)合自己前期的調(diào)研進(jìn)行把控，因?yàn)樘嵋庖姷娜瞬灰欢芟衲阋粯邮煜ぎa(chǎn)品，可能存在一定的主觀性。

選擇性的進(jìn)行修改，也要保持自己的自信度，適度的自信可以增強(qiáng)你對作品的信任度，我們不能總是質(zhì)疑自己的能力，只要保持不斷努力學(xué)習(xí)的心態(tài)，有時(shí)候也要相信自己的專業(yè)能力，相信自己就能給作品帶來自信度，你的需求方才能被你的專業(yè)意見所引導(dǎo)。

14、包裝，整理設(shè)計(jì)思路

作品包裝總是會(huì)被很多設(shè)計(jì)師所忽略，在進(jìn)行作品展示的時(shí)候也比較隨意，沒有充分利用作品包裝的優(yōu)勢傳達(dá)出作品自身的價(jià)值。我們將作品展示出來進(jìn)行交流時(shí)，需要通過適當(dāng)?shù)陌b把作品更好的一面清晰的傳遞給讀者。

在進(jìn)行作品包裝的時(shí)候，可以加入自己的設(shè)計(jì)思路輔助傳達(dá)出作品背后的故事，讓讀者更容易走進(jìn)你的作品。通過包裝把原本單調(diào)的獨(dú)立界面進(jìn)行解剖，利用整體布局、局部提煉、細(xì)節(jié)展示、文案描述、思路整理等形式，讓作品呈現(xiàn)效果更加豐富多樣。

作品包裝中一些簡單的設(shè)計(jì)技巧：

• a. 作品包裝設(shè)計(jì)中的版面布局需要舍得，適當(dāng)加大留白會(huì)給版面更強(qiáng)的呼吸感；

• b. 局部提煉，對界面設(shè)計(jì)中的一些視覺表現(xiàn)力強(qiáng)的樣式提取出來獨(dú)立展示，豐富作品的細(xì)節(jié)展示；

• c. 精心挑選樣機(jī)，讓作品展示效果更佳，有時(shí)候也可以自己繪制更加簡練的樣機(jī)模型；

• d. 設(shè)計(jì)組建選擇性展示，增刪挑選的組建讓布局更加整體，視覺效果更加協(xié)調(diào)，整體組合形成塊面感；

• e. 利用對比突出重點(diǎn)，不要使整體布局都處于平面化；

• f. 裝飾元素的運(yùn)用，可以利用輔助圖形、短線等進(jìn)行設(shè)計(jì)裝飾；

• g. 加強(qiáng)頭圖設(shè)計(jì)的視覺表現(xiàn)，提高讀者的注意力。

作品包裝設(shè)計(jì)分為平臺(tái)型作品包裝和作品集包裝，也是需要我們設(shè)計(jì)師加以重視的一個(gè)板塊，以后我們單獨(dú)進(jìn)行這方面的研究分享。

15、分享，設(shè)計(jì)交流

此時(shí)，你已經(jīng)完成了這次 APP 改版之旅，恭喜你擊敗了懶寶寶，相信下一次你會(huì)具備更強(qiáng)的自我驅(qū)動(dòng)力。完成一次作品你可以選擇封印在冰冷的硬盤，也可以選擇分享給更多的設(shè)計(jì)朋友，大家互相學(xué)習(xí)和討論，個(gè)人比較傾向于后者。