UI網頁設計不同于網站建設,網站建設只是通過程序源代碼實現網站功能,UI設計體現在視角上。兩者相輔相成,就會成為網站建設的核心。深圳網站建設公司會配備專業的專職設計師,可能在設計師的需求上有創意。但是,當我們真正做一個項目或者項目的時候,就會發現“藝術家不需要創新,需要運用技巧。”優秀的設計成果離不開技巧的運用,技巧的運用才能襯托出設計之美。
廣州建站公司根據UI網頁設計的實踐經驗和總結,旨在提高網頁的視覺效果,增強網站的高層次感。它對網頁的設計層次、字體、結構、對比度、透明度等諸多因素進行比較和調整。具體可分為以下幾點:
1.使用顏色和文字來創建層次結構,而不是簡單的大小對比
在控制UI文字的風格時,最常見的錯誤就是過分依賴字號差異來營造對比。
簡單實用的字體大小對比所創造的對比是不夠的,所以盡量結合顏色和單詞重復來創造更好的對比效果。
如果可以,你甚至可以使用兩種或三種顏色:
(1)主要內容采用深色(如標題,但不使用純黑色)
(2)次要內容為灰色(如文章發表日期)
(3)輔助內容為淺灰色(如頁腳版權聲明)
同樣,在UI設計中,通常兩個不同的詞權重就足以創造出優秀的層次感:
(1)大多數文本使用正常的單詞權重(400到500,取決于字體)
(2)對于需要強調的單詞,使用較重的單詞(600到700,取決于字體)
盡量不要讓正文部分的重量小于400,因為這個部分的字體大小已經很小了,小于400會使可讀性變差。如果還需要降低字重,不妨將字體做得更輕一些,或者換成其他識別性強、字重相對較小的字體。
2.不要在彩色背景上使用灰色文字
在白色背景下將黑色文字改為灰色是淡化其視覺效果的好方法,但在彩色背景下這樣做是另一回事。
事實上,在白色背景上將文本從黑色更改為灰色實際上會降低對比度。
但是在彩色背景中,如果要降低對比度,就要逐漸使文字接近背景顏色,而不是改成灰色。
通常有兩種方法可以降低和背景色之間的對比度:
(1)降低白色文本的不透明度
降低不透明度可以使背景顏色更加透明,并以不沖突的方式降低前景文本和背景之間的對比度。(2)根據背景顏色手動選擇文本的顏色
當背景為圖像或圖案時,半透明的文字會影響可讀性。此時,最好根據背景的主色選擇相應的文字顏色。
(3)陰影設計
與使用大范圍漫反射模糊陰影相比,使用細微的垂直偏移陰影更加明顯和自然。它模擬了最常見的光源特征所產生的陰影效果,即光線從上到下照射。
如果你對此感興趣,《材料設計指南》清楚地解釋了制作這種陰影的細節。
4.盡可能少使用邊框
Box模型是網頁前最常用的工具。當您需要在兩個元素之間創建分隔時,請盡量避免兩個邊界之間的直接接觸。
雖然Border是分隔兩個元素的好方法,但不是唯一的方法。使用過多會降低整個布局的設計感,甚至造成混亂。
所以你可以嘗試以下方法來避免它:
(1)使用框陰影
框影還可以營造出一種邊界感,更加微妙,不顯得突兀,也不分散用戶的注意力。
(2)用不同的背景顏色來區分
通常,相鄰元素的背景只能通過細微的差異來區分。所以,你需要做的是在不同的塊中使用不同的背景顏色,并嘗試刪除邊框,因為你根本不需要它。
(3)添加額外的空格
要創建元素之間的分離效果,不一定要用線框來表示,只需添加空白來分隔即可。通過空格和間距實現元素分組是UI設計中常見的技術。
5.不要讓小圖標無故放大
當您設計登錄頁面時,您可能會突出產品的功能。這個時候,你需要一些大圖標作為視覺錨。這個時候你可以去Font Awesome或者Zondicons之類的網站上找一些免費的矢量圖標,然后放大到你需要的大小。
它們是矢量圖標,所以可以放大而不會丟失。而一個通常只有1616的圖標,放大三四倍。雖然沒有損壞,但是視覺上還是相當不專業的:缺少細節,總覺得太矮胖。
然而,如果這些小圖標是你能得到的唯一材料,試著把它們放在另一個彩色圖形中:
這種設計不僅可以讓圖標達到預期的視覺體積,還可以讓它看起來比簡單的放大更詳細。當然,如果你沒有足夠的錢,最好買一些大尺寸高質量的圖標,比如Heroicons或者Iconic。6.添加帶有顏色的單側邊框,增強個性
當然,你可能不是一個有足夠平面設計經驗的設計師,但它能讓你設計的界面有足夠的視覺感染力。
最簡單的方法就是在界面的邊框一側添加單色甚至漸變邊框,可以讓平淡的界面一下子活起來。
例如,在警告彈出框的一側:
或者在導航欄底部顯示觸發器:
或者在整個頁面的頂部:
這并不需要任何平面設計經驗,但會明顯加強設計感。
退一萬步說,你不知道選什么顏色。很簡單。只需要在Dribbble的顏色搜索里找一些好看的顏色,其實就夠了。
7.不是每個按鈕都需要顏色
在許多情況下,按鈕本身所處的上下文和按鈕上的文本內容令人困惑。BootStrap之類的框架允許設計者根據上下文和語義進行選擇:
“這是正面操作?讓這個按鈕變成綠色?!?/p>
“這是刪除數據嗎?然后把按鈕設置成紅色。”
的確,語義和按鈕本身的設計息息相關,但是還有一個更重要的維度被忽略了,那就是層次。
網頁上的每一個操作實際上都位于整個交互金字塔的某個地方。事實上,大多數頁面只有一個主要操作,一些不重要的次要操作,以及一些三級操作。
在設計這些交互時,通過層次結構來展示這些交互的重要性是非常重要的。
(1)主要操作應明顯。需要使用純色和高對比度的按鈕。
(2)二次操作要明顯,但不突出。使用鬼影按鈕或與背景對比度低的顏色是合理的。
(3)三級操作應該是可發現的,但不明顯。它們最好設計成鏈接。
“破壞性交互涉及的按鈕不應該是紅色的嗎?”
沒必要!如果破壞性交互涉及的按鈕不是主操作,那就讓它按照二級操作甚至三級操作的按鈕來設計。
真正有效的UI設計需要滿足用戶和網民的需求。網站維護是在網站建設的基礎上完成的,網站建設離不開UI設計。因此,掌握以上技巧并運用到設計中輔助網站建設,會讓用戶對網站的體驗和超前感更加滿意。