激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

四海方城用實(shí)戰(zhàn)案例告訴你如何從零開始設(shè)計(jì)UI界面

發(fā)布時(shí)間：2023-12-28 09:09:42 瀏覽量：215次

　　怎樣在確保根本的可用性和易用性的一起，讓界面柔軟、富有親和力？如何在讓用戶愉悅的一起，還能用設(shè)計(jì)取悅自己？四海方城威客網(wǎng)的辦法談不上有多神奇，可是讓人眼前一亮，值得借鑒。

　　真的重視趨勢(shì)改變，你會(huì)清晰地感受到，視覺作用和設(shè)計(jì)技巧一直在變……它們一直是設(shè)計(jì)師們的論題中心?？墒沁@篇文章并不計(jì)劃評(píng)論這個(gè)事兒，無論突變是否盛行，新擬物化的可拜訪性是否不足，都不在今天的評(píng)論規(guī)模內(nèi)。


　　對(duì)于各種風(fēng)格、辦法，四海方城威客網(wǎng)的觀念一直是：做出來的設(shè)計(jì)要可用，有用，有杰出的可拜訪性，用戶能夠輕松了解，就行了。不過，我更樂于從趨勢(shì)中取得樂趣，而不是將它視作為約束，假如每個(gè)界面看起來都是相同的，那該是一件多么無聊的工作啊。


　　關(guān)鍵在于，要讓產(chǎn)品的視覺款式和你的用戶群體匹配起來。


　　我個(gè)人十分喜愛美麗的突變和奇妙的暗影，這樣的設(shè)計(jì)常常顯得魅力特殊。這種天然的過渡和光影的改變，十分貼合我們對(duì)于實(shí)際國際的感知，這就是為什么這樣的設(shè)計(jì)能夠俘獲很多沒有技能布景的用戶的心--因?yàn)樗鼈兛雌饋碛褠郏乙子诹私狻?/span>

　　四海方城威客網(wǎng)將分享如何將 UI 作用設(shè)計(jì)得出彩又友愛，讓視覺作用柔軟又讓人感覺舒適。本文圍繞著一個(gè)「面向年輕人的金融 APP」虛擬設(shè)計(jì)項(xiàng)目來進(jìn)行展示。


　　下面我們開始吧！


　　1、視覺層次的一致性


　　怎么讓我們的設(shè)計(jì)看起來柔軟圓潤(rùn)呢？下面開始準(zhǔn)備工作：


　　1）挑選想要運(yùn)用的配色（想想運(yùn)用柔軟的粉彩構(gòu)成的布景主色調(diào)，搭配一個(gè)給人精美感的非必須色，以及一個(gè)抓人留意力的強(qiáng)調(diào)色。）


　　2）挑選合理的字體（我用的是 Brandon Grotesque，這是我最喜愛的字體，它滿意友愛，能夠營造有趣的氛圍，且具有杰出的可讀性）。接下來，給字體設(shè)計(jì)不同巨細(xì)和字重（最好不超越5種不同的款式）。其間，標(biāo)題字體應(yīng)該較大，正文字體較小，最小的字體用于細(xì)節(jié)出現(xiàn)。留意，盡量不要在長(zhǎng)語句里邊運(yùn)用全大寫。


　　3）確認(rèn)你所需求的暗影的高程（Height）和含糊度。


　　4）假如運(yùn)用的是圖標(biāo)，確認(rèn)運(yùn)用填充款式仍是描邊款式。盡量不要混用。

　　至此，一個(gè)小型的設(shè)計(jì)體系就已經(jīng)確認(rèn)了。


　　2、給UI元素營造柔軟夢(mèng)幻的氛圍


　　在設(shè)計(jì)界面的時(shí)分留意，鋒利的邊緣會(huì)讓界面看起來嚴(yán)厲而專業(yè)，圓角則會(huì)顯得充溢親和力。

　　天然彌散的暗影也會(huì)讓設(shè)計(jì)看起來滿意精巧，所以當(dāng)我們向元素增加暗影的時(shí)分，會(huì)強(qiáng)化視覺層次。不同的暗影作用，給人的「高程」上的感覺也不相同。


　　暗影較深的元素會(huì)顯得距離布景更近一些，暗影較淺，彌散規(guī)模更大，則顯得高程更高，距離底部布景更遠(yuǎn)。這就是為什么很少會(huì)有元素產(chǎn)生較深的暗影，因?yàn)樘嗑蜁?huì)顯得不夠天然。

　　挑選元素并賦予它們以一定的含糊作用是一個(gè)需求不斷嘗試的過程。不過不要懼怕，這就是一個(gè)調(diào)整參數(shù)的小游戲。下面是我設(shè)計(jì)界面的時(shí)分的一些參數(shù)設(shè)置。

　　假如要讓暗影看起來愈加共同，盡可能讓暗影和遠(yuǎn)景元素運(yùn)用同色相的色彩，然后下降不透明度。抱負(fù)情況下，布景也應(yīng)該有相似的色調(diào)。

　　3、讓突變看起來愈加平滑細(xì)膩


　　為了讓突變看起來愈加舒適，我們能夠從同一個(gè)配色方案中挑選比較激烈的色彩，甚至也能夠是同一色系的色彩，稍微調(diào)理一下它的亮度就能夠了。


　　然后重新拉伸一下突變，讓色彩過渡變得愈加平滑。雖然這樣的突變簡(jiǎn)直看不清楚，可是元素看起來會(huì)有顯著的凹凸感。

　　對(duì)于白色的元素，你能夠選取和布景相近的色彩來制造暗影，只需確保比照度，不會(huì)相融就能夠了。


　　4、挑選和布景匹配的正確字體


　　在字體配色上，黑色和灰色是最經(jīng)典的挑選?？墒羌偃缫屪煮w和整個(gè)設(shè)計(jì)在視覺上堅(jiān)持同一和諧，你還需求往其間注入一些別的色彩，讓它和整體融合度更高。比方這里用的綠色的布景，那么能夠在其間參加一點(diǎn)綠色的色調(diào)，這樣就和諧了很多。

　　5、增加讓項(xiàng)目更具吸引力的細(xì)節(jié)元素


　　有些細(xì)節(jié)可能是沒有必要的?？墒菍?duì)我個(gè)人而言，我十分喜愛引人入勝的小細(xì)節(jié)，通過這些「額外」的設(shè)計(jì)細(xì)節(jié)，讓人感受到不相同和愉悅感。


　　假設(shè)你的頁頭是一個(gè)煩悶單調(diào)的形狀，那么不妨讓它柔軟一點(diǎn)，加一個(gè)小三角，然后它就變成了一個(gè)對(duì)話框氣泡，界面和用戶之間的對(duì)話感就產(chǎn)生了。

　　假如布景是單調(diào)的白色，能夠參加一些愈加富有娛樂性的底紋，它能夠精約的圖標(biāo)，也能夠是其他。你能夠簡(jiǎn)略地復(fù)制粘貼同一個(gè)元素，調(diào)整巨細(xì)和視點(diǎn)，只需不影響遠(yuǎn)景的可讀性即可。

　　感覺單純的數(shù)據(jù)展示很無聊？那么能夠增加一些小圖標(biāo)，來進(jìn)行區(qū)分、說明和展示。


　　盡可能地讓你的界面看起來愈加有趣、富有構(gòu)思。假如你不知道要怎么辦，能夠用實(shí)際生活中的物品或許設(shè)計(jì)作為靈感來歷。


　　最終，調(diào)整用戶頭像的細(xì)節(jié)


　　這個(gè)步驟一般而言是徹底沒有必要的……可是我每次都會(huì)在這件工作上花費(fèi)不少時(shí)間進(jìn)行調(diào)整，這可能是強(qiáng)迫癥吧。


　　我會(huì)給自己的樣機(jī)挑選一個(gè)滿意美麗的用戶頭像，可是她的妝容和整個(gè) UI 界面的配色可能是不匹配的，這對(duì)于我這樣一個(gè)完美主義者而言是……難以接受的。


　　所以我總會(huì)額外花費(fèi)一點(diǎn)時(shí)間來微調(diào)一下妝容來滿意我的「強(qiáng)迫癥」。比方這個(gè)案例傍邊，我會(huì)從界面取色，將頭像中原本棕色的瞳孔微調(diào)成為綠色的「美瞳」，在頭像上新建一個(gè)圖層，借用 PS 的混合模式給瞳孔增加色彩（不透明度50%）。

　　總而言之，UI界面設(shè)計(jì)的核心一直仍是遵從一致性、可用性和杰出的可拜訪性?？墒窃谧駨倪@些規(guī)則的前提之下，盡可能地發(fā)揮自己的想象力，創(chuàng)建讓自己也讓用戶感到歡喜的用戶體會(huì)，發(fā)揮構(gòu)思，這樣的 UI 界面會(huì)讓人愛不釋手！

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定