`INTERFACE

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

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

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

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

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

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

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

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

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

導(dǎo)航欄132px下(249px)：標簽欄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)過計算，新建一個圖層。創(chuàng)建一個矩形（矩形的數(shù)值997*2436px,參考左圖【例】，選用64px為例）2、選擇矩形、填色?！睂ο蟆窂健指顬榫W(wǎng)格“，設(shè)置同份文件內(nèi)設(shè)計多個界面創(chuàng)建畫板1、在“畫板”的面板中進行“新建”——空白的畫布2、shift+o（這個是英文字母O）,進入“面板”編輯模式，再點“ALT”復(fù)制面板——復(fù)制了前一塊面板。如何批量導(dǎo)出界面1、導(dǎo)出前需先修改好畫板名稱2、文件——導(dǎo)出——導(dǎo)出為——/news/ultimate-guide-to-iphone-resolutionsiPhone分辨率終極指南規(guī)范參考APPLE人機界面準則/design/human-interface-guidelines/materiadesign界面準則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è)界面臨摹

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