?

全國統一服務熱線:18021770366

站內公告:

淮安市嘉瑞廣告有限公司主要提供廣告設計制作安裝服務以及網站制作,是一家經驗豐富的廣告設計制作公司,擁有十幾年廣告設計制作經驗!

聯系我們CONTACT

地址:淮安市翔宇大道1009號
熱線:0517-8588 1663
Q Q:34665706
郵箱:[email protected]

18021770366

新聞中心

當前位置:主頁 > 新聞中心 >

UX設計:如何提升制作界面設計的可讀性?

2020-01-15 點擊量:

前言

本文的寫作目的主要有兩點,其一,探究在設計中,影響Web和App界面可讀性和易讀性的因素有哪些;其二,提出相應的解決辦法,即如何提升界面設計的可讀性。

再動人心魄的故事,如果無法以清晰易懂的方式講給讀者,讀者永遠也不可能被你的故事吸引。同樣地,對設計師而言,無論你的設計多么用心,如果可讀性無法保障,用戶也絕對不會有非常愉快的用戶體驗。今天我們就來專門說說這個事兒-——如何提升界面設計的可讀性。

要完完全全弄懂這個問題,以下這些問題都是必要的:

  • 可讀性和易讀性究竟是什么?
  • 為什么要重視設計中的可讀性和易讀性問題?
  • 影響Web和App界面可讀性和易讀性的因素有哪些?
  • 如何提升界面設計的可讀性?

倘若看到此文的你,還在糾結是不是要花費大量時間弄懂設計的可讀性問題,那么我可以肯定的告訴你:這是必須的。原因很簡單,如果用戶連你頁面上的內容都看不清楚,他們還愿意欣賞你的設計么?還會認真了解你的產品么?答案顯而易見,用戶絕對不會。

那么不廢話了,正式開始吧~

 

第一部分 什么是可讀性和易讀性?(這里主要針對數字內容)

可讀性和易讀性這兩個概念非常相似,以至于很多設計師把他們混作一談,但這兩者本質上是不盡相同的。用戶在閱讀某一內容時,會產生不同的感知,根據感知結果的不同,可以細分成可讀性和易讀性——

可讀性:內容的可讀性強調的是用戶理解某一內容的難易程度。

可以這么說,可讀性關注的問題更加深入,它涉及到了用戶對文本內容的理解問題,而不是僅僅停留在用戶查看內容和識別內容的層面上?;诖?,要解決內容的可讀性問題,就要思考更多,諸如,語言是否簡單易懂?思維是否清晰?信息是否有用?結構是否合理?

易讀性:內容的易讀性強調的是用戶如何查看內容以及如何區分內容。

從這個角度來看,設計師需要解決的問題有兩點:第一,確保用戶可以順利查看內容;第二,確保用戶可以區分內容并準確識別內容,比如識別字符、單詞、句子,以及數字等等?;诖?,我們可以這么認為,易讀性主要解決內容視覺呈現的相關問題,使內容變得容易“讀”,并讓用戶快速了解頁面上的信息。

在當今的設計師眼中,這兩個術語的定義又略有變化,設計師們普遍認為,可讀性的定義更加廣義,在思考可讀性問題的時候,他們也更傾向于將視覺呈現和內容本身相結合。他們甚至認為,可讀性問題就是用戶如何區分文本的不同元素的問題,而易讀性則強調如何區分特定文本中的某些特定字符和符號的問題。

但其實無論你如何理解這些術語,歸根結底始終是一個事兒:用戶如何輕松查看并快速閱讀你的內容。

UX設計:如何提升界面設計的可讀性?

 

第二部分 影響Web和App界面設計中可讀性和易讀性的因素有哪些?

很多因素都會影響內容的可讀性和易讀性,嘉瑞廣告,這里主要集中和設計過程直接相關的要點來探討。

背景色

和書本、報紙等紙質媒介一樣,在數字界面中,背景色對閱讀體驗、區分交互元素以及識別內容有著至關重要的作用。我們都知道,在不同的背景下看同一個物體,會有不同的視覺體驗。類似地,相同的文字內容,在白色或淺色背景上顯示為黑色時,字體看起來會比在深色背景上的顯示為白色時大很多。

之所以有這種差異,原因在于配色。錯誤的配色方案極可能會帶來糟糕的可讀性,進而導致失敗的用戶體驗,致使用戶無法快速瀏覽數據、文字,或者其他任何內容。一旦內容本身不可讀了,即使數據之間具備相關性,用戶也會產生緊張情緒,不僅無法理解內容,甚至還會錯過一些重要信息。

如果設計師有研究過不同背景色,并且理解了不同的背景色會帶來不同的閱讀感知,并搭配了合適的字體,那么理論上講,則任何配色方案都可以保障足夠的可讀性,就看具體怎么設計了。此外,不同類型的頁面也要有不同的解決方案:如果是文字很多的頁面,則傾向于使用淺色背景,并可以采用多種配色方案;如果頁面上圖片很多,則常常采用深色背景,這樣可以突出圖片,帶來更為震撼的視覺效果。

UX設計:如何提升界面設計的可讀性?

Travel Planner app使用了淺色背景確保每個頁面都是可讀的

UX設計:如何提升界面設計的可讀性?

這是一個關于飲茶的網站,專門留出了白色背景的一塊,展示文案

UX設計:如何提升界面設計的可讀性?

這是一個書店網站,深色背景,使用了特定的字體和字體大小,形成對比,確??勺x性

 

排版

?
渡劫5龙宫赚钱 湖北快三专家推荐号码 福彩3D字谜图谜总汇 新疆11选5遗漏 2010年排列5走势图 北京十一选五开奖结果查询55 彩票北京28是不是真的 股来顺配资 湖南快乐十分最小号 上证指数怎么算出来 甘肃快三开奖结果走势图今天