《UI設(shè)計(jì)》課件-2. 界面基礎(chǔ)之頁(yè)面

`INTERFACE

DESIGN`界面設(shè)計(jì)基礎(chǔ)課程：頁(yè)面設(shè)計(jì)Ⅱ界面模式網(wǎng)站（WEB）與應(yīng)用程序(APP)都是為了“表達(dá)某些內(nèi)容”，通過“鏈接”可以把不同的元素相互串接起來(lái)，并能夠往返于各個(gè)元素之間?！版溄印碑a(chǎn)生了信息的相關(guān)性，即無(wú)論在網(wǎng)站還是應(yīng)用程序中，必須讓用戶時(shí)刻了解從何處來(lái)，到何處去。因此設(shè)計(jì)的關(guān)鍵必須放在一個(gè)重點(diǎn)上，就是:

“如何讓每個(gè)元素彼此相連”必須在各個(gè)信息的頁(yè)面之間建立關(guān)聯(lián)性，理解空間位置關(guān)系

分析智能物聯(lián)界面（工具類）：1、垂直：代表路徑深入，如一級(jí)→二級(jí)→三級(jí)目標(biāo)逐步聚焦.從“大類別”聚焦到“小個(gè)體”，如“home-livingroom-light”2、水平：代表功能平行、不同類別之間。信息級(jí)別等同。在二維空間中理解的“垂直”和“水平”，在三維空間中理解“前后”關(guān)系通過“視覺化”體現(xiàn)頁(yè)面的前后關(guān)系通過“視覺化”體現(xiàn)

頁(yè)面的前后關(guān)系

直接方式：顯示“從何而來(lái)”，如“返回”“返回上一頁(yè)”按鈕間接方式：網(wǎng)頁(yè)產(chǎn)生的“變化量”。

*變化量越大，用戶就覺得移動(dòng)的頁(yè)面與前面的頁(yè)面關(guān)聯(lián)性不強(qiáng)；*變化量越小時(shí)，頁(yè)面的相似度越高，用戶覺得只是移動(dòng)到了附近的頁(yè)面，頁(yè)面之間的關(guān)聯(lián)性較強(qiáng)。通過視覺差異(變化量)

判斷當(dāng)前位置用戶知道“身在何處”，也可以明白自己能“移動(dòng)到哪個(gè)頁(yè)面”。視覺差異大致分為四種:(1)字體加粗（2）文字顏色變換（3）背景顏色，背景鋪色塊,如一些菜單（4）特殊符號(hào)，加注符號(hào)。用戶想要知道：

身在何處→想要去的地方→目的地用戶必須知道以下4點(diǎn)

才可輕松移動(dòng)現(xiàn)在位于哪個(gè)頁(yè)面？→頁(yè)面的標(biāo)題或者導(dǎo)航欄能說明這個(gè)頁(yè)面的內(nèi)容是什么？→標(biāo)題與內(nèi)容能說明從哪里來(lái)到這個(gè)頁(yè)面的?從這個(gè)頁(yè)面可以前往哪個(gè)頁(yè)面？→導(dǎo)航欄與內(nèi)容能說明/gp/product/B00AMAI1AO/ref=as_li_ss_tl?ie=UTF8&camp=536&creative=3132&creativeASIN=B00AMAI1AO&linkCode=as2&tag=book0a-23界面模式原型圖資料請(qǐng)查看wire_phoneAPP頁(yè)面設(shè)計(jì)與臨摹布局layout01WEB:三欄→兩欄→一欄PHONE:一欄(通過控件，出現(xiàn)2和3個(gè)頁(yè)面。正常情況是隱藏起來(lái))/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179px是相對(duì)單位（類似一個(gè)范圍內(nèi)，可容納越多的px，成像越清晰）pt為絕對(duì)單位（類似單位為厘米，毫米等等，是固定的單位不可變）。在不確定屏幕像素密度（ppi）的情況下，px與pt沒有任何可比性。/mobile-ui-measurement-guideline1PT等于1/72英寸1英寸是一個(gè)固定長(zhǎng)度，等于2.54厘米750x1334pxiPhone(6~7)屏幕寬（每行）有750個(gè)像素（發(fā)光點(diǎn)），高（每豎）有1334顆像素（發(fā)光點(diǎn)）。在PS等設(shè)計(jì)視覺圖，用該尺寸iPhoneX：Artboard渲染到屏幕對(duì)于iPhoneX，畫板的渲染速度是原來(lái)的3倍，因?yàn)樗腟uperRetina顯示屏的畫素比是3倍。最小尺寸的設(shè)計(jì)使我們能夠?qū)①Y產(chǎn)縮放到不同設(shè)備所需的不同尺寸，同時(shí)保持像素完美的渲染。因此，可以將@1x，@2x和@3x大小的1pt分別轉(zhuǎn)換為1、4或9像素。1倍：1pt=1dp=1px（mdpi、iPhone3gs）1.5倍：1pt=1dp=1.5px（hdpi）2倍：1pt=1dp=2px（xhdpi、iPhone4s/5/6）3倍：1pt=1dp=3px（xxhdpi、iPhone6）4倍：1pt=1dp=4px（xxxhdpi）iphone6plus單位真正決定顯示效果的，是邏輯像素尺寸。為此，iOS和Android平臺(tái)都定義了各自的邏輯像素單位。iOS的尺寸單位為pt，Android的尺寸單位為dp,兩者其實(shí)是一回事。單位之間的換算關(guān)系隨倍率變化：網(wǎng)絡(luò)上的網(wǎng)格不僅是布局的設(shè)計(jì)準(zhǔn)則，而且是限制和執(zhí)行跨視口和斷點(diǎn)放置元素的實(shí)際代碼。960GridSystem網(wǎng)頁(yè)設(shè)計(jì)60px20px960整除12列，每等分為80px，頁(yè)面的內(nèi)容區(qū)域由N個(gè)列和（N-1）個(gè)水槽（即間距）組成。在WEB端設(shè)計(jì)中，N的數(shù)值一般會(huì)采用12列、16列、24列80INTERFACEDESIGNOVERVIEW2018https://960.gs/如分辨率1920x1080。如果你用常用的12分欄，1920÷12=160（包括列寬和間隔，按照一般列寬：水槽=3：1,我們就可以定列寬為120，間隔為40。頁(yè)兩邊安全邊距是間隔的一半，就是20。這樣一個(gè)1920的柵格系統(tǒng)就基本出來(lái)了為自己設(shè)定一個(gè)“網(wǎng)格系統(tǒng)”的設(shè)計(jì)規(guī)范了解概念單元格/外邊距/水槽/列02網(wǎng)格系統(tǒng)里面最基本的元素“單元格”，即圖中黃顏色的區(qū)域。移動(dòng)端以8pt為最小單位，1單元格=8ptINTERFACEDESIGNOVERVIEW2018網(wǎng)格系統(tǒng)的概念網(wǎng)格系統(tǒng)的概念：列是存放內(nèi)容，水槽（間距）間開內(nèi)容（間距）1、外邊距（安全距離）數(shù)值越大頁(yè)面越寬松，反之亦然。2、列數(shù)越多，分割越多，移動(dòng)端不宜分割過多以750px為例Pinterest單元格為8pt那么所有用到的間距(橫的、豎的)尺寸將會(huì)是8px、16px、24px、32px、40px……IPHONE61334X750因此每個(gè)設(shè)計(jì)師都會(huì)有對(duì)網(wǎng)格理解及定義，團(tuán)隊(duì)協(xié)作需要的是統(tǒng)一格式，右邊是更符合程序規(guī)范的假如單元格為8px，那么所有用到的間距(橫的、豎的用黃色標(biāo)注出來(lái))尺寸將會(huì)是8px、16px、24px、32px、40px、48px、56px、64px、72px、80px、88px、96px、104px圖片來(lái)自文章《如何用網(wǎng)格系統(tǒng)設(shè)計(jì)出大師般的APP界面》出處：人人都是產(chǎn)品經(jīng)理作者：Tony練習(xí)layout網(wǎng)格03（1）新建IPHONEX尺寸（2）確定自己的產(chǎn)品與網(wǎng)格在移動(dòng)端設(shè)計(jì)中，列的數(shù)量不宜過多，列的數(shù)量越多，頁(yè)面就會(huì)被分割的越「碎」，在頁(yè)面設(shè)計(jì)時(shí)就會(huì)越難把控。外邊距：一般可設(shè)置24px(12pt)，32px(16pt)，64px(32pt)列：一般可設(shè)置4列，6列，8列，12列水槽：8的倍數(shù)*在WEB端設(shè)計(jì)中，列數(shù)一般會(huì)采用12、16、24這些數(shù)值iPhoneX的尺寸：右圖鏈接來(lái)自/design/142395.html尺寸：1125（寬）*2436（高）上(264px)：狀態(tài)欄132px

導(dǎo)航欄132px下(249px)：標(biāo)簽欄147px

虛擬HOME102px中：2436-264-249=1923px（3）設(shè)置網(wǎng)格（可利用插件GuideGuide）（也可利用網(wǎng)格分割方法）插件GuideGuide切換”可見“與”隱藏“參考線快捷鍵：ctrl+;（3）設(shè)置網(wǎng)格（可利用插件GuideGuide）（也可利用網(wǎng)格分割方法）網(wǎng)格分割方法：1、經(jīng)過計(jì)算，新建一個(gè)圖層。創(chuàng)建一個(gè)矩形（矩形的數(shù)值997*2436px,參考左圖【例】，選用64px為例）2、選擇矩形、填色。”對(duì)象——路徑——分割為網(wǎng)格“，設(shè)置同份文件內(nèi)設(shè)計(jì)多個(gè)界面創(chuàng)建畫板1、在“畫板”的面板中進(jìn)行“新建”——空白的畫布2、shift+o（這個(gè)是英文字母O）,進(jìn)入“面板”編輯模式，再點(diǎn)“ALT”復(fù)制面板——復(fù)制了前一塊面板。如何批量導(dǎo)出界面1、導(dǎo)出前需先修改好畫板名稱2、文件——導(dǎo)出——導(dǎo)出為——/news/ultimate-guide-to-iphone-resolutionsiPhone分辨率終極指南規(guī)范參考APPLE人機(jī)界面準(zhǔn)則/design/human-interface-guidelines/materiadesign界面準(zhǔn)則https://material.io/design/foundation-overview#spacing學(xué)UI網(wǎng)/優(yōu)設(shè)網(wǎng)/design/rule/design/142395.html/screen/ios.htm大作業(yè)界面臨摹

臨摹一組界面（每個(gè)類型臨摹1頁(yè)），熟悉界面模式及在AI中如何運(yùn)用網(wǎng)格設(shè)置