網(wǎng)頁設(shè)計的常見錯誤 - 首頁【譯】

原文地址:http://blog-en.tilda.cc/articles-website-design-mistakes

原作者:Nikita Obukhov

轉(zhuǎn)發(fā)請注明來源


首頁設(shè)計的常見錯誤

1. 頁面內(nèi)容未分成對應(yīng)的邏輯塊

當(dāng)頁面被分成明顯的邏輯塊時凡涩,會更加利于用戶閱讀拣帽。試試設(shè)置 120px - 180px 之間的間距,并用不同的背景色塊來區(qū)分不同的邏輯塊。

不同的邏輯塊之間只有一些小間距埃叭,并且沒有用不同的背景色來做區(qū)分,增加了用戶的閱讀成本饶碘,且用戶很難快速理解某一塊文本屬于哪個邏輯塊裆针;應(yīng)用了足夠大的間距和不同的背景色,高下立判跟狱;


2. 頁面元素之間的間距不對稱

邏輯塊應(yīng)該采用相同對稱的間距進(jìn)行包裹俭厚,否則頁面會看起來一片混亂,用戶不會留心觀看每個邏輯塊驶臊。

(譯:簡單來說就是會逼死強(qiáng)迫癥)

不同的高度除了不對稱挪挤,還會讓用戶以為頁面主體信息(原文指公司引導(dǎo)頁面的公司信息)與頂部相關(guān),而實際上我們設(shè)計的每個邏輯塊都應(yīng)該是一樣重要的关翎。


3. 太小的塊間距導(dǎo)致用戶無法將頁面內(nèi)容分成明顯的邏輯塊

使用至少 120px 以上的間距來分開不同的邏輯塊(每個塊的上扛门、下邊距,即padding)纵寝。

太窄的塊邊距使得塊之間靠得太近论寨,頁面看起來會有一種窒息感,且用戶會困惑于相鄰的文字是不是屬于同一邏輯塊爽茴;而足夠大的間距則有顯而易見的區(qū)分能力葬凳;


4. 避免圖片上的文字與圖片的對比度太低

文字與背景的背景的對比應(yīng)該足夠明顯,為了讓文字層更突出室奏,可以給背景色加上一層遮罩火焰,黑色是常用的遮罩顏色,但也可以試試混上明亮的顏色胧沫。

另一個方法是采用明暗對比明顯的圖片作為背景昌简,并把文案放在暗色部分的頂部。


背景色太亮绒怨,文字變得難以閱讀
添加了遮罩之后纯赎,文字變得很清晰


5. 單個頁面用了太多樣式

一個頁面上應(yīng)用了太多不同字體和設(shè)計風(fēng)格會有一種不專業(yè)感且難以閱讀。采用單種字體以及兩種字重(如粗體和正常)來避免這種情況南蹂。


太多的樣式使得頁面中的重點很混亂址否;而采用一種字體、一種顏色、兩種字重則使得頁面干凈佑附、整潔樊诺;


6. 色塊太窄

不要用色塊來強(qiáng)調(diào)太窄的頁面元素,比如說標(biāo)題在采用了大字體音同、粗體和上下間距后已經(jīng)足夠明顯了词爬,無需再畫蛇添足。當(dāng)你想突出頁面的某一部分的時候权均,不如直接為標(biāo)題和內(nèi)容部分整體添加一個統(tǒng)一的背景色塊顿膨。


色塊會打斷頁面的連續(xù)性,使得標(biāo)題與文字失去了聯(lián)系叽赊;為標(biāo)題和內(nèi)容同時添加背景色則不會有這個問題恋沃;


7. 在一個很窄的列里放置太多的文案

當(dāng)在很窄的列里放置了太多的文案,用戶不得不逐行閱讀從而增加了閱讀成本必指∧矣剑砍短啰嗦的文案吧,不然也沒人會去仔細(xì)看的塔橡。


難以閱讀的長梅割、多行文字;簡短易讀的文字葛家;


8. 居中文本過多

文本比較少的時候采用居中排版可以增加美感户辞,但是在文本內(nèi)容過度的情況下,用戶每次讀新的一行都要找一下下一行開始的位置癞谒。如果你真的有很多內(nèi)容底燎,可以把它們分成幾個塊,并用標(biāo)題來概括它們弹砚。


居中的長文本双仍;將居中長文本打散成幾個邏輯塊;


9. 文案與背景圖片的主體部分疊加

避免文案與圖片的主體或重要部分重疊迅栅,這會使得圖片與文字都變得難以辨認(rèn)殊校。試試改變文案的排版晴玖,比如居中读存、居左、垂直對齊呕屎。


標(biāo)題覆蓋了背景中女孩的臉让簿,太多不同的背景細(xì)節(jié)使得文字難以閱讀;圖片與文字都變得更加清楚秀睛,構(gòu)圖也更好看了尔当;


10. 主次不分

為了分清頁面中信息的主次,封面上的字體應(yīng)該大于或至少跟其他標(biāo)題的字體大小一樣,特別是標(biāo)題很長的時候椭迎。


頂部標(biāo)題比下文的標(biāo)題字體還小锐帜,下方的標(biāo)題反而更加突出了;頂部標(biāo)題大于其他標(biāo)題畜号,頁面顯得和諧缴阎;


這個原則同樣適用于邏輯塊里的主次設(shè)計。主標(biāo)題應(yīng)該是最大的简软,然后才是次標(biāo)題蛮拔。次標(biāo)題應(yīng)明顯小于主標(biāo)題,并采用相同的字重痹升,而次標(biāo)題下面的內(nèi)容應(yīng)該采用相對最小的字體大小建炫,這樣有助于用戶區(qū)分信息的重要性。


主標(biāo)題很明顯更重要疼蛾,但卻比次標(biāo)題的字號還懈氐;主標(biāo)題足夠突出据过,次標(biāo)題盡管沒有采用大字號惋砂,但也足夠明顯了;


11. 一個邏輯塊被切成了2部分

文字后面采用了全屏圖片或者滾動圖片绳锅,看起來像兩個相互獨立的部分西饵。如果在圖片或者滾動圖片周圍添加一些空白,它們就會自然地變成一個整體鳞芙,因為這時候能看到它們共同的背景色眷柔。


一個全屏的滾動圖片看起來從上面的內(nèi)容中脫離出來成為了一個獨立的部分;滾動圖片與頂部內(nèi)容共用了背景原朝,整個頁面組織更加合理驯嘱;


12. 標(biāo)題過大、過長

超大字體對于短文本很合適喳坠,但當(dāng)句子比較長的時候不妨換用小一點的字號鞠评,這樣會更利于閱讀,且不會占用太多其它元素的空間壕鹉。


標(biāo)題太大占據(jù)了整個封面剃幌,其他元素顯得很擁擠;適當(dāng)縮小標(biāo)題大小后晾浴,頁面看起來更舒服负乡,標(biāo)題與小文本都變得易于閱讀;


13. 濫用按鈕的邊框樣式

如果按鈕是透明的脊凰,那么添加邊框是很有必要的抖棘,否則就顯得沒什么道理,只會加重頁面的負(fù)擔(dān)且難以理解。


如圖切省;


14. 采用了太多的顏色

一個頁面采用過多的顏色顯得很混亂最岗,到底哪部分才是重要的?一到兩個顏色對于區(qū)分主次已經(jīng)足夠了朝捆。


太多的顏色顯得混亂仑性;一種非文本顏色的使用讓頁面看起來活潑,且不會使用戶分心右蹦;


15. 擁擠的導(dǎo)航欄

導(dǎo)航欄對于用戶導(dǎo)航和內(nèi)容查找很有幫助诊杆,但是不要過分地填充信息,這反而會讓導(dǎo)航欄難用何陆。導(dǎo)航欄上采用 5 - 7 個元素是比較合適的晨汹。


導(dǎo)航欄信息過多;


簡單的導(dǎo)航欄就能幫用戶找到想要的信息贷盲;
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末淘这,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子巩剖,更是在濱河造成了極大的恐慌铝穷,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件佳魔,死亡現(xiàn)場離奇詭異曙聂,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)鞠鲜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進(jìn)店門宁脊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人贤姆,你說我怎么就攤上這事榆苞。” “怎么了霞捡?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵坐漏,是天一觀的道長。 經(jīng)常有香客問我碧信,道長赊琳,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任音婶,我火速辦了婚禮慨畸,結(jié)果婚禮上莱坎,老公的妹妹穿的比我還像新娘衣式。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布碴卧。 她就那樣靜靜地躺著弱卡,像睡著了一般。 火紅的嫁衣襯著肌膚如雪住册。 梳的紋絲不亂的頭發(fā)上婶博,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天,我揣著相機(jī)與錄音荧飞,去河邊找鬼凡人。 笑死,一個胖子當(dāng)著我的面吹牛叹阔,可吹牛的內(nèi)容都是我干的挠轴。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼耳幢,長吁一口氣:“原來是場噩夢啊……” “哼岸晦!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起睛藻,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤启上,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后店印,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體冈在,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年按摘,在試婚紗的時候發(fā)現(xiàn)自己被綠了讥邻。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,902評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡院峡,死狀恐怖兴使,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情照激,我是刑警寧澤发魄,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站俩垃,受9級特大地震影響励幼,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜口柳,卻給世界環(huán)境...
    茶點故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一苹粟、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧跃闹,春花似錦嵌削、人聲如沸毛好。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽肌访。三九已至,卻和暖如春艇劫,著一層夾襖步出監(jiān)牢的瞬間吼驶,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工店煞, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留蟹演,地道東北人。 一個月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓顷蟀,卻偏偏與公主長得像轨帜,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子衩椒,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,843評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 1蚌父、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,980評論 3 119
  • 目的:UI設(shè)計的目的是為了更好服務(wù)用戶;能讓用戶快速完成自己的目標(biāo)毛萌; UI設(shè)計的發(fā)展趨勢:全鏈路和復(fù)合化的設(shè)計人才...
    quantre閱讀 11,035評論 9 83
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,116評論 25 707
  • 文字是我的秘密洞穴苟弛,在這里讓我心安,就像媽媽的懷抱阁将,安全舒適膏秫,不受侵?jǐn)_。不管是委屈憤怒做盅,還是甜蜜幸福缤削,在這里都可以...
    茉莉莫閱讀 207評論 0 1