字母框如何影響UI內容的理解

What is your earliest memory of reading? Mine’s reading comics. I preferred films over books, I still do, but I seemed to have a fascination for comics. The experience of reading a comic, to me, was somewhere between watching a film and reading a novel, between audio-visual and pure text.

您最早的讀書記憶是什么? 我的閱讀漫畫。 我仍然喜歡電影而不是書,但我似乎對漫畫很著迷。 對我來說,閱讀漫畫的經歷介于看電影和閱讀小說之間,介于視聽和純文本之間。

I recently realized that the text in comics is always uppercased. If you haven’t noticed, here you go:

我最近意識到,漫畫中的文字總是大寫的。 如果您沒有注意到,請前往:

As an avid reader of comics, the 10-year-old me was always in a dilemma about capitalization. Should I use upper case just like in the comics or should I be doing what I am taught at school? As it turned out, my teachers at school weren’t big fans of comics, so I had no choice but to listen to them.

作為漫畫的狂熱讀者,我10歲的我總是對大寫字母感到困惑。 我應該像在漫畫中一樣使用大寫字母嗎?還是應該做我在學校學習的課程? 事實證明,我在學校的老師不是漫畫的忠實粉絲,所以我別無選擇,只能聽他們的漫畫。

Fast forward to 2019, I was an editorial intern at Juggernaut, a publication house. During my time there, I was asked to master the Chicago Manual of Style, which was used to format Juggernaut’s books. And capitalization was one of the core elements of style that I had to learn up about.

快進到2019年,我是一家出版社Juggernaut的編輯實習生。 在此期間,我被要求掌握《芝加哥風格手冊》,該手冊用于整理《劍圣》的書。 大寫是我必須學習的風格的核心要素之一。

I have been a UX Writer at Chargebee since July 2019.

自2019年7月以來,我一直是Chargebee的UX作家。

While working on all the various projects that have come my way, I have been instinctively obsessed with the capitalization. So much so that my colleagues soon began to take notice of my obsession and were curious to know why it mattered so much.

在處理我遇到的所有各種項目時,我本能地癡迷于大寫字母。 如此之多,以至于我的同事們很快開始注意到我的癡迷,并好奇地知道為什么這是如此重要。

This is my attempt at trying to answer their question. Let’s start with the basics.

這是我試圖回答他們的問題的嘗試。 讓我們從基礎開始。

什么是信箱? (What are Letter Cases?)

To quote Wikipedia,

要引用維基百科 ,

Letter case is the distinction between the letters that are in larger upper case (formally called majuscule) and smaller lower case (formally called minuscule) in the written representation of certain languages.

字母大小寫是在某些語言的書面表示形式中,大寫字母(正式稱為majuscule)和小寫小寫字母(正式稱為minuscule)之間的區別。

A detailed comparison of different letter cases from Wikipedia.
Source: https://en.wikipedia.org/wiki/Letter_case
資料來源: https : //en.wikipedia.org/wiki/Letter_case

為什么以及何時使用它們 (Why and When to Use Them)

Letter casing is used in screenplays, novels, comics, magazines, and anywhere there’s text.

字母大寫用于劇本,小說,漫畫,雜志以及任何有文字的地方。

Here’s a peek into the screenplay of Christopher Nolan’s Interstellar (2014):

這是克里斯托弗·諾蘭(Christopher Nolan)的《 星際穿越》 (2014)的劇本一覽

Various letter cases are used in the screenplay of Interstellar to represent descriptions, character names, dialogues, etc.
Screenplay of Christopher Nolan’s Interstellar (2014)
克里斯托弗·諾蘭的《星際穿越》(2014)的劇本

Notice how the descriptions are written in sentence-case, while the characters’ names are in upper-case, and the parentheticals are in lower-case. This difference in capitalization helps the reader comprehend text elements as locations, descriptions, characters, dialogues, etc. Read more

請注意,描述是用大寫字母寫的,而字符名稱是大寫的,而括號是小寫的。 大寫字母的這種差異有助于讀者理解文本元素,例如位置,描述,字符,對話等。

So you can see that letter-casing is

所以你可以看到字母框是

a systematic use of capitalization to aid readers’ comprehension of content.

系統地使用大寫字母來幫助讀者理解內容。

為什么在UX寫作中字母框很重要? (Why Letter Casing Matters in UX Writing?)

Different writers capitalize differently. However, it is important that organizations set up standard practices around how the various styles of capitalization are used.

不同的作家使用不同的資本。 但是,組織必須圍繞如何使用各種大小寫形式建立標準實踐,這一點很重要。

最受歡迎的信件盒 (Most Popular Letter Cases)

  1. Upper case — CAPITALIZE EVERY LETTER.

    大寫字母-大寫每個字母。
  2. Title case Capitalize the First Letter of Every Word in a Sentence Except the Articles (a, an, the), Conjunctions (and, but, or), and Propositions (on, in, with).

    標題大小寫將句子中每個單詞的首字母大寫,但不包括冠詞(a,an,the),連接詞(and,but,or)和命題(on,in,with)。

  3. Sentence case — Capitalize only the first letter of a sentence and the proper nouns.

    句子大小寫—僅將句子的第一個字母和專有名詞大寫。

Other letter cases such as the camel case (SaaS), though interesting, aren’t commonly used in UX writing.

其他字母大小寫,例如駝峰式大小寫(SaaS),盡管很有趣,但在UX編寫中并不常用。

大寫(又稱“全部大寫”) (Upper Case (aka ‘All caps’))

Our eyes are quick to spot words in UPPER CASE as our minds are trained to perceive them as important pieces of information.

由于我們的大腦經過訓練將其視為重要的信息,因此我們的眼睛很快就能識別出大寫的單詞。

For example, in Chargebee, when a subscription is set to cancel, we must notify our users (the merchants) as they would want to reach out to the customer and understand why they are canceling. In other words, we need to make sure that our customers do not miss on a subscription that’s about to cancel.

例如,在Chargebee中,當將訂閱設置為取消時,我們必須通知我們的用戶(商人),因為他們希望與客戶聯系并了解他們為何取消。 換句話說,我們需要確保我們的客戶不會錯過即將取消的訂閱。

So we decided to use upper case for the tag ‘CANCELS IN 12 DAYS’ on the subscription’s page.

因此,我們決定在訂閱頁面上為標簽“ 12天內取消”使用大寫字母。

An upper-cased tag says ‘CANCELS IN 12 DAYS’ to grasp the user’s attention, as a subscription cancellation affects revenue.
Example of a subscription on Chargebee
在Chargebee上訂閱的示例

標題案例 (Title Case)

The title case helps to bring a hierarchy between text elements in a write-up or on a page, such as titles and descriptions. As a reader, I find it easier to consume content that’s well-formatted, in good order, and hierarchically well-laid out. I find such pages super easy to skim through.

標題大小寫有助于在文章或頁面中的文本元素之間引入層次結構,例如標題和說明。 作為讀者,我發現使用格式良好,井井有條,層次分明的內容更容易。 我發現這樣的頁面超級容易瀏覽。

For example, this is a reconfirmation message shown to customers when they are deleting a shipping address. The title is written in the title case and the description is written in sentence case. Ignore the buttons for now.

例如,這是客戶刪除送貨地址時顯示的重新確認消息。 標題寫在標題的大寫,描述寫在句子的大寫。 現在忽略按鈕。

Image for post

By using the title case for the title, we have tried to establish the hierarchy that we want our users to follow.

通過使用標題大小寫作為標題,我們嘗試建立希望用戶遵循的層次結構。

The title case is also a great choice for buttons. Let me illustrate.

標題盒也是按鈕的絕佳選擇。 讓我舉例說明。

Here are two buttons in the sentence case. Too low on emphasis, I think.

這是句子中的兩個按鈕。 我認為重點太低了。

Image for post

How about upper case? Screaming!

大寫怎么樣? 尖叫!

Image for post

Now, the same buttons in title case.

現在,在標題大小寫相同的按鈕。

Image for post

I think title case brings just the right amount of emphasis on buttons.

我認為標題大小寫對按鈕的重視程度適中。

判例 (Sentence Case)

In sentence case, the first letter of a sentence and the proper nouns capitalized. It’s considered the most readable form of text. Capitalizing the first letter of a sentence serves almost the same purpose as a period (.) at the end of every sentence — to convey the end of a sentence and the beginning of another.

在句子的情況下,句子的首字母和專有名詞大寫。 它被認為是最易讀的文本形式。 大寫一個句子的第一個字母與每個句子結尾處的句點(。)幾乎具有相同的目的-傳達一個句子的結尾和另一個句子的開頭。

At Chargebee, we use sentence case for descriptions and when need to get into the details. We have, in the example below, used sentence case to explain what happens when a backup payment method is deleted.

在Chargebee,我們使用句子大小寫來進行描述以及何時需要進入細節。 在下面的示例中,我們使用了句子大小寫來說明刪除備用付款方式時會發生什么。

Image for post
Use of sentence case for descriptive copy
句子大小寫用于描述性復制

Now, let’s look at the same bit of copy without sentence casing and the period.

現在,讓我們看看沒有句子大小寫和句點的相同副本。

Image for post
With no capitalization or period
沒有大寫字母或句號

Are you thinking what I am thinking?

你在想我在想什么嗎?

Reading is easier when you’re able to break down copy into parts. This experience is further enhanced with the use of appropriate punctuation and effective capitalization.

當您能夠將復印件分成幾部分時,閱讀會更容易。 通過使用適當的標點符號和有效的大寫字母,可以進一步提高這種體驗。

Also, the sentence case spotlights proper-nouns nicely.

另外,句子大小寫很好地突出了專有名詞。

Let’s look at an example. Here’s a tooltip we show users to inform them that they need to enable Orders (a feature in Chargebee) before they integrate with ShipStation.

讓我們來看一個例子。 這是我們向用戶顯示的工具提示,以通知用戶在與ShipStation集成之前需要啟用Order(Chargebee中的功能)。

Here’s the tooltip in title case.

這是標題大小寫的工具提示。

Image for post

The same tooltip in upper case.

大寫相同的工具提示。

Image for post

And finally, in sentence case.

最后,在句子的情況下。

Image for post

Notice how in both upper case and title case, the proper nouns in the sentence (Orders and ShipStation) are lost amidst all the other words. Users may not understand that “Orders” is the name of the feature that they need to enable. When the same line is written in sentence case, notice how the proper nouns are capitalized thereby making it easier for folks to understand that Orders is the name of a feature in Chargebee and ShipStation is the name of the third-party application they are looking to integrate with.

請注意,在大寫和標題兩種情況下,句子(Orders和ShipStation)中的專有名詞都在所有其他詞中丟失了。 用戶可能不理解“訂單”是他們需要啟用的功能的名稱。 當在句子大小寫相同的行時,請注意專有名詞是如何大寫的,從而使人們更容易理解Orders是Chargebee中功能的名稱,而ShipStation是他們要查找的第三方應用程序的名稱與整合。

為什么漫畫使用大寫字母? (Why Comics Use Upper Case Text?)

I Googled this and here’s what I found out:

我用Google搜索了,這是我發現的:

Typing in all capital letters is acceptable for comics, and it’s pretty interesting why. In real comics, they use all caps all the time. The reason for this is that some lower case letters (like j and y) have tails that fall below where the bottom of the letters are supposed to be. The comics industry knew they could avoid this by using all uppercase. The point of doing this is to make the word balloons take up as little space as possible, and keeping everything in caps does just that. Read more

漫畫可以接受所有大寫字母的鍵入,原因很有趣。 在真正的漫畫中,他們一直都使用大寫字母。 這樣做的原因是某些小寫字母(如j和y)的尾巴落在字母底端應該位于的底端之下。 漫畫界知道他們可以通過使用所有大寫字母來避免這種情況。 這樣做的目的是使“氣球”一詞占用盡可能少的空間,而將所有內容放在大寫字母中就可以做到這一點。

So why wasn’t I conscious of all that upper case text in the comics I read as a child?

那么,為什么我小時候不知道漫畫中所有大寫的文字呢?

Conditioning. My mind got conditioned to perceive text elements in a particular way. Perhaps it had to do with the fact that I treated all the capitalized text as dialogues of characters, and thought, maybe, that it was meant to make the superheroes sound powerful. Only when I started reading novels, years later, did I realize that dialogues could be written in sentence-case too.

調理。 我的思想習慣于以特定方式感知文本元素。 可能與以下事實有關:我將所有大寫的文本視為字符的對話,并認為這是為了使超級英雄聽起來更強大。 多年后,當我開始閱讀小說時,我才意識到對話也可以用句子的形式進行。

形式稱贊功能,更多觀察 (Form Compliments Function, More Observations)

I observed that on the PVR Cinemas app a film’s title and language are written in all caps. Initially, I wondered why. At first, I thought, because the primary information on a movie-ticket-booking app would be the movie titles and their languages.

我觀察到,在PVR Cinemas應用程序上,大寫的是電影的標題和語言。 最初,我想知道為什么。 起初,我想,因為電影票預訂應用程序的主要信息是電影標題及其語言。

Image for post

But I think there’s more reasoning to the decision than just prioritization of the primary information. And it has to do with user experience. I realized that upper case for titles and languages made skimming while scrolling easier and helped me find what I was looking for much sooner. You know how words can sometimes just feel blurry while scrolling, right? Well, the text in all caps did not. Voila!

但是我認為,做出決定的原因不僅僅是優先考慮主要信息。 這與用戶體驗有關。 我意識到,標題和語言的大寫字母使滾動時的瀏覽更加輕松,并幫助我更快地找到了想要的東西。 您知道在滾動時單詞有時會變得模糊嗎? 好吧,所有大寫字母的文字都沒有。 瞧!

Lenskart應用程序上的類似觀察 (A similar observation on the Lenskart app)

Once you see this screen, you will instantly learn the pattern

看到此屏幕后,您將立即學習模式

  • The name of the frame is upper cased.

    框架的名稱為大寫。
  • The quantity and price are sentence cased.

    數量和價格均按大小寫。
  • The number of options is upper cased.

    選項的數量是大寫的。

The pattern is easy to grasp and once we’ve gotten used to it, using the app becomes easier.

該模式易于掌握,一旦我們習慣了該模式,使用該應用程序將變得更加容易。

Image for post

那么,為什么要為內容分配字母大小寫呢? (So Why Assign Letter Case to Content?)

  1. To establish a hierarchy in the flow of information.

    在信息流中建立層次結構。
  2. To condition users’ minds to perceive copy in specific ways.

    限制用戶的思維以特定方式感知復制。

Capitalization is a tool in UX writing to improve comprehension and consistency of text elements. Thus, needs to be given due importance.

大寫是UX編寫中用于提高文本元素的理解和一致性的工具。 因此,需要給予應有的重視。

Our mind is always looking for patterns, even on digital interfaces. When users consistently view upper cased text as important, sentence cased text for descriptions, they learn the pattern. Of course, consistency matters and it is important for writers to keep capitalization across the medium consistent.

即使在數字接口上,我們也一直在尋找模式。 當用戶始終將大寫字母的文本視為重要的句子大小寫的文本進行描述時,他們將學習模式。 當然,一致性很重要,對于作家來說,保持整個媒體的大小寫一致是很重要的。

At Chargebee, our Content Style Guide defines capitalization rules for various hierarchical elements for copy. These guidelines are followed by all the UX writers when creating copy for the Chargebee app.

在Chargebee,我們的內容樣式指南為要復制的各種層次結構元素定義了大寫規則。 為Chargebee應用程序創建副本時,所有UX編寫器都遵循這些準則。

Note: All examples, opinions in this article are purely my observations and learnings. If you’ve been involved with writing copy for any of the apps I have mentioned above and would like to share your thoughts, write to me!

注意 :本文中的所有示例,觀點純屬我的觀察和學習。 如果您曾經參與我上面提到的任何應用程序的寫作副本,并且想分享您的想法,請寫信給我!

Thanks to my fellow UX writers at Chargebee, Tara Rachel Thomas and Rohit Nair, for helping me best articulate my thoughts in this article.

感謝我在Chargebee的UX同事作家Tara Rachel Thomas和Rohit Nair幫助我在本文中最好地表達了我的想法。

Image for post
UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women),這是一個巴西組織,致力于通過采取行動,賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/how-letter-casing-affects-comprehension-of-ui-content-34a21235cc73

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/274617.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274617.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274617.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Vue2.7 本周發布?支持組合式 API、setup、css v-bind

大家好,我是若川。持續組織了近一年的源碼共讀活動,感興趣的可以 點此加我微信ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。…

linux中用戶忘記root的密碼--ubuntu版本

基于ubuntu操作系統的情況,當用戶忘記root密碼后, 在普通用戶登陸后 輸入sudu su root 之后系統要求輸入當前用戶的密碼,用戶輸入密碼后,就可以進入root的模式了 就可以操作任何任務。轉載于:https://www.cnblogs.com/zhengyn/arc…

馬上7月,誠邀新老朋友參加近5000人的源碼共讀活動!

大家好,我是若川。最近有不少新朋友關注我。誠邀各位新老讀者朋友參加源碼共讀活動。活動介紹可以點擊文末的閱讀原文。https://juejin.cn/post/7079706017579139102很多人關注我的公眾號是因為我寫了一系列源碼文章,想參與源碼共讀活動。雖然現在有近50…

hashmap 從頭到尾_如何從頭到尾設計一個簡單的復古徽標

hashmap 從頭到尾在紙上素描粗糙的概念 (Sketch rough concepts on paper) Start by sketching out a few ideas for your logo on paper. These don’t have to be detailed drawings. Instead, it’s about getting your ideas out quickly. In this early stage, you can ex…

(轉)android技巧01:Preferencescreen中利用intent跳轉activity

原文連接:http://blog.csdn.net/xianming01/article/details/7543464 設置中的Preferencescreen不僅可以作為設置界面顯示,而且還能夠啟動activity,下面主要是對啟動activity的介紹1. Preferencescreen中啟動activity 例如wireless_setting.x…

Vue 2.7 正式發布,代號為 Naruto

大家好,我是若川。持續組織了近一年的源碼共讀活動,感興趣的可以 點此加我微信ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。…

js設置css色相旋轉_色相旋轉顏色方案是否保留了對色盲友好的能力?

js設置css色相旋轉Hue rotation is often an easy way to change the appearance of a plot or figure without the need to create a new colour bar. However, when dealing with colourblindness, it is important to ensure that the spacing between colours is sufficien…

Tyvj 1921 Freda的煩惱

我就不說是CF hot days 原題了,我會告訴你使用Math庫是因為一開始偷懶不想寫Min函數么- 1 Uses math;2 Var n,m,i,t,tt,x,cost,ans,tmp:qword;3 Function min(x,y:qword):qword;4 Begin5 if x>y then exit(y);6 exit(x);7 end;8 Begin9 readln(n,m);10 …

ux設計中的各種地圖_在UX設計中使用阿拉伯語

ux設計中的各種地圖Last year I got to work on an app that was ultimately going to be deployed globally in every market and every language including RTL (Right-to-Left) languages — with a specific focus on Arabic.去年,我開始致力于開發一個應用程序…

如何為前端項目一鍵自動添加eslint和prettier的支持

本文來自讀者那個曾經的少年回來了 寫的源碼共讀35期筆記文章,授權投稿,寫的真好。本文參加了由公眾號若川視野 發起的每周源碼共讀活動,點此加我微信 ruochuan12 了解詳情一起參與。本文屬于源碼共讀第35期 | 為 vite 項目自動添加 eslint 和…

Server.Transfer方法在頁面間傳值

a.aspx頁面代碼: protected void Button5_Click(object sender, EventArgs e){Server.Transfer("b.aspx");}public string name{get{return this.TextBox1.Text;}} b.aspx頁面代碼: private void TheFour(){a newWebContext.Handler as a;//創…

極端原理_為極端而設計

極端原理*You can also read this article in German here.*您也可以 在此處 閱讀 德語文章 。 In this article I’m going to draw on the Design thinking concept of designing for extreme users and I will argue that designing for extreme users can be considered a…

當CV工程師碰到了拷貝粘貼的需求——useClipboard的使用及源碼解析

大家好,我是若川。持續組織了近一年的源碼共讀活動,感興趣的可以 點此加我微信ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。…

centos利用tar包安裝phpmyadmin

我的網站根目錄地址為/var/www/html,phpmyadmin安裝包在/tmp下。 注意:php版本低于5.1的建議安裝phpmyadmin2.11,因為phpmyadmin3.3對php版本的最低要求是php5.2 1 [rootCentOS ~]# tar -zxvf /tmp/phpMyAdmin-2.11.9-all-languages.tar.gz …

ux和ui_從UI切換到UX設計

ux和uiI still remember those days, when I was a soon-to-be graphic design graduate who started to question what my future will be. At that time, I realized that I loved graphic design, but I wasn’t sure if I enjoyed doing it. Creating logos, posters, broc…

春季招聘后前端工程師的就業指南

盡管疫情反復,大廠裁員,招聘季仍是在困難中有條不紊地落下了尾聲。回顧今年的春季招聘,北京青年報記者發現,互聯網“大廠”依然對“研發崗”需求最為旺盛。但許多企業最近都在圍繞“降本提效”來進行業務調整,這對技術…

探索式測試的思維模型

上一章介紹了探索式測試的定義。在實際項目的測試執行過程中,讀者是否曾遇到如下的幾個現象: 測試人員按照一個測試用例來執行測試,得到的程序輸出與預期輸出不一致。 測試人員判斷程序的行為并不是缺陷,但根據新的輸出想到了新的…

圖解Git分支和命令

大家好,我是若川。持續組織了近一年的源碼共讀活動,感興趣的可以 點此加我微信ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。…

vsco_VSCO重新設計:更直觀,更簡化的界面

vscoAmong the many photo-editing apps, VSCO has definitely become a popular favorite among both experienced photographers as well as “aesthetic” Instagram users. However, my interaction with the app starts and ends with using a few key filters and (maybe…

不同長度數據項的排序

注:本文改編自windmissing博客,感謝作者整理! 題目: a)給定一個整數數組,其中不同的整數中包含的數字個數可能不同,但是該數組中,所有整數中總的數字數為n。說明如何在O(n)時間內對該數組進行排…