包容性設計是一個熱門的話題,它拒絕少數服從多數,也不是讓多數配合少數,而是保持對大眾的廣泛關注,創造出擁有足夠包容性的好設計。從這個層面上來說,設計的可訪問性必須做到足夠好,盡量讓大家都能輕松方便地享受設計的成果,良好的對比度,普適的交互模式,以及我們提的最多的正確的字體選取。
值得一提的是,不僅僅是公共機構的網站需要注意選取可訪問性優異的字體,品牌和企業的網站中字體的選取同樣需要精心挑選。但是,你如何確定哪些字體合適?這是否意味著要在設計上做妥協?
并不一定。今天我們來聊聊英文字體的選取的技巧,下面的12條技巧,應當能給你足夠的幫助,幫你選取擁有足夠包容性和可訪問性的英文字體。(注意,這里討論的是挑選盡可能讓所有人都能清晰閱讀的字體,尋找展示性、個性化、強形式感的功能性字體是另一個問題。)
1、盡量不要選擇那些看起來就非常童趣的字體,完全沒有這個必要。這是相當常見的錯誤,原因也很明顯:挑選一款高包容性、可訪問性好的字體的時候,它的平衡性和實用性同個性化同樣重要。
2、有些字體設計風格會讓特定的幾個字母之間的識別度降低。最常見的就是數字 “8″ 和大寫字母 “B”,大寫的 “I (i)” 和小寫字母 “l (L)” 之間的識別度問題。選擇帶有襯線的字體能夠讓小寫字母“i”和大寫字母 “I” 更好地被分辨出來,即便是在較小的屏幕上。如果字體中的小寫字母 “a” 是雙層結構則能很好的同小寫字母 “o” 區分開。
3、如果你需要在標題或者頭條的位置使用較少的文本,而字體大小在16pt 及以上的時候,那么使用筆畫較為舒展、內外空間都比較大的非襯線體是相當不錯的。
pt 也就是 Point ,而我們常說的 px 指的是像素 Pixel,兩者有著明顯的差異。pt 源自平面印刷領域,指的是1/72 英寸,是一個固定的長度,而px 指的是像素點,在iPhone 3GS 上 5px 的物理長度和 iPhone 6s 上 5px 的物理長度是不一樣的,前者由于像素密度低從而導致5px 的物理長度更長。所以,px 是一個“相對長度”單位,而 pt 是一個“絕對長度”單位。
4、在選取網頁字體的時候,盡量選取 X高度較大的字體。X高度覆蓋的區域是閱讀的主體,而上伸部和下降部則為每個字母提供了足夠的識別度。上升部應該比大寫字母稍微高一點。
X高度通常指的是小寫字母的平均高度,之所以為稱為x高度是應為通常拿字母x作為參考。諸如字母 “h” 和 “f” 超出X高度的部分被稱為 Ascender,也就是上伸部。而字母 “p” 和 “g” 下方低于X高度的部位則被稱為 Descender,即是下降部。
5、盡量挑選內部空間均衡、外部輪廓銳利、末端清晰的字體,當字體較小的時候,字母之間距離縮小靠近,空間會被模糊、填充,會影響識別度和可讀性。
西文字體設計存在“External Counter”和“Internal Counter”的概念,通常稱之為外部空間和內部空間。小寫字母 “a” 和 “e” 的字母內部兩個空白區域即為內部空間,如果某部分內部空間比較小,當字體尺寸較小的時候,會降低識別度。諸如字母 “r” 和 “n” 則需要注意它們外輪廓的細節銳利度和那些勾勒細節的外部空間,也就是豎線和弧線之間所夾的空間。如果外部空間較小,在字母間距較小的情況下”rn” 和 “m” 就很難分辨了。
6、數字的設計也應該有特色,尤其是數字 “0″ 應當同大寫字母 “O” 有顯著的差別,而數字 “6″ 和 “9″ 的末端開口應當足夠舒展開闊。
7、字母的X高度和筆畫寬度之間有一個最佳比例,為了達到最佳可讀性,通常筆畫寬度應該控制在X高度的17%~20%。
8、挑選小寫字母 “t” 上面的一橫相對長一些的字體,這樣字母的識別度會更高。
9、大寫字母 “Q” 底部的尾巴能增強字母的識別度,字體選取的時候應當注意這個細節。
10、字母之間的間距應當均勻而富有韻律感,這樣能提升字母的可讀性和識別度。間距太大太小都會讓人感覺不適。
11、在黑色的背景下,將字體色彩設定為白色,輸入一段文字,查看它們的顯示效果。如果字母之間間距看起來比較小,字母的形狀看起來像在“發光”,從而令字母仿佛比單獨看更粗的話,那么你應當選取筆畫更細的字體。
12、你應當挑選字重范圍更廣的字體族,這樣當你在設定不同平臺、不同屏幕尺寸、不同設備下的顯示效果的時候,可以更加輕松自由地找到對的效果。
網站想要提升用戶體驗有很多方法,人機交互內容就是其中之一。在前些年,由于一些技術的限制,導致這一內容的添加具有很大的困難,但現在隨著各項技術的興起,人機交互的設計已經不存在很大的障礙,很多網站的人機交互方面做的非常完善且的題,這可以為網站的營銷帶來極大的幫助。但值得注意的是,人機交互并不是一個只有正面作用的事情,事實上,如果處理不當,很可能會帶來一些負面的影響。我們認為,人機交互既然作為一項提升用戶體驗的設計,那么就一定要基于用戶體驗來設計。
一、人機交互在設計時應注意交互效果不是越多越好
很多人在進行一項操作時往往會簡單的選擇大量的堆砌,如SEO優化過程中對于關鍵詞的堆砌。在交互設計時,也往往會出現這一現象。一些交互人員可能由于主觀的認為,更加絢麗的鮮果就可以讓網站給用戶帶來良好的觀感,所以會將交互效果制作的十分復雜,或者說是效果的簡單堆砌。但其實對于用戶而言,這樣的設計并不一定能夠帶來良好的體驗,雖然可能大部分用戶對于密密麻麻的大段文字不感興趣,但這并不意味著他們能夠接受過多或是過于炫技的美術效果。
交互設計的初衷是讓用戶獲得更好的觀感,也可以讓頁面顯得更加生動,但如果美術效果過多,就會在很大程度上影響用戶的視線,甚至會造成眼花繚亂的效果,同時也會讓用戶無法集中注意力于網站的中心內容上,如果交互設計做成這樣,那么很難說這是一個成功的設計。
二、頁面交互應與營銷相配合
提升用戶體驗的直接目的其實就是為了提高網站的轉化率,所以在交互的設計時也應該與營銷相配合以達到提高轉化率的目的。如果能夠將網站上的重點內容做好交互,無疑就可以讓用戶更加關注這些你想讓他們看到的東西。比如在線客服等功能,就可以通過一些精巧的設計引起用戶的關注,來引導他們點擊。
另外,如產品展示環節,也可以通過精美的交互設計來吸引用戶的注意力,讓他們對你的產品產生濃厚的興趣,這也可以給用戶留下非常深刻的印象。總而言之,單純的交互設計的作用并不明顯,一個優秀的交互設計應該達到的效果是有效的提高網站的轉化率。只有讓用戶更加關注網站中的核心內容,才能夠顯示出交互設計的意義。
三、保證加載速度不會太慢
當然,人機交互設計的再好,也難以避免的一個缺陷就是會使網站的加載速度變慢。因為基于B/S技術的網站,是必須要通過預加載到客戶端計算機才可以運行。所以網站上的每一個元素都要通過客戶端瀏覽器的解釋之后才能夠顯示。
所以我們可以得出,越復雜的交互設計,無疑就會給網站的加載速度帶來越多的負擔,如果人機交互效果設計的過于復雜,在這些內容呈獻給用戶之前,首先讓用戶感到的是網站加載時的遲緩,這是網站的一個非常嚴重的減分項。所以,在設計人機交互時,應該盡量合并JavaScript代碼和CSS樣式代碼等以避免資源的堵塞。而在圖片方面,也要在保證清晰度的情況下盡量的縮減大小,這樣才能夠盡可能的讓網站的加載速度不會受到太大的影響。
人機交互出現的目的就是為了讓用戶體驗更進一步,所以在進行交互的設計時,也一定要以用戶體驗出發,只有這樣,才能讓交互效果真正的給網站帶來正面的能量。
? 免費熱線:400-166-3538 ? 咨詢電話:13122077371 ? 咨詢QQ :63778992 ? 微信咨詢 : chunhua19820 | 公司名稱:上海緣震網絡科技有限公司 開戶銀行:中國工商銀行上海市彭浦支行 銀行賬號:1001 2508 0930 0206 455 |
總部:上海市奉賢區金海公路6055號29號3樓 分部:上海市寶山區長江路580號605室 商務官網:www.centos9.com 彥蓁科技:www.shyanzhen.cn | 緣震網絡成立于 2014 年,公司主要經營全案策劃,高端品質網站建設、多媒體視頻宣傳片制作、微信公眾號開發、微信小程序開發、商城定制、SEO優化、電商托管、空間托管、網站維護、應用軟件開發、手機端APP開發、等為客戶提供一條龍網絡運營解決方案的的技術型企業。我們在人力資源、業務范圍、設計、技術、服務、信譽度、規范管理及企業文化等諸多方面完善自己,公司目前已與千余家各類客戶進行長期戰略合作,提供專業的網站建設與運營服務。我們的口號:廣結良緣、震古爍今! |