亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

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

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

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

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


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


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


　　我個人十分喜愛美麗的突變和奇妙的暗影，這樣的設計常常顯得魅力特殊。這種天然的過渡和光影的改變，十分貼合我們對于實際國際的感知，這就是為什么這樣的設計能夠俘獲很多沒有技能布景的用戶的心--因為它們看起來友愛，而且易于了解。

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


　　下面我們開始吧！


　　1、視覺層次的一致性


　　怎么讓我們的設計看起來柔軟圓潤呢？下面開始準備工作：


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


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


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


　　4）假如運用的是圖標，確認運用填充款式仍是描邊款式。盡量不要混用。

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


　　2、給UI元素營造柔軟夢幻的氛圍


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

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


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

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

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

　　3、讓突變看起來愈加平滑細膩


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


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

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


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


　　在字體配色上，黑色和灰色是最經(jīng)典的挑選。可是假如要讓字體和整個設計在視覺上堅持同一和諧，你還需求往其間注入一些別的色彩，讓它和整體融合度更高。比方這里用的綠色的布景，那么能夠在其間參加一點綠色的色調(diào)，這樣就和諧了很多。

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


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


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

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

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


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


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


　　這個步驟一般而言是徹底沒有必要的……可是我每次都會在這件工作上花費不少時間進行調(diào)整，這可能是強迫癥吧。


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


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

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

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定