移動(dòng)UI交互設(shè)計(jì)第三章_第1頁(yè)
移動(dòng)UI交互設(shè)計(jì)第三章_第2頁(yè)
移動(dòng)UI交互設(shè)計(jì)第三章_第3頁(yè)
移動(dòng)UI交互設(shè)計(jì)第三章_第4頁(yè)
移動(dòng)UI交互設(shè)計(jì)第三章_第5頁(yè)
已閱讀5頁(yè),還剩105頁(yè)未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、03 界面設(shè)計(jì)移動(dòng)UI交互設(shè)計(jì)微課版主編:夏琰副主編:余燕周曉紅十三五高等院校 藝術(shù)設(shè)計(jì)規(guī)劃教材3.1 界面設(shè)計(jì)概述3.2 界面設(shè)計(jì)分類3.3 界面設(shè)計(jì)規(guī)范目錄 CONTENTS3.4 界面設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)3.1界面設(shè)計(jì)概述界面是人與機(jī)器之間傳遞和交換信息的媒介,是人與機(jī)器互動(dòng)的接口。我們通過(guò)手機(jī)界面來(lái)瀏覽信息,通過(guò)在手機(jī)界面上點(diǎn)擊、拖曳等方式來(lái)實(shí)現(xiàn)各種操作,所以,手機(jī)界面是我們與手機(jī)發(fā)生互動(dòng)的中間介質(zhì),如圖所示。3.1界面設(shè)計(jì)概述界面設(shè)計(jì)開(kāi)始于軟件設(shè)計(jì)之后,UI界面設(shè)計(jì)的發(fā)展過(guò)程是與軟件設(shè)計(jì)慢慢分化的。隨著人們對(duì)界面易用性、簡(jiǎn)潔性的要求越來(lái)越高,界面設(shè)計(jì)的重要性才越來(lái)越被重視,如圖所示的是“搜狐

2、”網(wǎng)站界面十年前后的對(duì)比效果,可以看出,簡(jiǎn)潔、美觀、高效已經(jīng)成為界面設(shè)計(jì)的主流趨勢(shì)。3.1.1 界面設(shè)計(jì)的內(nèi)容啟動(dòng)圖標(biāo)是手機(jī)應(yīng)用程序的入口,它會(huì)出現(xiàn)在手機(jī)解鎖后的主界面上。如果需要啟動(dòng)應(yīng)用程序,只需點(diǎn)擊該圖標(biāo)即可。啟動(dòng)頁(yè)是指從用戶啟動(dòng)應(yīng)用之后到應(yīng)用程序主界面打開(kāi)之前看到的過(guò)渡頁(yè)面或動(dòng)畫,如圖所示。啟動(dòng)圖標(biāo)是用戶認(rèn)識(shí)應(yīng)用程序的第一步,是應(yīng)用程序的標(biāo)志和門戶,其重要性不言而喻。其設(shè)計(jì)的原則和方法與我們前面講到的圖標(biāo)設(shè)計(jì)是一致的。1. 啟動(dòng)圖標(biāo)和啟動(dòng)頁(yè)3.1.1 界面設(shè)計(jì)的內(nèi)容啟動(dòng)頁(yè)的作用是為了增強(qiáng)應(yīng)用程序啟動(dòng)時(shí)的用戶體驗(yàn)。最常見(jiàn)的啟動(dòng)頁(yè)形式如圖所示,這些頁(yè)面主要用來(lái)體現(xiàn)應(yīng)用程序的名稱及價(jià)值,讓用戶

3、能迅速熟記該應(yīng)用。1. 啟動(dòng)圖標(biāo)和啟動(dòng)頁(yè)3.1.1 界面設(shè)計(jì)的內(nèi)容還有一些啟動(dòng)頁(yè),并沒(méi)有文字內(nèi)容,如圖所示。曾經(jīng)有調(diào)查數(shù)據(jù)顯示,啟動(dòng)時(shí)間超過(guò)3秒用戶就會(huì)有焦急感。所以,啟動(dòng)頁(yè)停留的時(shí)間最好控制在3秒以下。1. 啟動(dòng)圖標(biāo)和啟動(dòng)頁(yè)3.1.1 界面設(shè)計(jì)的內(nèi)容并不是所有應(yīng)用程序的啟動(dòng)時(shí)間都能控制在3秒以下,所以我們要使用其他方法來(lái)進(jìn)行處理,如可以添加狀態(tài)提醒,如左圖所示,或者利用漸隱效果拖延時(shí)間等,如右圖所示。1. 啟動(dòng)圖標(biāo)和啟動(dòng)頁(yè)3.1.1 界面設(shè)計(jì)的內(nèi)容框架設(shè)計(jì)也稱為結(jié)構(gòu)設(shè)計(jì),框架是指界面的骨架,框架設(shè)計(jì)是在進(jìn)行用戶研究和任務(wù)分析后制訂出的界面整體架構(gòu)。對(duì)于手機(jī)界面來(lái)說(shuō),其基本的結(jié)構(gòu)可以分為4 個(gè)

4、部分,狀態(tài)欄、標(biāo)題欄、標(biāo)簽欄和內(nèi)容區(qū)域,如圖所示。界面中的狀態(tài)欄主要用于顯示手機(jī)信號(hào)、電池容量、時(shí)間等信息,標(biāo)題欄用于顯示標(biāo)題信息和放置返回、設(shè)置等按鈕,標(biāo)簽欄用于顯示選項(xiàng)信息。2. 框架設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容界面中除了狀態(tài)欄、標(biāo)題欄、標(biāo)簽欄之外的區(qū)域就是內(nèi)容區(qū)域,所以我們這里說(shuō)的框架設(shè)計(jì),主要是指內(nèi)容區(qū)域的架構(gòu)設(shè)計(jì)。通俗而言,框架設(shè)計(jì)就是界面里的信息和元素位置如何擺放、大小如何設(shè)置、顏色如何搭配等??蚣茉O(shè)計(jì)沒(méi)有定式,但會(huì)因界面類型、功能的不同而有一些常見(jiàn)的形式,在接下來(lái)的界面設(shè)計(jì)分類中會(huì)有所闡述。2. 框架設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容在進(jìn)行框架設(shè)計(jì)時(shí),很多設(shè)計(jì)方面的原理、法則會(huì)對(duì)我

5、們有所幫助,如在設(shè)計(jì)中應(yīng)用比較廣泛的格式塔原理,就非常適合應(yīng)用于框架設(shè)計(jì)。下面,先介紹兩種在界面設(shè)計(jì)常用的法則。2. 框架設(shè)計(jì)(2)相似法則(1)接近法則3.1.1 界面設(shè)計(jì)的內(nèi)容(1)接近法則。接近法則是指人的潛意識(shí)里常常傾向于將空間上或時(shí)間上接近的元素整合成集合或整體。例如,右圖所示的圖形中,雖然所有的圓形大小都一樣,但是能夠清晰地看出將其分成了3 組,這是由于它們之間不同的距離為我們的視覺(jué)創(chuàng)造了分組效果。2. 框架設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容(2)相似法則。相似法則是指人的潛意識(shí)里會(huì)將視線內(nèi)一些相似的元素(如相似的形狀、顏色、大小、亮度等)自動(dòng)整合成集合或整體。如圖所示,圖中各行圖形雖

6、然間距相等,但是每行圖形的形狀有所不同,在視覺(jué)上就形成了分組效果。2. 框架設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容利用相似法則,即使界面中各元素?cái)[放得雜亂無(wú)序,也可以很容易地進(jìn)行區(qū)分并分組,如圖所示,雖然文件類型多樣,但是通過(guò)圖標(biāo)的形狀和顏色就能非常容易地將其分成若干組合,一目了然。2. 框架設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容相似法則是基于共同的視覺(jué)特征出發(fā)的,在界面設(shè)計(jì)中,可以利用相似法則給予不同的布局元素相同或相似的視覺(jué)特征,激發(fā)用戶對(duì)界面進(jìn)行適當(dāng)?shù)姆纸M和聯(lián)結(jié)的本能。右圖所示的兩個(gè)界面就很好地運(yùn)用了相似法則,通過(guò)形狀、顏色等區(qū)別對(duì)界面元素進(jìn)行分組,使界面的結(jié)構(gòu)變得靈活。2. 框架設(shè)計(jì)3.1.1 界面設(shè)

7、計(jì)的內(nèi)容控件是指在框架設(shè)計(jì)中出現(xiàn)的各種元素,如按鈕、菜單、對(duì)話框、列表、信號(hào)條、電池狀態(tài)、標(biāo)簽、面板、滑塊等都是控件,如圖所示。這些控件的功能相對(duì)獨(dú)立,并且可以重復(fù)使用。3.控件設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容如果細(xì)化來(lái)說(shuō),在界面上出現(xiàn)的所有元素都可以稱為控件。在完成了框架設(shè)計(jì),并對(duì)界面的結(jié)構(gòu)有所把握之后,就要通過(guò)控件的制作來(lái)填充框架,完成界面設(shè)計(jì)了??丶男Ч饕蕾囉诮缑嬖O(shè)計(jì)的規(guī)范和控件細(xì)節(jié)的表現(xiàn)。界面設(shè)計(jì)的規(guī)范主要是指適合于手機(jī)設(shè)備和系統(tǒng)特性的、合理的設(shè)計(jì)標(biāo)準(zhǔn),包括控件的大小和間距、界面的布局等內(nèi)容??丶?xì)節(jié)的表現(xiàn)主要是指控件的顏色、特效、材質(zhì)等效果,需要通過(guò)Photoshop、Illus

8、trator 等制作軟件來(lái)完成。3.控件設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容需要強(qiáng)調(diào)的是,控件的表現(xiàn)看似簡(jiǎn)單,實(shí)則不然。為了將控件效果做好,細(xì)節(jié)的表現(xiàn)尤為重要,右圖所示的兩個(gè)按鈕是使用Photoshop 軟件來(lái)制作的,左側(cè)的按鈕只添加了“斜面和浮雕”的圖層樣式,右側(cè)的按鈕在此效果上又增加了高光和陰影線,立刻增強(qiáng)了按鈕的質(zhì)感,在細(xì)節(jié)表現(xiàn)上要優(yōu)于左側(cè)的按鈕效果。手機(jī)的界面空間有限,在有限的界面中要想將所有控件表現(xiàn)出最佳效果,每一個(gè)像素都是關(guān)鍵,所以需要細(xì)致、耐心、考慮周到。3.控件設(shè)計(jì)3.1.2 界面設(shè)計(jì)的注意要點(diǎn)界面設(shè)計(jì)首先要關(guān)注的就是目標(biāo)平臺(tái),也就是說(shuō),做界面設(shè)計(jì)要明確手機(jī)、Pad、電腦等設(shè)備的特性

9、,要明確iOS、Android、Windows 等不同系統(tǒng)的設(shè)計(jì)規(guī)范。如圖所示,左側(cè)為該應(yīng)用程序在Pad上的界面,右側(cè)為其在手機(jī)上的界面。同一款應(yīng)用程序在不同設(shè)備上布局一樣并不合適,而是要因設(shè)備的不同,適當(dāng)修改布局方式。1. 適用性3.1.2 界面設(shè)計(jì)的注意要點(diǎn)界面是人與機(jī)器交互的接口,為用戶提供簡(jiǎn)便、易懂的操作才是最終目的。界面的易用性表現(xiàn)在界面的功能、信息、層級(jí)等方面。在進(jìn)行界面設(shè)計(jì)時(shí),要以滿足用戶的目標(biāo)需要為準(zhǔn),避免嵌套過(guò)深的多級(jí)菜單,縮減不必要的功能,同時(shí)盡可能創(chuàng)建多種信息訪問(wèn)途徑。理想的情況是用戶不用查閱幫助就能知道該界面的功能并進(jìn)行相關(guān)的正確操作。如圖所示的Windows8系統(tǒng)界面

10、,就很好地體現(xiàn)了界面信息層級(jí)扁平化的原則,用戶關(guān)注的信息一目了然,易用性強(qiáng)。2. 易用性3.1.2 界面設(shè)計(jì)的注意要點(diǎn)界面設(shè)計(jì)要能夠預(yù)測(cè)用戶可能出現(xiàn)的錯(cuò)誤,提供相應(yīng)的機(jī)制盡可能避免用戶出錯(cuò),在用戶操作錯(cuò)誤或產(chǎn)生迷惑時(shí)可以自己尋求解決方法。右圖所示的某程序注冊(cè)界面提供了友好的信息提示,使注冊(cè)過(guò)程變得簡(jiǎn)單、出錯(cuò)率小,提高了用戶對(duì)該應(yīng)用程序的信任度和好感。3.友好性3.1.3 界面設(shè)計(jì)的表現(xiàn)手法唯一主色調(diào)是指在一個(gè)界面中,只采用一種色相,通過(guò)不同的亮度、飽和度的調(diào)整,配以黑色、白色和灰色來(lái)展現(xiàn)信息層次,絕不使用更多的顏色,如右圖所示。唯一主色調(diào)的顏色一般會(huì)出現(xiàn)在界面的狀態(tài)欄、標(biāo)題欄、標(biāo)簽欄或其他重要

11、區(qū)域提醒的位置。1. 唯一主色調(diào)3.1.3 界面設(shè)計(jì)的表現(xiàn)手法多彩色與唯一主色調(diào)的區(qū)別在于,不同頁(yè)面、不同信息組塊采用多彩色撞色,或同一個(gè)界面的局部采用多彩色,如右圖所示。多彩色的設(shè)計(jì)方法比唯一主色調(diào)的設(shè)計(jì)方法要難很多,顏色的使用主要取決于想表現(xiàn)的風(fēng)格和意境。顏色的搭配有很多可參考的理論知識(shí),如鄰近色、對(duì)比色、暖色調(diào)、冷色調(diào)等。但這些理論也不是絕對(duì)的。歸根結(jié)底,顏色的運(yùn)用需要依靠長(zhǎng)時(shí)間的積累與實(shí)踐,如果運(yùn)用得當(dāng),多彩色的界面還是非常美觀的。2. 多彩色3.1.3 界面設(shè)計(jì)的表現(xiàn)手法現(xiàn)在,越來(lái)越多的App 在數(shù)據(jù)的呈現(xiàn)方式上,開(kāi)始嘗試數(shù)據(jù)的可視化、信息的圖表化,讓枯燥的數(shù)據(jù)和文字變得直觀,增強(qiáng)了

12、用戶體驗(yàn),如圖所示。數(shù)據(jù)的可視化只是用來(lái)輔助進(jìn)行界面設(shè)計(jì)的,不能單純地為了數(shù)據(jù)能可視化,而大量地使用圖表,卻忽視了這些圖表是否有存在價(jià)值,或者說(shuō)是否能夠準(zhǔn)確表達(dá)你所要呈現(xiàn)給用戶的信息。3.數(shù)據(jù)的可視化3.1.3 界面設(shè)計(jì)的表現(xiàn)手法(1)在界面設(shè)計(jì)時(shí),可以將不同的內(nèi)容信息放置于不同的卡片上,使用空白間隔將不同的內(nèi)容塊劃分開(kāi),如圖所示,這樣的設(shè)計(jì)使得各部分內(nèi)容清晰,沒(méi)有多余的元素影響視覺(jué),界面簡(jiǎn)潔。4.內(nèi)容至上3.1.3 界面設(shè)計(jì)的表現(xiàn)手法(2)還有一種表現(xiàn)形式是干脆將卡片也去掉,只保留圖片和文字,如圖所示。這樣的設(shè)計(jì)可突出內(nèi)容,放大圖片和字號(hào),視覺(jué)體驗(yàn)更加清晰,提高了界面的易用性。4.內(nèi)容至上3

13、.1.3 界面設(shè)計(jì)的表現(xiàn)手法5. 大視野背景圖這種表現(xiàn)手法是用圖片作為界面的背景,以渲染氛圍,豐富情感化元素,如圖所示。大視野背景圖對(duì)字體和排版設(shè)計(jì)的要求比較高,難度也比較大,使用的背景效果不能喧賓奪主,影響界面內(nèi)容的清晰度。使用大視野背景圖最簡(jiǎn)單的方法是可以將背景圖做模糊處理,這樣可以起到很好的襯托作用。3.1 界面設(shè)計(jì)概述3.2 界面設(shè)計(jì)分類3.3 界面設(shè)計(jì)規(guī)范目錄 CONTENTS3.4 界面設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)3.2界面設(shè)計(jì)分類在一個(gè)App中,界面可以分為兩類:一類是典型界面,是指在 App(應(yīng)用程序)中經(jīng)常出現(xiàn)的、有代表性的界面;另一類是特殊界面,是指App 中的啟動(dòng)、登錄、注冊(cè)界面等。例如

14、,在QQ 軟件中,信息列表頁(yè)、個(gè)人設(shè)置頁(yè)就是典型界面,如左圖所示;啟動(dòng)頁(yè)、登錄頁(yè)就是特殊界面,如右圖所示。3.2.1 主界面主界面是指打開(kāi)應(yīng)用程序后的第一個(gè)界面,在這個(gè)界面上一般會(huì)呈現(xiàn)該應(yīng)用程序的核心功能,如右圖所示。在主界面上,用戶應(yīng)該能夠輕易找到該款A(yù)pp 最主要的功能。在設(shè)計(jì)主界面時(shí),最先做的應(yīng)該是了解App 的開(kāi)發(fā)目的和用戶使用的心理,在挖掘核心功能后,再進(jìn)行布局設(shè)計(jì)。3.2.1 主界面這種布局方式泛指對(duì)界面進(jìn)行橫縱等分的布局類型,如圖所示。所有的核心功能井然有序、間隔合理、清晰呈現(xiàn),用戶能夠快速查看和選擇,視覺(jué)效果穩(wěn)定。1. 九宮格式3.2.1 主界面最早的九宮格是指橫縱各3個(gè)格,但

15、是慢慢地這種布局方式也發(fā)生了改變,不再絕對(duì)地控制格子的數(shù)量。如果App的功能個(gè)數(shù)少于或多于9個(gè),也可以改變橫縱的格子數(shù)量,讓布局更加合理,如圖所示。1. 九宮格式3.2.1 主界面這種布局方式是將信息以豎排列表的方式進(jìn)行呈現(xiàn),如圖所示。列表可以包含比較多的信息,在視覺(jué)上整齊美觀,視覺(jué)流線從上向下,瀏覽體驗(yàn)快捷,用戶接受度很高。列表式的界面常用于并列元素的展示,包括目錄、分類、內(nèi)容等。2. 列表式3.2.1 主界面這種布局方式表面上和列表式很相似,但是它可展開(kāi)顯示二級(jí)內(nèi)容,在不用的時(shí)候,這些內(nèi)容可以隱藏,如圖所示。它的優(yōu)勢(shì)在于能夠在一屏內(nèi)顯示更多細(xì)節(jié),無(wú)需進(jìn)行頁(yè)面的跳轉(zhuǎn),既能保持界面簡(jiǎn)潔又能提高

16、操作效率。3.手風(fēng)琴式3.2.1 主界面手風(fēng)琴式和列表式在符號(hào)表示上是有所區(qū)別的。如果有二級(jí)內(nèi)容,則右側(cè)的符號(hào)通常會(huì)用向下的箭頭來(lái)表示,如果是界面要發(fā)生跳轉(zhuǎn),則右側(cè)的符號(hào)會(huì)用向右的箭頭來(lái)表示。當(dāng)然,這只是常用的表現(xiàn)形式,在一些頁(yè)面中,也會(huì)看到右圖所示的手風(fēng)琴式界面。3.手風(fēng)琴式3.2.1 主界面這種布局方式是將部分內(nèi)容先藏在界面邊緣,在需要時(shí)再展開(kāi),如左所示。它的優(yōu)勢(shì)是不占用寶貴的屏幕空間,讓用戶聚焦于內(nèi)容,在交互體驗(yàn)上更加自然,和原界面融合得較好,如右圖所示。4.側(cè)滑式3.2.1 主界面這種布局方式是利用了格式塔原理中的相似法則,通過(guò)形狀進(jìn)行分組,如圖所示。它的優(yōu)勢(shì)在于形式活潑、不拘謹(jǐn),常用

17、于分類較多、不好管理的界面布局。5. 混合式3.2.2 詳情界面詳情界面是指除了主界面以外的承載信息的界面,根據(jù)其實(shí)現(xiàn)的功能,主要分為查看界面和編輯界面。其中,查看界面是指用來(lái)瀏覽、查看信息的界面;編輯界面是指用來(lái)編輯、修改信息的界面。觀察我們使用的App,其實(shí)除了主界面、特殊的登錄與注冊(cè)界面、彈窗界面以外,應(yīng)該都屬于詳情界面。詳情界面的布局方式可以參考主界面,也就是說(shuō),前面介紹的幾種布局方式并不是主界面所特有的,它也適用于功能相似的詳情界面。此外,還可根據(jù)界面功能的需求,在框架符合界面設(shè)計(jì)規(guī)范的情況下,設(shè)計(jì)形式各異、風(fēng)格獨(dú)特的詳情界面。3.2.2 詳情界面這類App 的查看界面以瀏覽查看物品

18、為主,有的是圖片列表,有的是內(nèi)容至上的大圖展示,目的就是讓消費(fèi)者的目光聚焦于物品,激發(fā)購(gòu)買欲望。所以它的界面往往如圖所示。1. 購(gòu)物類App3.2.2 詳情界面它的編輯界面一般包括編輯個(gè)人信息、購(gòu)買參數(shù)設(shè)置、購(gòu)物評(píng)價(jià)等,注意要界面簡(jiǎn)潔、操作簡(jiǎn)單,讓用戶感到方便、快捷,如圖所示。1. 購(gòu)物類App3.2.2 詳情界面這類App 的查看界面主要是以瀏覽信息、查看分類、閱讀詳情為主,所以在設(shè)計(jì)時(shí),要便于瀏覽和閱讀,列表式、圖文混排的形式應(yīng)該比較適合,如圖所示。2. 新聞?lì)怉pp3.2.2 詳情界面這類App 的編輯界面主要包括個(gè)人設(shè)置、評(píng)論、反饋、搜索等,應(yīng)該便于操作、提供記憶幫助、界面友好,如圖所

19、示。2. 新聞?lì)怉pp3.2.2 詳情界面這類App 的查看界面主要是以查看、分類、播放為主,界面多采用列表式、手風(fēng)琴式等便于瀏覽、節(jié)省界面空間的類型。因其分類較多,也會(huì)有類似于Pad 端界面的菜單形式,如圖所示。3.音樂(lè)類App3.2.2 詳情界面音樂(lè)類App 的編輯界面與新聞?lì)惖南嗨?,主要用?lái)搜索、編輯、設(shè)置等,操作簡(jiǎn)單、界面友好應(yīng)該是設(shè)計(jì)中需要關(guān)注的問(wèn)題,如圖所示。3.音樂(lè)類App3.2.2 詳情界面從上面分析的3 種類型App 的詳情界面可以看出,詳情界面的設(shè)計(jì)會(huì)根據(jù)App 的不同需求,在界面布局、功能上有所區(qū)別。界面設(shè)計(jì)不能脫離用戶的需求和體驗(yàn),有人說(shuō),“最好的設(shè)計(jì)應(yīng)該是用戶在使用過(guò)

20、程中感受不到設(shè)計(jì)”。也就是說(shuō),只有從用戶的角度出發(fā),充分考慮用戶的需求,最大限度地滿足用戶操作的方便,這種界面設(shè)計(jì)才是最好的設(shè)計(jì)。3.2.3 彈窗界面彈窗界面是指App中用于實(shí)現(xiàn)提示、輸入等功能的窗口,如圖所示。3.2.3 彈窗界面彈窗界面的呈現(xiàn)方式是在界面上覆蓋一層黑色半透明層,然后出現(xiàn)彈窗。常見(jiàn)功能如下。(1) 確認(rèn)信息,如圖所示。(2) 選擇和設(shè)置,如圖所示。3.2.3 彈窗界面彈窗界面的呈現(xiàn)方式是在界面上覆蓋一層黑色半透明層,然后出現(xiàn)彈窗。常見(jiàn)功能如下。(3) 提示和廣告,如圖所示。(4) 分享,如圖所示。3.1 界面設(shè)計(jì)概述3.2 界面設(shè)計(jì)分類3.3 界面設(shè)計(jì)規(guī)范目錄 CONTENT

21、S3.4 界面設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)3.3.1 系統(tǒng)規(guī)范界面設(shè)計(jì)規(guī)范主要規(guī)定界面的狀態(tài)欄、標(biāo)題欄、標(biāo)簽欄、圖標(biāo)、字體、字號(hào)等視覺(jué)元素的信息。下表列出了iOS手機(jī)界面設(shè)計(jì)的參數(shù)規(guī)范。1.iOS界面設(shè)計(jì)規(guī)范適用機(jī)型分辨率狀態(tài)欄高度標(biāo)題欄高度標(biāo)簽欄高度iPhone 6/7/8 plus1080px1920px54px132px132pxiPhone 6/7/8750px1334px40px88px98pxiPhone 5/5C/5S640px1136px40px88px98pxiPhone 4/4S640px960px40px88px98px3.3.1 系統(tǒng)規(guī)范在界面中還會(huì)出現(xiàn)一些圖標(biāo)設(shè)計(jì),不僅可以輔助用戶進(jìn)

22、行選擇,而且可以增強(qiáng)界面的美觀性。下表列出了iOS手機(jī)界面圖標(biāo)設(shè)計(jì)規(guī)范。1.iOS界面設(shè)計(jì)規(guī)范適用機(jī)型APP Store主屏幕標(biāo)簽欄導(dǎo)航欄和工具欄iPhone 6/7/8 plus1024px1024px114px114px75px75px66px66pxiPhone 6/7/81024px1024px114px114px50px50px44px44pxiPhone 5/5C/5S1024px1024px114px114px50px50px44px44pxiPhone 4/4S1024px1024px114px114px50px50px44px44px3.3.1 系統(tǒng)規(guī)范在字體方面,iOS 系

23、統(tǒng)中主要使用的中文字體是蘋方(平時(shí)練習(xí)可以使用微軟雅黑),英文字體是San Francisco。出現(xiàn)在不同位置的文字,在字號(hào)上有所區(qū)別,下表是以iPhone 6/7/8 為例的文字設(shè)計(jì)規(guī)范。1.iOS界面設(shè)計(jì)規(guī)范標(biāo)題欄標(biāo)簽欄正文列表、表單等3442px2024px2836px3234px3.3.1 系統(tǒng)規(guī)范手機(jī)的屏幕密度有所不同,狀態(tài)欄、標(biāo)題欄、標(biāo)簽欄、圖標(biāo)、字號(hào)等視覺(jué)元素就會(huì)有所區(qū)別。下面介紹一種通用的布局格式作為參考,如表3-4 所示。在實(shí)際應(yīng)用中,最好根據(jù)不同的屏幕尺寸提供34個(gè)布局方案,根據(jù)密度提供不同分辨率的圖片。2.Android界面設(shè)計(jì)規(guī)范高度圖標(biāo)狀態(tài)欄標(biāo)題欄標(biāo)簽欄標(biāo)簽欄工具圖標(biāo)

24、小圖標(biāo)36px64px74px32px32px48px48px16px16px3.3.2 設(shè)計(jì)制作規(guī)范顏色搭配在界面設(shè)計(jì)中非常重要,對(duì)它的熟練運(yùn)用,會(huì)讓設(shè)計(jì)事半功倍。在移動(dòng)端界面設(shè)計(jì)中的顏色選取主要分為主題層、輔助層、閱讀層和提醒層的顏色。主題層顏色是決定界面風(fēng)格的顏色,這種顏色一般不會(huì)大面積使用,主要出現(xiàn)在狀態(tài)欄、標(biāo)題欄、標(biāo)簽欄、主要區(qū)域提醒等地方,如圖所示。1. 顏色3.3.2 設(shè)計(jì)制作規(guī)范不同的顏色帶給用戶的視覺(jué)感受是不同的,如冷色調(diào)會(huì)讓人覺(jué)得平靜、理智,暖色調(diào)會(huì)讓人覺(jué)得熱情、有活力,圖所示即為這兩種色調(diào)的對(duì)比效果。1. 顏色3.3.2 設(shè)計(jì)制作規(guī)范輔助層顏色是對(duì)主題層顏色的補(bǔ)充,一般選

25、用不會(huì)與主題色發(fā)生沖突的顏色,如鄰近色、延伸色、協(xié)調(diào)的補(bǔ)色等,如圖所示。1. 顏色3.3.2 設(shè)計(jì)制作規(guī)范閱讀層的配色主要考慮信息的視覺(jué)清晰、層次清楚,所以灰度是最適合體現(xiàn)該特性的顏色?;叶鹊膶?duì)比要兼顧視覺(jué)的舒適感、層級(jí)的清晰度,不要過(guò)于強(qiáng)烈,也不要明度過(guò)于接近,如圖所示。1. 顏色3.3.2 設(shè)計(jì)制作規(guī)范提醒層的目的是能快速引起用戶的注意,一般會(huì)使用純度較高的顏色,但也要根據(jù)界面的整體配色進(jìn)行分析,把握合適的對(duì)比,不要引起用戶的不舒適感,如圖所示。1. 顏色3.3.2 設(shè)計(jì)制作規(guī)范界面設(shè)計(jì)的布局主要是考慮元素之間的對(duì)齊、分布方式。我們?cè)谥谱鹘缑鏁r(shí),往往需要借助參考線,以保證相同元素能夠?qū)R、

26、各元素間的距離能夠合理,如左圖所示。此外,每個(gè)控件都需要考慮空間布局。例如,右圖所示的界面,我們?cè)诜胖脴?biāo)題欄左側(cè)的小圖標(biāo)時(shí),要保證其與標(biāo)題欄上、左、下邊緣的距離一致,這樣才會(huì)讓布局看起來(lái)規(guī)范。2. 布局3.3.2 設(shè)計(jì)制作規(guī)范如圖所示,標(biāo)簽欄處的幾個(gè)圖標(biāo)在分布上也需要注意間距的相等,這樣才會(huì)讓布局協(xié)調(diào),達(dá)到良好的視覺(jué)效果。2. 布局3.3.2 設(shè)計(jì)制作規(guī)范界面設(shè)計(jì)涉及的圖形主要有圖標(biāo)、頭像等。這里的圖標(biāo)與前面章節(jié)講到的圖標(biāo)從設(shè)計(jì)上來(lái)說(shuō)有所不同,在界面中出現(xiàn)的圖標(biāo)強(qiáng)調(diào)簡(jiǎn)潔、一致和易識(shí)別性,如圖所示。3.圖標(biāo)樣式3.3.2 設(shè)計(jì)制作規(guī)范在同一個(gè)App 中出現(xiàn)的小圖標(biāo)應(yīng)該是一套的,就是說(shuō)它們的透視角

27、度、表達(dá)形式、附加元素等應(yīng)該一致,不需要刻畫太多的細(xì)節(jié),要提煉出最易識(shí)別的部分構(gòu)成圖標(biāo)的形狀。這些圖標(biāo)除了能夠濃縮文字信息外,還起到了美化界面的作用,是界面設(shè)計(jì)中不可缺少的部分,如圖所示。3.圖標(biāo)樣式3.1 界面設(shè)計(jì)概述3.2 界面設(shè)計(jì)分類3.3 界面設(shè)計(jì)規(guī)范目錄 CONTENTS3.4 界面設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)3.4.1 設(shè)計(jì)思路界面設(shè)計(jì),一般分為原創(chuàng)設(shè)計(jì)和優(yōu)化設(shè)計(jì)兩部分。原創(chuàng)設(shè)計(jì)是從零開(kāi)始,對(duì)界面進(jìn)行設(shè)計(jì)制作;優(yōu)化設(shè)計(jì)是在已有界面設(shè)計(jì)的基礎(chǔ)上,提出修改或改進(jìn)意見(jiàn),進(jìn)行二次設(shè)計(jì)。本項(xiàng)目是對(duì)“智力題大考問(wèn)”這款A(yù)pp 進(jìn)行的基于iOS 系統(tǒng)(iPhone 6/7/8 屏幕尺寸)的原創(chuàng)設(shè)計(jì)。該款A(yù)pp

28、是休閑益智類的應(yīng)用程序,通過(guò)智力題問(wèn)答、與朋友分享的形式增強(qiáng)娛樂(lè)性。3.4.1 設(shè)計(jì)思路主題層的顏色定義為UI 界面中最常用的藍(lán)色,這種顏色會(huì)增強(qiáng)用戶的信賴感,也會(huì)給人以冷靜、有智慧的感覺(jué)。輔助層、提醒層的顏色信息如圖所示。閱讀層使用灰度顏色,字體為微軟雅黑。3.4.2 主界面設(shè)計(jì)制作(1)打開(kāi)Photoshop 軟件,新建文件,文件的寬為750px,高為1334px,分辨率為72ppi。(2)在制作之前,參照iOS 系統(tǒng)規(guī)范,用參考線將畫布進(jìn)行分割。狀態(tài)欄高為40px,標(biāo)題欄高為88px,標(biāo)簽欄高為98px。左右各留出18px邊距,如右圖所示。3.4.2 主界面設(shè)計(jì)制作(3)使用“矩形”工具

29、,繪制狀態(tài)欄、標(biāo)題欄區(qū)域,填充主題層顏色(R:23,G:167,B:254)。雖然兩處的顏色一致,但為了后期方便控件的對(duì)齊,建議分別繪制和填充,如右圖所示。3.4.2 主界面設(shè)計(jì)制作(4)參看iPhone 手機(jī)的狀態(tài)欄,繪制狀態(tài)欄處的控件,包括信號(hào)、時(shí)間、電池等,如右圖所示。在繪制過(guò)程中,要注意各控件的位置和分布,要水平居中對(duì)齊。3.4.2 主界面設(shè)計(jì)制作(5)在“編輯” “首選項(xiàng)”菜單中,將文字單位修改為“像素”,如下圖所示。3.4.2 主界面設(shè)計(jì)制作(6)制作標(biāo)題欄處的文字和控件。文字大小為34px,在標(biāo)題欄中水平、垂直居中顯示。右側(cè)的圖標(biāo)大小為44px44px,放置在標(biāo)題欄右側(cè),注意其與

30、標(biāo)題欄上、右、下的距離要一致,如圖所示。(7)使用“矩形選框”工具繪制標(biāo)簽欄處的形狀,填充淺灰色(R:248,G:248,B:248),為其設(shè)置描邊的圖層樣式,描邊寬度為1px,顏色為深灰色(R:134,G:134,B:134)。3.4.2 主界面設(shè)計(jì)制作(8)設(shè)計(jì)3個(gè)標(biāo)簽,分別為“首頁(yè)” “發(fā)現(xiàn)”和“我”,并為每個(gè)標(biāo)簽設(shè)計(jì)一個(gè)小圖標(biāo),如圖所示,圖標(biāo)的大小為50px50px,文字大小為20px。需要注意的是,3個(gè)標(biāo)簽要將標(biāo)簽欄處三等分,才會(huì)讓視覺(jué)效果達(dá)到最佳。同時(shí),首頁(yè)標(biāo)簽的顏色與主題層顏色一致,表明了首頁(yè)為當(dāng)前界面。3.4.2 主界面設(shè)計(jì)制作(6)制作標(biāo)題欄處的文字和控件。文字大小為34px

31、,在標(biāo)題欄中水平、垂直居中顯示。右側(cè)的圖標(biāo)大小為44px44px,放置在標(biāo)題欄右側(cè),注意其與標(biāo)題欄上、右、下的距離要一致,如圖所示。(7)使用“矩形選框”工具繪制標(biāo)簽欄處的形狀,填充淺灰色(R:248,G:248,B:248),為其設(shè)置描邊的圖層樣式,描邊寬度為1px,顏色為深灰色(R:134,G:134,B:134)。3.4.2 主界面設(shè)計(jì)制作(9)制作界面內(nèi)容區(qū)域部分,繼續(xù)使用參考線做分割。將界面分為“熱門推薦”和“全部分類”兩部分,如圖所示。文字大小為24px,顏色為深灰色(R:134,G:134,B:134)。3.4.2 主界面設(shè)計(jì)制作(10)使用“圓角矩形”工具,繪制144px144

32、px大小、圓角半徑為20px 的圓角矩形,制作右圖所示的“熱門推薦”部分的分類。為每個(gè)分類設(shè)計(jì)一個(gè)小圖標(biāo),并添加文字內(nèi)容,文字大小為20px。(如果分類內(nèi)容多,我們會(huì)讓最后一個(gè)圖形顯示一半,表示該處內(nèi)容可以向左滑動(dòng)繼續(xù)查看。)3.4.2 主界面設(shè)計(jì)制作(11)“全部分類”部分的內(nèi)容使用列表式的界面布局方式制作。使用“圓角矩形”工具繪制列表的形狀,高為120px,圓角半徑為10px,填充顏色為淺灰色(R:248,G:248,B:248)。并為其設(shè)置描邊的圖層樣,描邊寬度為1px,顏色為深灰色(R:134,G:134,B:134),如右上圖所示。(12)將這個(gè)列表按照同樣的間距向下復(fù)制,直到標(biāo)簽欄

33、處。為了顯示還有更多的列表,會(huì)將最后一個(gè)列表做成只顯示一小部分的效果,如右下圖所示。3.4.2 主界面設(shè)計(jì)制作(13)根據(jù)分類信息,在列表上制作圖標(biāo)和文字信息,如圖所示,左側(cè)圖標(biāo)大小為50px50px,文字大小為32px,顏色為深灰色(R:134,G:134,B:134)。在列表右側(cè),添加方向向右的三角符號(hào),表示單擊該列表可以進(jìn)行界面的跳轉(zhuǎn)。3.4.2 主界面設(shè)計(jì)制作(14)以此方法,可以完成其他列表的制作,如右上圖所示。(15)在標(biāo)簽欄中添加兩個(gè)提醒標(biāo)記,顏色為提醒色。這樣,我們就完成了主界面的制作,最終效果如右下圖所示。3.4.3 詳情界面設(shè)計(jì)制作1. 編輯界面的制作(1)制作設(shè)置界面???/p>

34、以將前面完成的主界面另存為“設(shè)置界面”文件,保留界面中的狀態(tài)欄、標(biāo)簽欄,將標(biāo)題欄處的文字改為“設(shè)置”,右側(cè)的圖標(biāo)刪除,如圖所示。3.4.3 詳情界面設(shè)計(jì)制作1. 編輯界面的制作(2)該設(shè)置界面的啟動(dòng)按鈕位于主界面標(biāo)題欄的右側(cè),單擊啟動(dòng)按鈕進(jìn)入該界面后,應(yīng)該有用于回到主界面的返回按鈕。所以,我們?cè)跇?biāo)題欄的左側(cè)添加用于返回的圖標(biāo),如圖所示。3.4.3 詳情界面設(shè)計(jì)制作1. 編輯界面的制作(3)將背景層填充淺灰色(R:243,G:243,B:243)。使用參考線對(duì)界面進(jìn)行分割,制作列表式的界面,如圖所示。列表的高度為96px,根據(jù)功能對(duì)其進(jìn)行分組,每組間的距離為40px。3.4.3 詳情界面設(shè)計(jì)制作

35、1. 編輯界面的制作(4)按照參考線,使用“矩形選框”工具繪制列表形狀,將其填充為白色,描邊為1px,顏色為深灰色(R:134,G:134,B:134),如圖所示。3.4.3 詳情界面設(shè)計(jì)制作1. 編輯界面的制作(5)給每個(gè)列表添加文字信息,文字的大小為34px,顏色為黑色。在列表的右側(cè)添加用于界面跳轉(zhuǎn)的圖標(biāo),用開(kāi)關(guān)控制的功能在列表右側(cè)添加設(shè)置開(kāi)關(guān),如圖3-75所示。3.4.3 詳情界面設(shè)計(jì)制作1. 編輯界面的制作(6)在列表的右側(cè)添加相關(guān)的文字信息,文字的大小為30px,顏色為深灰色(R:134,G:134,B:134)。至此,完成了編輯界面最終效果的制作,如圖所示。3.4.3 詳情界面設(shè)計(jì)

36、制作2. 查看界面的制作(1)制作答題界面。將設(shè)置頁(yè)面另存為“答題”頁(yè)面,去掉下面標(biāo)簽欄部分,將標(biāo)題欄處的文字改為“偵探推理”,在標(biāo)題欄右側(cè)添加用于更多選項(xiàng)的圖標(biāo),如圖所示。3.4.3 詳情界面設(shè)計(jì)制作2. 查看界面的制作(2)使用參考線分割畫布。題目處高為100px,題干處高為340px,各答案處高為96px,每部分間距為40px,如圖所示。3.4.3 詳情界面設(shè)計(jì)制作2. 查看界面的制作(3)在題目部分,繪制70px70px 的圓形,顏色填充為橙色(R:228,G:126,B:44),制作標(biāo)題數(shù)字。同時(shí)在右側(cè)繪制用于分享的圖標(biāo),大小為44px44px,如圖所示。3.4.3 詳情界面設(shè)計(jì)制作2. 查看界面的制作(4)制作題干部分,文字大小為30px,顏色為黑色。要注意文字的排版和對(duì)齊,在空間內(nèi)做好布局,如圖所示。3.4.3 詳情界面設(shè)計(jì)制作2. 查看界面的制作(5)制作答案部分,將答案部分做成帶有復(fù)選框的形式,如圖 所示。文字

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論