火星網校
四海方城用實戰(zhàn)案例告訴你如何從零開始設計UI界面
發(fā)布時間：2023-12-28 09:09:42 瀏覽量：217次
怎樣在確保根本的可用性和易用性的一起，讓界面柔軟、富有親和力？如何在讓用戶愉悅的一起，還能用設計取悅自己？四海方城威客網的辦法談不上有多神奇，可是讓人眼前一亮，值得借鑒。
真的重視趨勢改變，你會清晰地感受到，視覺作用和設計技巧一直在變……它們一直是設計師們的論題中心。可是這篇文章并不計劃評論這個事兒，無論突變是否盛行，新擬物化的可拜訪性是否不足，都不在今天的評論規(guī)模內。
對于各種風格、辦法，四海方城威客網的觀念一直是：做出來的設計要可用，有用，有杰出的可拜訪性，用戶能夠輕松了解，就行了。不過，我更樂于從趨勢中取得樂趣，而不是將它視作為約束，假如每個界面看起來都是相同的，那該是一件多么無聊的工作啊。
關鍵在于，要讓產品的視覺款式和你的用戶群體匹配起來。
我個人十分喜愛美麗的突變和奇妙的暗影，這樣的設計常常顯得魅力特殊。這種天然的過渡和光影的改變，十分貼合我們對于實際國際的感知，這就是為什么這樣的設計能夠俘獲很多沒有技能布景的用戶的心--因為它們看起來友愛，而且易于了解。
四海方城威客網將分享如何將 UI 作用設計得出彩又友愛，讓視覺作用柔軟又讓人感覺舒適。本文圍繞著一個「面向年輕人的金融 APP」虛擬設計項目來進行展示。
下面我們開始吧！
1、視覺層次的一致性
怎么讓我們的設計看起來柔軟圓潤呢？下面開始準備工作：
1）挑選想要運用的配色（想想運用柔軟的粉彩構成的布景主色調，搭配一個給人精美感的非必須色，以及一個抓人留意力的強調色。）
2）挑選合理的字體（我用的是 Brandon Grotesque，這是我最喜愛的字體，它滿意友愛，能夠營造有趣的氛圍，且具有杰出的可讀性）。接下來，給字體設計不同巨細和字重（最好不超越5種不同的款式）。其間，標題字體應該較大，正文字體較小，最小的字體用于細節(jié)出現(xiàn)。留意，盡量不要在長語句里邊運用全大寫。
3）確認你所需求的暗影的高程（Height）和含糊度。
4）假如運用的是圖標，確認運用填充款式仍是描邊款式。盡量不要混用。
至此，一個小型的設計體系就已經確認了。
2、給UI元素營造柔軟夢幻的氛圍
在設計界面的時分留意，鋒利的邊緣會讓界面看起來嚴厲而專業(yè)，圓角則會顯得充溢親和力。
天然彌散的暗影也會讓設計看起來滿意精巧，所以當我們向元素增加暗影的時分，會強化視覺層次。不同的暗影作用，給人的「高程」上的感覺也不相同。
暗影較深的元素會顯得距離布景更近一些，暗影較淺，彌散規(guī)模更大，則顯得高程更高，距離底部布景更遠。這就是為什么很少會有元素產生較深的暗影，因為太多就會顯得不夠天然。
挑選元素并賦予它們以一定的含糊作用是一個需求不斷嘗試的過程。不過不要懼怕，這就是一個調整參數(shù)的小游戲。下面是我設計界面的時分的一些參數(shù)設置。
假如要讓暗影看起來愈加共同，盡可能讓暗影和遠景元素運用同色相的色彩，然后下降不透明度。抱負情況下，布景也應該有相似的色調。
3、讓突變看起來愈加平滑細膩
為了讓突變看起來愈加舒適，我們能夠從同一個配色方案中挑選比較激烈的色彩，甚至也能夠是同一色系的色彩，稍微調理一下它的亮度就能夠了。
然后重新拉伸一下突變，讓色彩過渡變得愈加平滑。雖然這樣的突變簡直看不清楚，可是元素看起來會有顯著的凹凸感。
對于白色的元素，你能夠選取和布景相近的色彩來制造暗影，只需確保比照度，不會相融就能夠了。
4、挑選和布景匹配的正確字體
在字體配色上，黑色和灰色是最經典的挑選?？墒羌偃缫屪煮w和整個設計在視覺上堅持同一和諧，你還需求往其間注入一些別的色彩，讓它和整體融合度更高。比方這里用的綠色的布景，那么能夠在其間參加一點綠色的色調，這樣就和諧了很多。
5、增加讓項目更具吸引力的細節(jié)元素
有些細節(jié)可能是沒有必要的。可是對我個人而言，我十分喜愛引人入勝的小細節(jié)，通過這些「額外」的設計細節(jié)，讓人感受到不相同和愉悅感。
假設你的頁頭是一個煩悶單調的形狀，那么不妨讓它柔軟一點，加一個小三角，然后它就變成了一個對話框氣泡，界面和用戶之間的對話感就產生了。
假如布景是單調的白色，能夠參加一些愈加富有娛樂性的底紋，它能夠精約的圖標，也能夠是其他。你能夠簡略地復制粘貼同一個元素，調整巨細和視點，只需不影響遠景的可讀性即可。
感覺單純的數(shù)據(jù)展示很無聊？那么能夠增加一些小圖標，來進行區(qū)分、說明和展示。
盡可能地讓你的界面看起來愈加有趣、富有構思。假如你不知道要怎么辦，能夠用實際生活中的物品或許設計作為靈感來歷。
最終，調整用戶頭像的細節(jié)
這個步驟一般而言是徹底沒有必要的……可是我每次都會在這件工作上花費不少時間進行調整，這可能是強迫癥吧。
我會給自己的樣機挑選一個滿意美麗的用戶頭像，可是她的妝容和整個 UI 界面的配色可能是不匹配的，這對于我這樣一個完美主義者而言是……難以接受的。
所以我總會額外花費一點時間來微調一下妝容來滿意我的「強迫癥」。比方這個案例傍邊，我會從界面取色，將頭像中原本棕色的瞳孔微調成為綠色的「美瞳」，在頭像上新建一個圖層，借用 PS 的混合模式給瞳孔增加色彩（不透明度50%）。
總而言之，UI界面設計的核心一直仍是遵從一致性、可用性和杰出的可拜訪性?？墒窃谧駨倪@些規(guī)則的前提之下，盡可能地發(fā)揮自己的想象力，創(chuàng)建讓自己也讓用戶感到歡喜的用戶體會，發(fā)揮構思，這樣的 UI 界面會讓人愛不釋手！
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
-
9. 物聯(lián)網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
10. 武漢UI設計培訓班費用怎么樣？想學UI設計要多少錢？
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
