2021-02-02 分類: 網(wǎng)站建設(shè)
很多初級網(wǎng)頁設(shè)計師,在初入行時,往往會有一些細(xì)節(jié)上的東西做不好,導(dǎo)致整個畫面看上去粗糙沒品質(zhì),這些細(xì)節(jié)可能是很細(xì)微的,很容易被設(shè)計師不重視或直接忽略掉,當(dāng)加起來有幾條細(xì)節(jié)沒有做好,你的作品的品質(zhì)已經(jīng)開始下降,所以要做好界面同時也要注重設(shè)計細(xì)節(jié)的處理。
今天分享10條實用的網(wǎng)頁設(shè)計設(shè)計干貨,里面提到很多關(guān)于網(wǎng)頁設(shè)計相關(guān)的微細(xì)節(jié),對于初入行的設(shè)計師都值得一看。
好的設(shè)計原則是可以很容易被大眾學(xué)習(xí)和實踐的。本文將介紹一些設(shè)計技巧相關(guān)的基礎(chǔ)知識,看完這些
說不定你今天就能用上!
如果你不確定自己適不適合做設(shè)計,請記住大神Dave Grohl關(guān)于學(xué)習(xí)新事物的看法:
我從未學(xué)過打鼓,也從未上過吉他課,我只是想做就去做了。我認(rèn)為,如果你對某件事充滿熱情,有動力,有專注力,就能做好你想做的任何事。 — Dave Grohl, Foo Fighters記住Grohls先生的話,準(zhǔn)備好開始今天的速成班了嗎?系好安全帶,老司機帶你飛:
背景與內(nèi)容之間的對比度應(yīng)該足夠適合閱讀,以免引起眼睛疲勞。通常,白色背景下的黑色文本是最容易讀的,盡量不要用淺灰色,黃色和綠色的文字。如果你自己做完設(shè)計稿,不得不瞇著眼睛才能看清,那就肯定是有問題了。
如果可以選擇,推薦使用#333333 RGB(51,51,51)而不是純黑色作為文字內(nèi)容。純黑色配上白色背景會讓眼睛產(chǎn)生視覺抖動,讓文字難以聚焦。
首頁的布局尤為重要,應(yīng)該要清楚的顯示應(yīng)用的主要功能。核心內(nèi)容應(yīng)該是顯而易見的,而不需要通過縮放,滾動或點擊等操作才能知曉。
讓我們一起來看看市面上把視覺層次結(jié)構(gòu)做的比較好的例子吧。
Instagram (下圖中的左邊) 核心功能是希望用戶上傳照片/視頻;Pinterest (下圖中的右邊) 的核心功能是發(fā)現(xiàn)和搜索靈感圖片,所以把搜索放在了頂部最顯著的位置。
再看看另外2個案例
Spotify (下面的左圖) 希望給音樂專輯更多的曝光,所以將播放頁面中的專輯封面放到大,將播放器控件放在第二重要位置;然后在第二重要的播放器控件中再進(jìn)行重要級拆分,結(jié)合用戶的實際需求頻率,把播放和暫停放大,快進(jìn)和快退縮小。
Facebook (下面的右圖) 看起來比較像Instagram,把朋友的內(nèi)容放在了核心位置上,因為社交是Facebook的核心業(yè)務(wù)。
當(dāng)看到一個設(shè)計不舒服的時候,首先應(yīng)該考慮到的就是對齊問題。當(dāng)設(shè)計師們在強調(diào)需要使用“網(wǎng)格”體系時,他們其實是在提醒團(tuán)隊注意對齊問題。
(譯者注:新手只要把對齊這個看似簡單的問題做好,設(shè)計就能提升一個檔次!很多新人會把設(shè)計元素故意調(diào)的歪七扭八,以此體現(xiàn)他們做了設(shè)計,我當(dāng)年剛?cè)腴T的時候也犯了這樣的錯誤。實際上,有規(guī)律的東西能形成美感,對齊不是一種禁錮,而是一種好的設(shè)計方式。)
調(diào)整好對齊問題是可以對任何網(wǎng)頁或應(yīng)用設(shè)計最行之有效的優(yōu)化設(shè)計手段之一,只要做好了,效果能立馬好上10倍以上。
看看另一個對齊問題,這個是medium的一個頁面。
這是我從Medium上找到的網(wǎng)頁設(shè)計布局——你覺得怎樣?(提示: 注意對邊邊緣的對齊情況。)
左圖,我突出顯示了由于對齊問題帶來的視覺流向,而在右側(cè),我只是將所有主要內(nèi)容進(jìn)行了左對齊。
左圖糟糕的對齊形式,右圖是調(diào)整后的對齊形式(點開圖片可以查看大圖)
我們并不是為螞蟻設(shè)計的。增大文字的尺寸和間距,能夠使得內(nèi)容更容易閱讀和消化。
大多數(shù)App或者網(wǎng)站都會用到搜索,關(guān)于如果排布具體的搜索結(jié)果一直存在一些爭議。
如果結(jié)果的排序很重要,那么使用列表視圖是最有效的。
如果順序無關(guān)緊要,而你希望你的應(yīng)用是鼓勵用戶去發(fā)現(xiàn)(比如Pinterest),則使用網(wǎng)格視圖更為合適。
使用黑白設(shè)計時,能更專注于解決和設(shè)計應(yīng)用的核心體驗。
而如果在做布局框架的同時,加入顏色,會引起一些情感上的干擾,會打斷我們專注于核心問題設(shè)計上的能力。(譯者注:先做交互,后做視覺,現(xiàn)在應(yīng)該大多數(shù)都是這么個流程吧。)
關(guān)于舒適的手勢體位確實是一個需要注意到的問題,關(guān)于這方面也有專門的研究文章,Luke列出了手機中最容易接觸和使用的區(qū)域(至少對于右手作為慣用手的人來說),其實我希望看到應(yīng)用中有一個設(shè)置,可以讓用戶從右手界面切換到左手界面。
大部分的App都將導(dǎo)航和核心操作放在手機的底部三分之一處。
顏色的使用一門技術(shù)活。我強烈推薦你在Dribbble上搜索“Color Palettes”,或者使用設(shè)計導(dǎo)航推薦的配色工具或者 Color Claim ,會有驚喜!為自己省下反復(fù)糾結(jié)的時間。
蘋果和谷歌都為開發(fā)者提供了大量的UI組件和規(guī)范。
比如,像谷歌就提供了規(guī)范,組件,配色,圖標(biāo)等等,幫助你實現(xiàn)快速設(shè)計和開發(fā)。
蘋果也提供了他們的人機交互規(guī)范。
最后記住,設(shè)計還需要大量的練習(xí)。
提高自己的審美和設(shè)計水平需要大量的時間和練習(xí),但如果運用好上面所寫的一些設(shè)計技巧,會讓你做出更好的設(shè)計。
文章名稱:10條網(wǎng)頁設(shè)計干貨,剛?cè)胄幸材茏龊迷O(shè)計!
文章路徑:http://m.rwnh.cn/news19/98719.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計、外貿(mào)建站、App開發(fā)、全網(wǎng)營銷推廣
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容