手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

首頁(yè)

UI大課堂11月超美UI合集

藍(lán)藍(lán)設(shè)計(jì)的小編

Android和iOS在過去幾年里,APP界面的UI設(shè)計(jì)變化很大,從擬物到扁平,蘋果目前為iOS8,而谷歌最近推出了全新的Material Design風(fēng)格。隨著界面風(fēng)格的迅速演變,很多移動(dòng)應(yīng)用也跟著更新,并使用新界面的一些新特性。

如何提升界面品質(zhì)感?

資深UI設(shè)計(jì)者

一、當(dāng)前背景

今天聊些設(shè)計(jì)基礎(chǔ)部分。

設(shè)計(jì)工作中,我們總會(huì)接到不同場(chǎng)景、不同目標(biāo)用戶的業(yè)務(wù)需求,需要不同風(fēng)格的設(shè)計(jì)方案支持,但無論是什么風(fēng)格的設(shè)計(jì),用戶都會(huì)有一個(gè)共同訴求——「品質(zhì)感」。

二、什么是品質(zhì)感?

所謂品質(zhì)感其實(shí)就是產(chǎn)品給人的一種嚴(yán)謹(jǐn)、專心對(duì)待的態(tài)度。同樣一本書的封面,粗糙紙的封面和細(xì)心打磨的小羊皮封面就是不同的概念。

例如無印良品和愛馬仕,兩者都會(huì)傳達(dá)給用戶一種「品質(zhì)感」,雖設(shè)計(jì)方向不同,但他們有一個(gè)共同的特性——對(duì)細(xì)節(jié)的深度打磨。其實(shí)品質(zhì)感就是來源于產(chǎn)品對(duì)細(xì)節(jié)的深度考究與打磨。

一款有品質(zhì)感的設(shè)計(jì),隨之帶來的是用戶使用中的舒適度、好感度、信賴感。

三、界面中的品質(zhì)感

界面設(shè)計(jì)也是一樣,也會(huì)帶給用戶一種品質(zhì)感,其同樣是源于設(shè)計(jì)師對(duì)界面的每處細(xì)節(jié)的深度考究。

界面的品質(zhì)感主要來源于界面四個(gè)維度、界面中的結(jié)構(gòu)、界面中的圖形、界面中的顏色和界面中的動(dòng)態(tài),今天說如何通過結(jié)構(gòu)提升界面品質(zhì)感。

四、界面中的結(jié)構(gòu)

界面的結(jié)構(gòu)在用戶體驗(yàn)中起著重要作用,其相當(dāng)于界面設(shè)計(jì)中的「骨」,界面結(jié)構(gòu)中的細(xì)節(jié)更是會(huì)直接影響到整體設(shè)計(jì)的品質(zhì)感。那么具體結(jié)構(gòu)中的細(xì)節(jié)體現(xiàn)在哪里?

1. 關(guān)系

信息關(guān)系包含界面中的組合、層級(jí)、分割等。

組合

「物以類聚」,界面內(nèi)需明確傳達(dá)各元素間的關(guān)系。

輔助信息服務(wù)于主體信息:輔助信息為主體內(nèi)容的延續(xù)說明或補(bǔ)充操作,作用為服務(wù)于主體內(nèi)容。同一組合內(nèi),信息間需有明確的關(guān)系與合理的順序,且輔助信息不能搶鏡。例如朋友圈,清晰傳達(dá)關(guān)系的同時(shí),以內(nèi)容為主的閱讀方式不會(huì)被頭像內(nèi)容干擾。

關(guān)系越緊密的內(nèi)容距離應(yīng)越近:形式不變的基礎(chǔ)上,元素之間的距離越近,越易被視為同一組合。距離相同時(shí),橫向排列的內(nèi)容接近度相對(duì)更高。

層級(jí)

界面的層級(jí)關(guān)系主要體現(xiàn)在主次、優(yōu)先級(jí)、層數(shù)。

主次分明、避免層級(jí)混亂:清晰的層級(jí)結(jié)構(gòu),能讓用戶更快的獲取重要內(nèi)容,同一組合下其信息一定有主要展示和次要展示??梢酝ㄟ^位置、面積、顏色三個(gè)維度建立主次層級(jí)的對(duì)比度。

  • 位置。在中國(guó),用戶的閱讀習(xí)慣為從左上至右下,所以用戶對(duì)左上區(qū)域的觀察最優(yōu),依次為右上,左下,而右下最差。因此,左上部和上中部被稱為「最佳視域」。
  • 面積。信息內(nèi)容在界面內(nèi)的占比面積越大,信息越是突出。
  • 顏色。白色背景下,明度越低/飽和度越高,信息越是突出。

同一組合下,有且僅能有一個(gè)最重要的內(nèi)容:當(dāng)所有的內(nèi)容都重要,也就等于所有內(nèi)容都不重要,信息的優(yōu)先級(jí)不取決于主要信息是否夠大,而是主要信息和次要信息的對(duì)比度。

同一頁(yè)面,信息層級(jí)不宜過多:過多的信息層級(jí)會(huì)讓頁(yè)面變得復(fù)雜,增加用戶的理解成本。冗余的信息展示會(huì)讓界面變的凌亂瑣碎,一定程度上干擾用戶使用體驗(yàn)。一般情況下界面應(yīng)控制在3層信息以內(nèi)。

主次分明、優(yōu)先級(jí)明確、層級(jí)適當(dāng)會(huì)讓界面的信息傳達(dá)更清晰明確,進(jìn)而增加用戶的使用中的舒適度。

分割

分割是用于區(qū)分不同信息的方法,大概可以分為距離分割、線性分割、面性分割(背景色分割)、顏色分割。

距離分割:增大兩模塊的距離達(dá)到內(nèi)容分割內(nèi)容作用,元素間的距離越遠(yuǎn),越不易被視為同一組合。其好處是可以省去分割元素,減少視覺層級(jí),讓界面更干凈、明快。

線性分割:線性分割是目前界面中最常用的分割方式,其優(yōu)勢(shì)是線自身「較輕」,不易干擾用戶。值得注意的是線本身不重要,不宜過度強(qiáng)調(diào),應(yīng)點(diǎn)到為止,所以線的顏色不宜過重。

面性分割/背景色分割:當(dāng)處理多層級(jí)、信息復(fù)雜的場(chǎng)景,在單個(gè)模塊里已經(jīng)用了線性分割的情況下??赡苄枰鼜?qiáng)一點(diǎn)的分割方式來表明模塊與模塊間的關(guān)系,這時(shí)我們可能需要面性分割方式。這種方式像是灰色的背景上,羅列著多張卡片,能更明確的表達(dá)兩組內(nèi)容的分割感,但其缺點(diǎn)是會(huì)較明顯的增多界面層級(jí)。

顏色分割:當(dāng)信息的表現(xiàn)形式重復(fù)性較高,容易被看混的情況下,顏色分割是更為合適的選擇。

能起到分割作用的前提下,分割方式越輕,越不會(huì)干擾閱讀、界面越干凈。

以上可以總結(jié)為

  • 界面中的組合能讓信息關(guān)系更縝密。
  • 層級(jí)能讓用戶更快的獲取重要內(nèi)容。
  • 分割能讓用戶更清晰的區(qū)分不同模塊間關(guān)系。
2. 字體

文字字體是界面結(jié)構(gòu)中重要組成部分,文字也是多數(shù)場(chǎng)景下信息傳達(dá)最為準(zhǔn)確的方法。合理的字體能夠增加用戶的閱讀體驗(yàn),提升用戶在產(chǎn)品使用中的舒適度。合理的字體包含字體的可讀性、對(duì)比度、間距。

可讀性:可讀性是字體在界面中需考慮的基礎(chǔ)因素,也是首要因素。字體的信息傳達(dá)需精準(zhǔn)、明確。字形選擇包括其場(chǎng)景適應(yīng)和字形的適度性。

字形的場(chǎng)景適應(yīng):由于不同的字形會(huì)帶給用戶不同的感覺。由于場(chǎng)景需要,我們一定情況下會(huì)選擇自定義字體。當(dāng)我們選擇不同的字體時(shí),需要考慮字體在產(chǎn)品內(nèi)不同模塊下是否易于閱讀。

字形的適度性:字體本身不宜搶鏡。隨意的、搶眼的字體一定場(chǎng)景下上能夠帶來足夠的氛圍感,但是長(zhǎng)期使用會(huì)出現(xiàn)「視覺疲勞」,其原因是字體本身的設(shè)計(jì)搶走了用戶正常在該場(chǎng)景下閱讀或使用的內(nèi)容和信息。

對(duì)比度

字號(hào):用于區(qū)分不同層級(jí)的信息內(nèi)容,為保證信息的快速傳達(dá),不同層級(jí)的字體需有一定的優(yōu)先級(jí)順序。

界面內(nèi)的主文案/一級(jí)文案應(yīng)精簡(jiǎn)明確。假設(shè)用戶只會(huì)在這個(gè)界面停留3、4秒,能夠吸引用戶繼續(xù)瀏覽界面的就是一級(jí)信息。當(dāng)一級(jí)信息文案字?jǐn)?shù)過多,會(huì)增加用戶剛進(jìn)入頁(yè)面時(shí)的閱讀成本,進(jìn)而降低閱讀體驗(yàn)。

另外,移動(dòng)端小于24px的字號(hào)應(yīng)慎重使用,雖然小的字號(hào)會(huì)讓版式更加的精致,但當(dāng)同一場(chǎng)景下,小于24px的文案字?jǐn)?shù)偏多時(shí),會(huì)影響用戶的正常閱讀。但可用于弱化的文字鏈、標(biāo)簽等字?jǐn)?shù)少的場(chǎng)景。

加粗:字號(hào)相同,字體加粗也是區(qū)分不同層級(jí)信息的一種方法,當(dāng)兩信息區(qū)分度不大、界面層級(jí)過多需要減少層級(jí)的場(chǎng)景下,可以選擇加粗部分內(nèi)容建立輕度對(duì)比。

字色:我們畫畫的時(shí)候,時(shí)常會(huì)聽到老師說「要注意畫面的黑白灰」。在界面設(shè)計(jì)中,也是一樣,我們需注意各層級(jí)字體間的黑白灰關(guān)系。明確的畫面黑白灰關(guān)系會(huì)讓界面變得更干凈清晰。另外,當(dāng)不同明度切換時(shí)應(yīng)保持色相/飽和度不變。

間距:在界面設(shè)計(jì)中,字間距和行間距會(huì)直接影響用戶閱讀效率。過于緊密的間距會(huì)讓字體間失去「透氣性」,根據(jù)我們正常的閱讀順序來講,字間距要小于行間距以便于每一行更易被視為一組,進(jìn)而給用戶帶來更好的閱讀體驗(yàn)。我們可根據(jù)文案長(zhǎng)短,字號(hào)大小制定更適合閱讀的間距。

字體的可讀性是字體的基礎(chǔ),明確的字體對(duì)比度能夠讓信息層級(jí)更加清晰干凈,而合理的字間距能夠無形的提升用戶的閱讀體驗(yàn)。

3. 信息對(duì)齊

對(duì)齊是界面結(jié)構(gòu)中的一部分,合理的對(duì)齊方式能夠使界面內(nèi)的信息變得更規(guī)整,內(nèi)容傳達(dá)更明確。讓元素間的關(guān)系更具節(jié)奏感。

聯(lián)系性

同一組合內(nèi)的不同元素間需有明確的對(duì)齊關(guān)系,其關(guān)系能夠清晰表達(dá)不同元素間的親密性。

元素間的居左對(duì)齊:當(dāng)文案的字?jǐn)?shù)偏多一些的場(chǎng)景下,居左對(duì)齊更符合用戶的閱讀習(xí)慣。

元素間的居中對(duì)齊:當(dāng)內(nèi)容信息較少、或由于對(duì)齊元素形狀等因素,居中對(duì)齊可能會(huì)帶來意外的收獲與效果。

元素間的居右對(duì)齊:界面內(nèi)一般不會(huì)用居右對(duì)齊的方式來建立兩元素間的關(guān)系,但是界面內(nèi)會(huì)存在和屏幕建立右對(duì)齊關(guān)系的元素,與屏幕右對(duì)齊的元素一般為主體的解釋說明以及輔助操作等。一般情境下,當(dāng)用戶閱讀完主要內(nèi)容信息后才會(huì)對(duì)操作類的功能有需求,如查看購(gòu)買、關(guān)注、查看更多、進(jìn)入下一頁(yè)面等。

統(tǒng)一性

另外,不同組件間也需要合理的建立對(duì)齊關(guān)系,同時(shí)為保持界面的簡(jiǎn)潔性,同一界面內(nèi)建立的對(duì)齊模式不要過多。

總結(jié)

界面的結(jié)構(gòu)是提升界面品質(zhì)感的關(guān)鍵,而合理的信息關(guān)系、字體、對(duì)齊方式能夠讓界面的結(jié)構(gòu)更加完整,精致。也希望每個(gè)設(shè)計(jì)師的作品都更加的美而精致。

小米8的MIUI10對(duì)比MIUI9體驗(yàn),外觀UI變化大,是IOS的孿生兄弟?

藍(lán)藍(lán)設(shè)計(jì)的小編

小米發(fā)布會(huì)上,除了小米8手機(jī)備受機(jī)友們關(guān)注外,這次小米帶來的MIUI 10同樣也被期待著,MIUI是小米手機(jī)的靈魂,也是影響手機(jī)體驗(yàn)的重要因素之一。


特斯拉將會(huì)為 AutoPilot 9.0 設(shè)計(jì)一個(gè)全新的 UI 界面

藍(lán)藍(lán)設(shè)計(jì)的小編

即將來到的 AutoPilot 9.0 更新,「開啟部分全自動(dòng)駕駛」的功能可謂是吊足了許多人胃口。雖然馬斯克已經(jīng)在 Twitter 上透露了一些消息,但還是有許多坐不住的粉絲 @elonmusk,想要知道更多的新消息。

UI進(jìn)度條讓你享受等待

藍(lán)藍(lán)設(shè)計(jì)的小編

下面的一些概念可能不是最可行的,但它們可以幫助你考慮將情緒帶入界面,特別是當(dāng)用戶面對(duì)他們生活中最無聊的方面之一時(shí):尤其是等待。

多倫多訂餐APP-懶洋洋

資深UI設(shè)計(jì)者

懶洋洋是一款為多倫多華人提供服務(wù)的訂餐平臺(tái)用戶群一般為學(xué)生、白領(lǐng)等對(duì)于視覺上追求簡(jiǎn)約、舒適產(chǎn)品流程簡(jiǎn)易而順暢(英文是用翻譯軟件翻的,如有錯(cuò)誤,那就算了吧)

請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖

UI設(shè)計(jì)師的日?!猆I設(shè)計(jì)師平常都干些什么

藍(lán)藍(lán)設(shè)計(jì)的小編

其實(shí)開始想寫這個(gè)文章就像找共鳴這,吐槽一些關(guān)于老板什么也不懂,非得讓UI設(shè)計(jì)師改來改去的事情,想了想還是算了,真的給那些剛步入U(xiǎn)I設(shè)計(jì)或者是準(zhǔn)備步入U(xiǎn)I設(shè)計(jì)的小伙伴們一些好的方向或者說打打預(yù)防針才比較正經(jīng)。

幫助您做出漂亮版式設(shè)計(jì)的八個(gè)實(shí)用技巧

藍(lán)藍(lán)設(shè)計(jì)的小編

版式設(shè)計(jì)對(duì)于新手來說往往會(huì)給人無從下手的感覺,作為平面設(shè)計(jì)師,該如何做好排版,設(shè)計(jì)好版式。這里總結(jié)出八種漂亮版式設(shè)計(jì)的八個(gè)實(shí)用技巧。

插畫在UI設(shè)計(jì)中的運(yùn)用

藍(lán)藍(lán)設(shè)計(jì)的小編

插畫在UI設(shè)計(jì)中的運(yùn)用到處可見,比如:App引導(dǎo)頁(yè)、Banner廣告、H5宣傳頁(yè)、App啟動(dòng)頁(yè)、loading頁(yè)、404頁(yè)、支付狀態(tài)頁(yè)、各大電商平臺(tái)的雙十一、雙十二節(jié)日廣告等等。UI插畫在設(shè)計(jì)中增加情感,使表達(dá)更加清晰、貼切、符合場(chǎng)景,讓設(shè)計(jì)更具說服力。

本文用三步教你打造扁平插畫,除了非常實(shí)用的教程,文中談到的一些思考更是能給大家?guī)碓S多幫助。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

博博


UI大課堂 2018-02-01 00:00:39

提到這個(gè)話題有兩層不同的討論方向,在工作中對(duì)公司項(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)自己找不到更多的作品用來豐富簡(jiǎn)歷,很快便進(jìn)入了瓶頸期。

面對(duì)未來的自己可能會(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、競(jìng)品分析,做好知己知彼;

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

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

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

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

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

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

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

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

  • 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ì)。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

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è)置,表格形式還是簡(jiǎn)單的文字記錄都可以,進(jìn)度把控需要結(jié)合自身情況而定,確保其有效性。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

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

面對(duì)應(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)而打擊自己的自信心。

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

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

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

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

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

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

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

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

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

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

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

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

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

當(dāng)你對(duì)改版 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)有功能即可,其目的是整理自家“倉(cāng)庫(kù)”,做到心中有數(shù)。

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

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

6、競(jìng)品分析,做好知己知彼

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

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

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

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

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

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

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

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

進(jìn)行競(jìng)品體驗(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)行競(jìng)品體驗(yàn)的時(shí)候也要根據(jù)優(yōu)化目的的不同,著重的轉(zhuǎn)移體驗(yàn)的重心。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

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

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

通過國(guó)內(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中國(guó)、致設(shè)計(jì)、Dribbble、Behance等,采集收藏靈感會(huì)經(jīng)常用Pinterest和花瓣,都是一些大家經(jīng)常訪問的平臺(tái),所以不是別人知道你所不知的優(yōu)秀平臺(tái),而是你沒有他的良好習(xí)慣。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

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

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

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ù)膶?duì)低保真交互原型進(jìn)行繪制也是不錯(cuò)的選擇,也能鍛煉自己原型制作軟件的操作能力^_^。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

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

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

在進(jìn)行風(fēng)格確定的時(shí)候,顏色的選擇也占據(jù)一定的因素,我們可以選擇改版 APP 現(xiàn)有的主色進(jìn)行優(yōu)化,也可以進(jìn)行推翻重選。如果是重新選擇配色方案,我們可以通過情緒版的方式在身邊朋友或者各種群里進(jìn)行。也可以與競(jìng)品形成視覺差異化,選擇一些形成對(duì)比的配色方案,方式很多,大家根據(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ì)對(duì)產(chǎn)品風(fēng)格定位起到一定的影響。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

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)在很多軟件都能帶來最終的目的。隨著很多輕量級(jí)的軟件不斷豐富多樣,軟件的操作也更加簡(jiǎn)單便捷,只要你充分的利用互聯(lián)網(wǎng)資源,軟件的學(xué)習(xí)只是熟練度的問題,設(shè)計(jì)的思路與技巧才是需要更多的學(xué)習(xí)、研究和總結(jié)。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

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

歷盡艱辛你收獲了希望,一套 APP 改版設(shè)計(jì)作品初步完成,接下來你需要尋找到一位導(dǎo)師,俗話說當(dāng)局者迷,你自己構(gòu)思出來的東西需要得到驗(yàn)證,尋找一位資深的設(shè)計(jì)老司機(jī)給你指點(diǎn)作品,將會(huì)給你的成長(zhǎng)帶來很大的幫助。他們會(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ī),只要是真誠(chéng)的設(shè)計(jì)交流,他們都會(huì)樂于分享;

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

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

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

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)你對(duì)作品的信任度,我們不能總是質(zhì)疑自己的能力,只要保持不斷努力學(xué)習(xí)的心態(tài),有時(shí)候也要相信自己的專業(yè)能力,相信自己就能給作品帶來自信度,你的需求方才能被你的專業(yè)意見所引導(dǎo)。

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

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

作品包裝總是會(huì)被很多設(shè)計(jì)師所忽略,在進(jìn)行作品展示的時(shí)候也比較隨意,沒有充分利用作品包裝的優(yōu)勢(shì)傳達(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)效果更加豐富多樣。

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

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

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

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

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

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

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

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

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

UI設(shè)計(jì)改稿經(jīng)驗(yàn)總結(jié)

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

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

日歷

鏈接

個(gè)人資料

存檔