正文

app設(shè)計說明（寵物app設(shè)計說明）

發(fā)布時間：2023-04-27 20:29:10 稿源：創(chuàng)意嶺閱讀： 1331

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于app設(shè)計說明的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國，設(shè)計相關(guān)業(yè)務(wù)請撥打175-8598-2043，或微信：1454722008

本文目錄:

1、界面設(shè)計哪里好，一個App的界面設(shè)計流程是怎么產(chǎn)生的
2、app設(shè)計中色彩的類型有哪些
3、app開發(fā)具體流程
4、APP開發(fā)有哪些內(nèi)容？

app設(shè)計說明（寵物app設(shè)計說明）

一、界面設(shè)計哪里好，一個App的界面設(shè)計流程是怎么產(chǎn)生的

當(dāng)我們打開一個APP時，從視覺層面分析，影響用戶對APP整體感官體驗的元素主要有：圖片、文字、色彩、圖標(biāo)、留白等。

圖片的合理運用、清晰的信息層級、舒適的色彩搭配都將會提高整個APP的美感，從而為整個的產(chǎn)品體驗加分。

一個成功的產(chǎn)品，視覺層面只是其中的一部分，但是作為一個合格的UI設(shè)計師，我們要做的就是把這其中的一部分做到極致。

下面我們通過圖片、文字、色彩、圖標(biāo)、留白這幾個維度來解剖APP設(shè)計，發(fā)現(xiàn)那些微妙的細(xì)節(jié)。只需要比別人多提高1px的細(xì)節(jié)，你的APP設(shè)計就會更精致。

1、圖片，如同一個人的衣著品味；

2、文字，我只想知道重點在那里；

3、色彩，如何成為“色”計師；

4、圖標(biāo)，從會畫到畫好之間有多遠(yuǎn)；

5、留白，我只想要足夠的空間。

正文

1、圖片，如同一個人的衣著品味

圖片在APP中是非常常見的，圖片的展現(xiàn)形式和圖片的質(zhì)量都影響著用戶對產(chǎn)品的感官體驗。

圖片的定位就如同一個人的衣著品味，不同的穿衣風(fēng)格會使別人對你作出不同的判斷，為你打上不同社會屬性的標(biāo)簽。

下面我們一起來看看圖片在APP設(shè)計中需要注意的關(guān)鍵點，將會從圖片比例、一致性、圖片質(zhì)量與真實性等方面進(jìn)行分析。

1.1、圖片比例有什么講究？

不同比例的圖片所傳達(dá)的信息主體不盡相同，根據(jù)產(chǎn)品屬性我們會選擇與之相符的圖片比例進(jìn)行整體的框架布局。

通過體驗一些主流的APP，我們會發(fā)現(xiàn)一些比較常用的圖片比例，如 1:1、4:3、16:9、16:10等等；

也會發(fā)現(xiàn)一些打破常規(guī)比例的設(shè)計，我們需要分析它們的性格，結(jié)合自身產(chǎn)品的特點，才能在自己的APP設(shè)計中合理的加以運用。

1:1 強調(diào)主體的存在感

1:1的圖片比例是比較常見的一種設(shè)計比例，利用此長寬比更容易將構(gòu)圖歸整得簡單，突出主體的存在感。

常用于產(chǎn)品展示、頭像、特寫展示等場景，在電商類APP中尤為常見。

4:3 圖像緊湊、更易構(gòu)圖

4:3的圖片比例可以使圖像更緊湊，更易構(gòu)圖，方便設(shè)計師發(fā)揮。由于手機屏幕容量較小，作為全屏展示時，該比例在App設(shè)計布局上面占用空間較大。

16:9 電影場景般的效果

16:9的圖片比例可以呈現(xiàn)電影場景般的效果，多用于橫向構(gòu)圖，是應(yīng)用非常廣泛的尺寸比例之一，能給用戶一種視野開闊的體驗。

在很多影視娛樂類APP設(shè)計中運用廣泛，如騰訊視頻、網(wǎng)易云音樂等。

16:10 擁抱黃金比例

黃金比例就像金字塔上的明珠，越接近她越有魅力，反之會魅力減弱，16:10的圖片比例最為接近。

設(shè)計沒有絕對的標(biāo)準(zhǔn)，我們可以遵循一些優(yōu)秀的經(jīng)驗規(guī)則，但是也要敢于突破規(guī)則，嘗試更多的可能性。

X:≤Y 瀑布流設(shè)計

X:≤Y代表寬度固定，高度在最大值之間自定義的瀑布流設(shè)計，在一些用于用戶沒有很明確的目的，只是喜歡獲取盡量多的信息的情況下采用這種設(shè)計方式。

X:≤Y的圖片比例要注意高度的控制，不要超出屏幕可顯示區(qū)域的范圍，如花瓣網(wǎng)在750x1334px的設(shè)計中高度最大值為：848 px。

以上列舉的僅為部分常用比例的分析與說明，還有更多的比例這里就不一一演示，分享的目的是讓大家養(yǎng)成分析的習(xí)慣，結(jié)合自身產(chǎn)品特點選擇適合的圖片比例。

圖片比例選擇方式：

a. 以商品展示效果為準(zhǔn)，選擇能夠充分表現(xiàn)商品特點的圖片展示比例；

b. 以產(chǎn)品氣質(zhì)為準(zhǔn)，選擇符合產(chǎn)品內(nèi)容氣質(zhì)的圖片展示比例；

c. 結(jié)合產(chǎn)品特點選擇合適的常用比例；

d. 根據(jù)版面布局靈活的自定義特殊的比例值；

e. 分析→打破→創(chuàng)新，創(chuàng)造出符合某種規(guī)律或者美學(xué)概念的比例值。

1.2、圖片比例的一致性

當(dāng)我們結(jié)合產(chǎn)品特點確定合適的圖片展示比例以后，需要針對整體的布局與圖片分布情況，規(guī)范出那些布局可以采用相同的圖片展示比例。

在保障視覺效果與交互形式的情況下，相同的主體，在不同的頁面中最好采用相同的比例呈現(xiàn)，這樣的好處不僅可以保持視覺表達(dá)的一致性，也能給后期運營維護(hù)帶來便利。

1.3、提高圖片的質(zhì)量

越來越多的產(chǎn)品對圖片質(zhì)量開始加以重視，比如網(wǎng)易嚴(yán)選對產(chǎn)品圖片的拍攝與處理都有嚴(yán)格的規(guī)范，目的就是為了提升產(chǎn)品氣質(zhì)和在用戶心中的印象。

我們在設(shè)計的時候更要以最佳的圖片來烘托我們的設(shè)計稿，圖片的質(zhì)量影響著整個界面的格調(diào)。

很多伙伴兒會覺得圖片都是后期運營上傳的，我設(shè)計稿做得再精美最終也是沒用的。對于這個問題我的觀點是這樣的：

a. 最佳的設(shè)計輸出是設(shè)計師專業(yè)的體現(xiàn)；

b. 把最好的效果呈現(xiàn)給決策者，增加他對你設(shè)計能力的印象；

c. 通過制定運營視覺規(guī)范來把控圖片質(zhì)量，是可以嚴(yán)格把控你對圖片的視覺追求；

d. 你的態(tài)度會給你帶來好運。

1.4、圖片的真實還原

雖然前面提到圖片質(zhì)量的重要性，但是我們不能為了視覺效果選擇一些與主題無關(guān)的配圖，這樣也會給決策者一種誤導(dǎo)。

我們可以提高配圖的質(zhì)量，但是需要保證圖片的真實還原，這樣才能讓你的設(shè)計作品更加真實合理。

在一些本土的產(chǎn)品設(shè)計中，對于國外圖片素材的運用，需要謹(jǐn)慎對待。如案例中的模特形象，文案信息的傳達(dá)更加偏向于國內(nèi)的場景，

如果運用一張國外的模特素材也許逼格更高，可是卻無法真實的還原產(chǎn)品場景，會給決策者傳達(dá)一種錯誤的認(rèn)知。

2、文字，我只想知道重點在那里

文字設(shè)計的層次感決定了信息的高效傳達(dá)，通過對文字信息的層次處理可以有效的幫助用戶獲取信息，提高用戶對產(chǎn)品的操作效率。

2.1、對文字信息進(jìn)行層級區(qū)分

當(dāng)我們拿到交互原型或者別的需求文檔時，我們需要對文字的信息層級進(jìn)行有效的區(qū)分，這樣才能讓用戶快速的獲取和理解信息傳達(dá)的內(nèi)容。

文字信息可以簡單劃分為重要信息、次要信息、輔助信息等。在進(jìn)行文字排版時，需要明確的梳理好信息之間的層級關(guān)系，提高用戶對產(chǎn)品的整體體驗。

通過對字體大小、顏色、留白、層級劃分等處理，把相同屬性的信息歸類設(shè)計，讓整個信息排列主次分明，層級清晰。

設(shè)計師在對文字進(jìn)行視覺表現(xiàn)時，為了達(dá)到整體界面的視覺平衡也需要減少對文字樣式的運用，不可為了突出文字信息而采用過多的表現(xiàn)樣式。

2.2、預(yù)估好信息呈現(xiàn)的最大值

當(dāng)我們在進(jìn)行界面設(shè)計時，初級設(shè)計師往往會忽略文字信息的最大值，只是按照自己的習(xí)慣進(jìn)行完美的布局。

最終進(jìn)入到測試環(huán)節(jié)時才發(fā)現(xiàn)為什么比自己預(yù)期的字?jǐn)?shù)多出這么多信息，此時就會出現(xiàn)返工的情況，給整體的產(chǎn)品開發(fā)進(jìn)度帶來風(fēng)險。

作為一名合格的UI設(shè)計師，我們需要預(yù)估好信息呈現(xiàn)的最大值，而不是取最小值或者隨意進(jìn)行設(shè)計，這樣將會在執(zhí)行的過程中遇到更多不可控的風(fēng)險。

2.3、善于利用提示符進(jìn)行設(shè)計

在一些會出現(xiàn)大篇幅文字信息的界面設(shè)計中，為了提高用戶對信息的獲取效率，我們會根據(jù)整體視覺效果選擇合適的提示符進(jìn)行設(shè)計。

很多初級設(shè)計師會過于遵循交互原型，往往對大篇幅文字的處理過于隨意，只做著交互原型的美化，缺乏對用戶體驗的主動性。

在進(jìn)行產(chǎn)品交互設(shè)計時，有時候產(chǎn)品或者交互無法站在視覺的角度進(jìn)行信息的梳理和布局，我們需要利用自己的專業(yè)來優(yōu)化你覺得可以更好的地方，也能為你在整個產(chǎn)品環(huán)節(jié)中樹立專業(yè)性。

關(guān)于提示符的設(shè)計表現(xiàn)形式主要有數(shù)字、字母、圖形、色塊等等，只要能有效的區(qū)分信息層級即可。

3、色彩，如何成為“色”計師

色彩給人的感受是最直觀的，不同性格的配色傳達(dá)不同的情感。關(guān)于配色有一些方法可尋，但是也存在一定的感性判斷。

作為視覺設(shè)計師，我們需要學(xué)習(xí)理性的方法技巧，也要不斷欣賞優(yōu)秀的作品，提高自身的審美能力。

3.1、色彩基礎(chǔ)知識

色彩分為無彩色系和有彩色系，無彩色系是指白色、黑色、各種深淺不同的灰色；有彩色系是指紅、橙、黃、綠、青、藍(lán)、紫等顏色。

關(guān)于色彩的更多理論知識這里不做展開，大家自行腦補色相、純度、明度、對比、性格等等方面的理論知識。

3.2、建立色彩庫

作為初級設(shè)計師我們對配色的把控不是很穩(wěn)定，為了提高工作效率，我們需要通過一些理性的方式建立大量的色彩庫，應(yīng)對不同的需求。

下面列舉部分個人比較常用的方式供大家參考，色彩收集的方法有很多，我們只需要掌握幾個比較適合自己的即可，只要養(yǎng)成習(xí)慣并長期堅持，哪怕只運用一種方式，也是收獲頗豐的。

a. 通過各類APP采集色彩

體驗不同領(lǐng)域的APP，建立不同領(lǐng)域?qū)PP色彩組合的選擇，為后期項目設(shè)計奠定基礎(chǔ)。根據(jù)主色進(jìn)行分類，

如紅色系列：網(wǎng)易云音樂、京東、網(wǎng)易嚴(yán)選、網(wǎng)易考拉等等；也可以根據(jù)產(chǎn)品氣質(zhì)分類，如文藝、時尚、科技、可愛等等。

b. 通過Dribbble采集色彩

在Dribbble上面，每一幅作品右側(cè)都有該作品的配色文件，發(fā)現(xiàn)優(yōu)秀的作品要養(yǎng)成這種采集配色文件的習(xí)慣。

c. 通過攝影作品采集色彩

通過優(yōu)秀的攝影作品采集色彩也是常用的方法之一。

采集方式：

Photoshop打開圖片 → 存儲為Web所用格式→ 選擇GIF格式 → 顏色選擇 8 → 顏色表中雙擊色塊 → 拾色器

d. 通過馬賽克采集色彩

借助Photoshop濾鏡將圖片進(jìn)行馬賽克處理，可以得到優(yōu)秀作品或者攝影圖片的配色組合，特別適合采集同色系的配色。

采集方式：

Photoshop打開圖片 → 濾鏡 → 像素化→ 馬賽克 → 設(shè)置單元格大小

e. 從電影中采集色彩

相信大家都喜歡看大片，這部片子之所以能得到大家的追捧，必定有太多值得大家學(xué)習(xí)的元素。

作為神經(jīng)敏感的設(shè)計師群體，那些刺激到我們神經(jīng)元的優(yōu)秀影片場景總是不能錯過的。

3.3、提高審美，增強感性判斷力

配色能力雖然可以通過一些理性的方法提高，但是也存在一定的感性判斷。配色中細(xì)微的差異往往都是感性的判斷。

我們需要不斷的欣賞攝影、繪畫、設(shè)計作品等等，綜合的提高自身的審美，才能不斷增強感性的判斷力。

作為UI設(shè)計師，你不能只關(guān)注界面設(shè)計，你可以看平面作品、攝影繪畫、影視動效，體驗手工藝制作、運動娛樂、細(xì)心的體驗生活中的每一次變化。

3.4、養(yǎng)成分析的習(xí)慣

要想擁有良好的配色能力，積累的過程是很重要的。當(dāng)我們看到優(yōu)秀的作品，要分析配色之間的對比關(guān)系、顏色在色環(huán)上的位置關(guān)系、HSB數(shù)值的關(guān)系等等。

只有不斷的分析和總結(jié)才能逐步形式自己的思維方式，提高不同配色的把控能力。

分析的習(xí)慣不只是運用在色彩上面，對于版面布局、文字信息的處理、icon設(shè)計風(fēng)格、間距留白等等方面都需要不斷的進(jìn)行分析總結(jié)，掌握優(yōu)秀作品的規(guī)則才能形成自我的標(biāo)準(zhǔn)習(xí)慣。

4、圖標(biāo)，從會畫到畫好之間有多遠(yuǎn)

圖標(biāo)是APP設(shè)計中的點睛之筆，既能輔助文字信息的傳達(dá)，也能作為信息載體被高效的識別。圖標(biāo)也有一定的界面裝飾作用，提高界面整體的美觀度。

很多初級設(shè)計師都會忽略圖標(biāo)的重要性，也養(yǎng)成去素材網(wǎng)站下載復(fù)用的習(xí)慣，當(dāng)這樣的習(xí)慣養(yǎng)成后便會逐步喪失自己動手的驅(qū)動力，什么元素都希望能找到素材下載，工作數(shù)年之后很快就遇到了自己的瓶頸期。

設(shè)計師對圖標(biāo)設(shè)計的態(tài)度與把控能力，將會是拉開你與其他設(shè)計師差距的因素之一。

圖標(biāo)設(shè)計有下載復(fù)用 → 動手設(shè)計 → 規(guī)范設(shè)計 → 融入品牌基因等幾個階段，你現(xiàn)在屬于哪個階段呢？

4.1、下載復(fù)用

下載復(fù)用是很多初入行業(yè)的設(shè)計師習(xí)慣的工作方式之一，由于自身對軟件技法、設(shè)計技巧、創(chuàng)意能力等方面的不足，無法從創(chuàng)意到標(biāo)準(zhǔn)制圖完成一個合格的圖標(biāo)設(shè)計。

缺點：圖標(biāo)設(shè)計風(fēng)格與細(xì)節(jié)處理都完全不統(tǒng)一，這樣的習(xí)慣一旦養(yǎng)成就會逐步喪失自己的動手能力。

4.2、動手設(shè)計

對于大部分有設(shè)計追求的設(shè)計師，都會意識到圖標(biāo)設(shè)計的重要性，也會結(jié)合產(chǎn)品特點繪制統(tǒng)一風(fēng)格的圖標(biāo)。

注意事項：圖標(biāo)設(shè)計風(fēng)格有：線性圖標(biāo)、填充圖標(biāo)、面型圖標(biāo)、扁平圖標(biāo)、手繪風(fēng)格圖標(biāo)和擬物圖標(biāo)等。

無論我們選擇何種表現(xiàn)形式，在進(jìn)行設(shè)計的時候都要保持風(fēng)格的統(tǒng)一性，由于圖標(biāo)的體量不同，相同尺寸下不同體量的圖標(biāo)視覺平衡不盡相同，例如相同尺寸的正方形會比圓形顯大。

因此，我們需要根據(jù)圖標(biāo)的體量對其大小做出相應(yīng)的調(diào)整。

4.3、規(guī)范設(shè)計

當(dāng)設(shè)計師養(yǎng)成自己動手的習(xí)慣以后，恭喜你已經(jīng)進(jìn)步了，保持這樣的習(xí)慣。隨著軟件技法的成熟我們需要嚴(yán)格控制自己的隨性，運用標(biāo)準(zhǔn)的規(guī)范進(jìn)行圖標(biāo)設(shè)計。

在標(biāo)準(zhǔn)設(shè)計的基礎(chǔ)上面我們可以發(fā)揮自己的創(chuàng)意，也不一定要局限在標(biāo)準(zhǔn)里面，但是總體的本質(zhì)需要符合設(shè)計規(guī)范。

4.4、融入品牌基因

圖標(biāo)設(shè)計的差異化逐漸變得模糊，隨著很多功能的相似性，圖標(biāo)的造型設(shè)計也幾乎雷同，很多對設(shè)計比較講究的產(chǎn)品，也開始根據(jù)自身品牌基因，進(jìn)行圖標(biāo)定制化。

融入品牌基因的圖標(biāo)設(shè)計具有很強的品牌識別性，不僅可以形成獨有的視覺差異化，也可以增強用戶對產(chǎn)品的記憶。

5、留白，我只想要足夠的空間

適當(dāng)?shù)牧舭卓梢宰屇愕慕缑娓徐`性，給信息之間預(yù)留更多的空間，也能更好的表達(dá)信息之間的層次感，相比擁擠的信息布局更能給人舒適的體驗。

當(dāng)設(shè)計師的留白意愿被產(chǎn)品或運營以“希望放更多內(nèi)容”拒絕時，作為設(shè)計師我們可以從不同的方向試著表達(dá)自己的觀點：

a. 設(shè)計出對比稿，把產(chǎn)品需要的方案和你覺得完美的方案進(jìn)行對比；

b. 篩選出這樣處理的優(yōu)秀案例，以成功的案例說服產(chǎn)品接受你的方案；

c. 進(jìn)行用戶測試，選擇一些目標(biāo)用戶進(jìn)行體驗，從用戶心聲入手設(shè)計最佳的方案；

d. 更多溝通的方法有待你去挖掘，最終的目的都是希望做出更好的產(chǎn)品。

設(shè)計小結(jié)

1. 不同的圖片比例反應(yīng)不同的特征，根據(jù)產(chǎn)品特點合理的選擇；

2. 設(shè)計中保持相同的圖片比例，不僅使視覺表達(dá)一致，也能給后期運營維護(hù)帶來便利；

3. 通過提高圖片的質(zhì)量來提高設(shè)計作品的美感度，但是也要保證圖片的真實還原；

4. 文字排版需要注意信息的層次、信息容量的最大值、巧妙的運用提示符等；

5. 養(yǎng)成不斷建立和豐富色彩庫的習(xí)慣；

6. 提高審美，增強感性判斷力，養(yǎng)成分析的習(xí)慣；

7. 圖標(biāo)設(shè)計經(jīng)歷的幾個環(huán)節(jié)：下載復(fù)用 → 動手設(shè)計 → 規(guī)范設(shè)計 → 融入品牌基因；

8. 適當(dāng)?shù)牧舭卓梢越o人更加舒適的體驗。

二、app設(shè)計中色彩的類型有哪些

我們在設(shè)計APP顏色主要還是屏幕端，那就是RGB

如果是在設(shè)計一款A(yù)PP 如何考慮他的配色我們可以有以下方法

分析人對顏色的普遍認(rèn)知/感覺，再結(jié)合產(chǎn)品特色來進(jìn)行色彩的選擇；抑或是從現(xiàn)有app采取的顏色來分析其視覺傳達(dá)和表現(xiàn)效果。

當(dāng)我們實際要采用和確定一種顏色時，思考會涉及到方方面面，不是僅僅通過主觀感知就能確定的。因此我們需要一種方法，來正向的、科學(xué)的、盡量客觀去做出選擇。下面我就是來介紹這么一套方法論。

當(dāng)然，此方法只適用于有精力、有意愿花在色彩用戶研究上的團隊和公司，并不是每個公司都那么適合用。

關(guān)于一個APP，或者是一個互聯(lián)網(wǎng)產(chǎn)品的視覺風(fēng)格和主題顏色是怎么確定其實是有一套系統(tǒng)的方法論的。這個方法論叫做：情緒板（Mood Board）。下面我貼一份網(wǎng)易UEDC的文章來解釋情緒板的運用方法。

什么是情緒板？

視覺設(shè)計師可能會花很長時間產(chǎn)出了精致的，高品質(zhì)的設(shè)計，得到的卻是用戶或客戶的一句話：“這不是我想要的！”一般來說，在沒有實物前，人們并不清楚自己要的是什么。但是在看到成品后，他們可以輕易地判斷是否符合自己的喜好或期望。因此，在為錯誤的設(shè)計方向投入過多前，了解用戶對風(fēng)格的期望和需求，從而確定整個網(wǎng)站或產(chǎn)品的視覺風(fēng)格是有必要的。

情緒板是一種啟發(fā)式和探索性的方法，可以對如下問題進(jìn)行研究：圖像風(fēng)格（photography style），色彩（color palettes），文字排版（typography），圖案（pattern）以及整體外觀以及感覺。視覺設(shè)計和人的情緒緊密相連，不同的設(shè)計總是會引發(fā)不同的情感。

此外，情緒板也可以作為可視化的溝通工具，快速地向他人傳達(dá)設(shè)計師想要表達(dá)的整體“感覺（feel）”。

如何創(chuàng)建情緒板？

首先，需要明確體驗關(guān)鍵詞，在一個設(shè)計項目中，通過進(jìn)行涉眾訪談和用戶研究，研究，設(shè)計人員創(chuàng)建了產(chǎn)品的人物角色，基于人物角色，綜合用戶研究結(jié)果以及品牌/營銷文檔，可以得出體驗關(guān)鍵詞（Experience Keywords）。當(dāng)人物角色和體驗關(guān)鍵詞都確定后，可以通過使用情緒板來探索網(wǎng)站或產(chǎn)品的視覺風(fēng)格，并作為和內(nèi)部人員進(jìn)行早期溝通的基礎(chǔ)。

體驗關(guān)鍵詞（Experience Keywords）舉例

其次，應(yīng)基于時間限制，個人工作習(xí)慣以及用戶的需求對情緒板的呈現(xiàn)方式進(jìn)行選擇。一般來說，可以從實體/數(shù)碼，以及拼貼/精致模板兩個維度來區(qū)分情緒板的呈現(xiàn)方式。

A. 拼貼畫

這是一種最簡單地創(chuàng)建情緒板的方式。使用這一模式，無需考慮諸如字體和特定顏色之類的細(xì)節(jié)問題。找到那些可以激發(fā)靈感的素材，其中可能包含那些傳達(dá)相似風(fēng)格和情緒的網(wǎng)站的截圖。這種方式快速，有趣，但是，具有一定的含混性。

B.精致化的模板

模板可用來展示不同的元素。如：

在這種形式的情緒板中，界定了配色，字體處理（如標(biāo)題和副標(biāo)題），按鈕風(fēng)格甚至是圖片風(fēng)格。標(biāo)準(zhǔn)模板可以讓人們聚焦于特征化元素。

一般來說，情緒板可以以實體的方式呈現(xiàn)，也可以以數(shù)碼方式呈現(xiàn)的，考慮到成本，時間等因素，我們多選用數(shù)碼的方式，因為這種方式更為設(shè)計師提供了更靈活，多樣的選擇。

第三步是選擇素材創(chuàng)建情緒板，這是一個迭代的過程。

如何使用情緒板？

在使用情緒板過程中，體驗關(guān)鍵詞的作用相當(dāng)重要。這里首先要說明下什么是體驗關(guān)鍵詞，可以參考以下的幾張PPT截圖（此PPT為UCD CHINA2009年會上工作坊所用的PPT）。

用戶研究方法介紹——情緒板（Mood Board） image_20100205141819

獲得體驗關(guān)鍵詞是情緒板的第一項工作，一般從內(nèi)部涉眾（相關(guān)的產(chǎn)品和設(shè)計人員）及外部用戶兩種渠道獲得。

自涉眾訪談和用戶研究中，可以收集大量的體驗詞樣本。在獲得這些樣本后，可以內(nèi)部進(jìn)行討論，通過歸納整理精簡為幾個關(guān)鍵詞。

體驗關(guān)鍵詞提取好之后，可以在內(nèi)部使用情緒板（如果受限于資源或公司的保密政策），也可以招募用戶來完成。

在內(nèi)部，由視覺設(shè)計師來完成，要注意以下幾點：

1.需要制作3套以上情緒板供評審。

2.制作的過程是個迭代的過程，需要內(nèi)部團隊慎重討論決定。

3.情緒板的形式可以有多種，如拼貼畫或精致化的模板（二者的區(qū)別在文檔中有）

如果招募外部用戶，則要注意以下幾點：

1.主持人需要不斷詢問被訪者，去探究選擇圖片背后的原因：“為什么你會選擇這張圖片？能否和大家分享一下你的想法？”

2.注意差異的挖掘。注意挖掘被訪者之間的觀點差異，一百個人心中有一百個哈雷姆特，同一張圖片對于不同被訪者可能會有不同的解釋，如果好幾位被訪者同時選擇一張圖片代表他們各自對某個品牌的感覺，注意詢問他們選擇這張圖片的原因是否一樣。

可以呈現(xiàn)給用戶的圖片有限的，因此，在挑選圖片時，需要內(nèi)部研究和設(shè)計人員協(xié)同，根據(jù)視覺設(shè)計所需要考慮的幾個維度結(jié)合已有的關(guān)鍵詞進(jìn)行圖片的篩選。一般來說，在將圖片呈現(xiàn)給用戶之前，內(nèi)部人員已經(jīng)明確了每一張圖片所代表的意義，在用戶選擇和訪談結(jié)束后，兩方面的數(shù)據(jù)綜合分析才能獲得最終的結(jié)果。

以上是操作情緒板的一些技巧的總結(jié)。下面再share兩個情緒板中的用戶實例，以加深大家對情緒板的理解。從下面兩只PPT可以看出來，運用了情緒板方式之后，用戶明顯更有興致分享自己對產(chǎn)品的感受，而且敘述也更加有條理。有興趣的同學(xué)，可以下載相關(guān)的音頻文件做進(jìn)一步了解。

最后，提供一些在線調(diào)色網(wǎng)站的資源給大家，可以幫助我們?yōu)榍榫w板挑選圖片及在圖片中提取色彩。

------end-------

本來我是想貼完上述結(jié)果就完了的，但是怕有人不理解所以做了以下這個示范。

需要說明的是，以下內(nèi)容僅作參考，我沒精力也沒義務(wù)在1小時內(nèi)完美的做完一套需要一周時間完成的準(zhǔn)確無誤的調(diào)研分析報告，無論是取樣還是分析肯定都會有很多問題，所以請別扣我細(xì)節(jié)了。知道是怎么用就OK。。。

OK，那么現(xiàn)在我們已經(jīng)知道了情緒板的運用方法，就來馬上動手試試。

首先，我給自己定義一個主題：外賣APP。

關(guān)鍵詞提取：美食快速送餐打電話（越多越好）

根據(jù)關(guān)鍵詞尋找的一些圖片（色系盡量豐富，風(fēng)格盡量多樣）：

然后根據(jù)查找的圖片提取出用色：

當(dāng)然，現(xiàn)在提取出的顏色是雜亂的，且不具代表性。因此我做了第一次顏色篩選，提取出了最高頻的16種顏色。

接著是第二次顏色篩選，主要去掉競品色（美團外賣、餓了么、百度外賣、達(dá)達(dá)、派樂趣、點評、京東到家、愛鮮蜂等）和臟色。當(dāng)然去掉之后發(fā)現(xiàn)基本沒什么可用的顏色了，因此還有一個問題就是，如果競品色不足以影響到我們的品牌色的話（在可控范圍內(nèi)），還是可以采用的。具體這個決策過程需要大家一起討論決定。

篩選出以下顏色：

現(xiàn)在我們基本可以控制可選擇的主題色了，如果人力足夠的話，建議多做幾個版本以查看具體使用效果。當(dāng)然，也可能是老板拍板來決定。

其他的視覺風(fēng)格，如圖像風(fēng)格、文字排版等也可以在這個調(diào)研基礎(chǔ)上進(jìn)行確定。

三、app開發(fā)具體流程

app開發(fā)具體流程

簡單點來說，要視手機APP的需求及質(zhì)量而言，價位一般在幾千到十幾萬左右，更高端的價格更高。

今天，我們就來詳細(xì)分析一下這個問題，請繼續(xù)往下看吧?！?span style="display:none">mbw創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司

一、APP開發(fā)款式分為固定款和定制款，兩者的價格均不相同

固定款：是指直接套用已有的、現(xiàn)成的APP固定模板，報價是固定的，所需要的功能也是固定的，缺點就是客戶拿不到源代碼，也不能根據(jù)企業(yè)需求進(jìn)行定制，由于源代碼是封裝的，如果企業(yè)以后想進(jìn)行功能升級或系統(tǒng)維護(hù)的話，也不能夠?qū)崿F(xiàn)，只能重新開發(fā)一個新的軟件。

固定款的APP開發(fā)時間短，約2~3日的時間即可完成，費用大約在幾千到幾萬之間。

定制款：定制款是指APP的功能全部重新開發(fā)，過程比較繁瑣，需要美工、策劃、APP開發(fā)（前臺/客戶端/手機端）、后臺程序員等工種協(xié)同完成，大型的、功能復(fù)雜的APP甚至需要數(shù)十人的團隊。

由于APP的功能和設(shè)計都是定制的，因此價格會高些。定制款的開發(fā)時間與開發(fā)價格是成正比的，開發(fā)時間長，大約在兩三個月甚至不定的周期里才能完成，而費用大概在幾萬甚至十幾萬左右。

因此，想要知道開發(fā)一款手機APP需要花費多少錢，企業(yè)主首先必須把APP的詳細(xì)需求和功能告知APP開發(fā)公司，開發(fā)公司才能報出一個合理的價格。

二、手機APP平臺不同，制作成本也不一樣

現(xiàn)在市面上流行的手機APP制作平臺主要有兩種一般包括兩種系統(tǒng)：安卓系統(tǒng)（Android）和蘋果系統(tǒng)（IOS）。

一般來說，制作蘋果系統(tǒng)的手機APP軟件費用要比安卓平臺的貴一些，因為蘋果公司對蘋果平臺的封閉性和手機APP開發(fā)語言O(shè)bjective-C的難度，都讓APP開發(fā)者加大了蘋果系統(tǒng)手機APP開發(fā)的難度。

三、APP制作成本包含參與人員的工資

通常情況下，開發(fā)一款A(yù)PP需要產(chǎn)品經(jīng)理、客戶端工程師、后端工程師和UI設(shè)計師各一名，這已經(jīng)是制作手機APP應(yīng)用軟件比較精簡的配置了，所以這些參與人員的工資也是包含在APP制作成本當(dāng)中的。這些工作人員的月薪加起來可能都會超過4、5萬元。

四、APP開發(fā)公司的所在地

需要注意的是，同樣實力的APP開發(fā)公司，在不同的城市也會導(dǎo)致APP的成本費用高一些，如在北京、深圳和上海等地的開發(fā)公司開發(fā)成本費用就會比較高，因為當(dāng)?shù)亻_發(fā)人員的薪資和其他支出相對更高。

四、APP開發(fā)有哪些內(nèi)容？

一，前期溝通

在項目需求最終確定之前，都會安排售前工程師，產(chǎn)品經(jīng)理，進(jìn)行初始需求的梳理，把客戶的需求盡可能完善的羅列出來。在這階段，是先做好還原客戶本身意愿的想法，整理成需求文檔讓客戶確認(rèn)。

二，需求評估

有了初步的需求確認(rèn)以后，會安排產(chǎn)品經(jīng)理，以及商業(yè)模式規(guī)劃師，再次和客戶溝通。那么這時候，就是根據(jù)客戶的原始需求，商業(yè)模式規(guī)劃師以及產(chǎn)品經(jīng)理，結(jié)合眾多項目經(jīng)驗，從商業(yè)模式的優(yōu)化以及產(chǎn)品的設(shè)計方面，給予客戶的優(yōu)化建議方案，從而提高APP項目的成功率。當(dāng)然，最終是否采納，也是客戶自主的選擇。

三，APP開發(fā)規(guī)劃

當(dāng)APP開發(fā)需求最終定稿以后，就會進(jìn)行整個APP項目的開發(fā)規(guī)劃階段。這里會有一個整個項目的開發(fā)進(jìn)度表，讓客戶能夠清晰知道整個項目從設(shè)計到最終上線的具體日期安排。這個進(jìn)度表的重要程度不言而喻，在這APP開發(fā)階段，客戶會根據(jù)開發(fā)的預(yù)測上線時間，及時安排運營部門做好APP的內(nèi)容編輯，運營推廣計劃方案，種子用戶的籌備建群等，只要APP進(jìn)入測試階段，以上運營工作即可馬上進(jìn)入，大大節(jié)省項目的整體運作時間，最大限度提高項目運作效率。

四，APP制作開發(fā)

從規(guī)劃確認(rèn)后，就進(jìn)入了具體的APP制作流程了。具體的APP制作流程，這里可以分為幾個階段，詳細(xì)列舉一下：

1）原型圖設(shè)計（非常重要）

產(chǎn)品經(jīng)理會根據(jù)定稿的需求，產(chǎn)品原型圖可以理解為是建筑施工設(shè)計圖，能看到產(chǎn)品的布局框架，以及產(chǎn)品的交互展示。這階段，需要和客戶進(jìn)一步確認(rèn)產(chǎn)品的功能構(gòu)思，以及功能的邏輯跳轉(zhuǎn)是否符合項目本身的需求規(guī)劃。客戶能根據(jù)自身的項目理解，和產(chǎn)品經(jīng)理詳細(xì)溝通修改。

根據(jù)以往的項目經(jīng)驗，客戶在原型圖的確認(rèn)過程仲，沒有仔細(xì)體驗交互邏輯，布局等問題，導(dǎo)致最終APP開發(fā)上線后，時常出現(xiàn)一些本應(yīng)該是原型圖設(shè)計就能修正的問題。當(dāng)項目上線后再去做邏輯修改，布局修改，那么從修改時間，以及APP的修改成本，都會比在原型圖階段直接修改要大得多。從而影響了整個APP的上線時間，上線時間拖越久，不單消磨了客戶對于項目的熱情，還會產(chǎn)生更多的項目成本。比如運營部門，運營資源的閑置，甚至還有可能導(dǎo)致APP的成本費用發(fā)生一些變化。

所以在這階段，提醒客戶們都需要謹(jǐn)慎對待，要反復(fù)體驗原型圖的交互，布局，反復(fù)確認(rèn)，千萬不能因為趕時間而著急確認(rèn)。反而是為日后可能的損失埋了雷。慢就是快，快就是慢，這淺顯道理是過往不少客戶的滴血警示。

某上市乳企的商城項目原型圖

2）UI設(shè)計

當(dāng)原型圖經(jīng)過認(rèn)真完善定稿以后，就會安排UI設(shè)計師進(jìn)行原型圖的頁面上色?？梢岳斫鉃?，把一幅風(fēng)景的黑白照，通過色彩搭配上色，變成一幅繽紛的五彩圖。在這就很考究UI設(shè)計師對于色彩搭配學(xué)，以及對于APP用戶的潛在心理行為的把握力度了。

UI設(shè)計師也會和客戶詳細(xì)溝通APP用戶的心理模型，使用習(xí)慣，而有針對性的進(jìn)行頁面設(shè)計，潤色。務(wù)求讓用戶在使用APP的時候，達(dá)到一種舒適，印象深刻，色彩鮮明的感覺。UI的設(shè)計優(yōu)劣，也是APP粘性高低的重要影響因素之一，畢竟用戶往往遵循第一感覺的?？蛻魝円矂?wù)必重視界面的設(shè)計美感。

對應(yīng)上圖的原型圖，潤色后的UI界面

3）敏捷代碼開發(fā)

此時，UI界面完成后，就會進(jìn)行敏捷的編程開發(fā)。工程師們都會根據(jù)已有的項目資料，從安卓開發(fā)，IOS開發(fā)，后臺管理系統(tǒng)開發(fā)三線齊發(fā)。視乎APP的技術(shù)難度，以及整體的開發(fā)工作量大小，一般APP的代碼開發(fā)階段從1-2個月不等，大型APP開發(fā)項目會更長。

五，版本測試

其實測試是貫穿了整個項目的代碼開發(fā)階段的。從代碼開發(fā)開始，就會形成以星期為單位的功能版本更新計劃。簡單理解說，就是每開發(fā)完成一個模塊功能，就會測試工程師跟進(jìn)該模塊的測試，為后續(xù)整個版本打包測試節(jié)省時間，以及提高整個APP項目的代碼質(zhì)量。完美的執(zhí)行了代碼開發(fā)的監(jiān)工角色。

六，上線交付

經(jīng)歷了最后的測試階段，包括壓力測試，并發(fā)測試，功能使用測試等一系列測試后，APP無BUG，并且達(dá)到了市場推廣要求。那么APP就可以正式上線推向市場了。當(dāng)然，在這之前，都還是要做好APP上架工作的。那么APP開發(fā)公司除了履行好對應(yīng)的售后維護(hù)工作，在交付的時候，都會把項目的源代碼，以及在系統(tǒng)開發(fā)過程中，使用過的第三方賬號資料，操作系統(tǒng)說明說，培訓(xùn)文檔等資料，打包交付到客

以上就是關(guān)于app設(shè)計說明相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。