新手還在學習排版配色，高手已經(jīng)在做內(nèi)容設計了

任何事物的呈現(xiàn)和傳達都需要通過一定的媒介，在媒介承載的過程中，均會產(chǎn)生損耗。我們設計的目的之一就是將所傳達的內(nèi)容在媒介承載的過程中讓損耗降到最低，呈現(xiàn)出我們想要給受眾的東西，且能夠被快速察覺、理解和獲?。ㄖ鲃蛹氨粍拥模?。
文本作為語言溝通的書面化，一直以來承載著大量的信息，也是生活中最常見及熟知的方式。 當前人們快節(jié)奏的生活狀態(tài)、快消的閱讀習慣以及注意力分散，所以需要我們通過設計手段來減少視覺、心理及認知壓力，讓用戶能夠快速定位、理解和消化。同樣，我們也需要根據(jù)目標、任務甚至品牌的訴求，從而更好的服務于主題。 以下是工作中一些心得和總結，旨在從更多角度去思考和完善，讓文本信息能夠得到更好的呈現(xiàn)和傳達。
一、前提 前提是做事的先要條件。 達成目標 了解受眾 具體情景
二、目的 目的是做這件事的動力。 滿足用戶所需，幫助完成工作； 簡單直接，有效傳達； 達成一致，統(tǒng)一規(guī)范可實施。
三、角度 角度是考慮要做的內(nèi)容。 準確性 一致性 易讀性 內(nèi)容調(diào)性
1. 準確性 秉持文本信息準確明了、簡達明意，無歧義 首先要明確所傳達的群體對象，盡量避免使用行話，使用「用戶」能直接理解的文本信息，當然相應的專業(yè)詞匯也應給予良好的解釋和說明。 案列：我們將 「循環(huán)次數(shù)」 更改成 「輪播次數(shù)」 ，「循環(huán)次數(shù)」會讓人產(chǎn)生思考（循環(huán)一次是播放一次還是兩次的），而 「輪播次數(shù)」 就顯得更加直觀明了且更符合上下文的語境。 用詞完整、闡述直接 用詞完整，例如保存修改，而不是簡化為保存；闡述直接，避免模棱兩可，模糊不清。 內(nèi)容傳達上應做的良好的「自解釋」 例如：涉及操作事件的文本命名應根據(jù)上下文準確的進行表達，而不是含糊其辭的，使文本能夠準確的解釋和表達將要發(fā)生的事件及行為。 尋找更加合適的表達方式 例如：未輸入提示，「XXX不能為空」 和 「請輸入XXX」，一個在表達上其實有一些責怪，而第二個表達同樣說明了意思，但在口吻上卻更加溫和，并告訴用戶應該怎樣操作和行動。 避免錯別字 錯別字只會拉低產(chǎn)品的品質(zhì)和用戶內(nèi)心的形象，請務必嚴格檢查。避免把 「登錄」 寫成 「登陸」。 準確應用標點符號 標點符號能夠賦予文字節(jié)奏，表達語氣以及對內(nèi)容的組織。準確應用，能夠幫助文字更加有效傳達和被人理解。 常用標點符號用法簡表 《標點符號用法》
2. 一致性 同一事物用詞一致，消除重復 例如，涉及新建的操作，一會用「新建」，一會又用「新增」、「創(chuàng)建」或者「添加」；涉及稱謂，一會用「你」，一會又用「您」、「我」或者「我的」；涉及幫助，一會用「支持」，一會用「幫助」或者「服務」等等，我們應該消除這些重復，統(tǒng)一用詞。 相似場景、意思和語境下句式表述一致 例如，未輸入提示，應避免「請輸入XXX」和「XXX不能為空」等不同的表達方式。 標點符號規(guī)范 根據(jù)符號使用規(guī)范并結合自身產(chǎn)品情況具體定義。例如：全角和半角，如常見「：」和「:」，截斷省略「…」等等。又如：標題，提示文本不加結束符號等。 時間表達規(guī)范 時間是一個記錄戳，需要根據(jù)與當前進行定義，顯示不同的格式。 例如：今天發(fā)生的（自0時起），顯示時分（24h）；今天之前發(fā)生的，顯示月-日（例如02-12）；跨年，顯示年-月-日（例如2017-12-30）。 數(shù)字使用規(guī)范 例如：統(tǒng)計數(shù)據(jù)統(tǒng)一使用阿拉伯數(shù)字。 大小寫使用規(guī)范 專有名詞大小寫，單位符號等。例如：iOS 中西文混排規(guī)范 中英文之間需要加空格等。 代稱一致 一人稱「我」，第二人稱「你」和「您」，具體根據(jù)場景進行使用，同場景統(tǒng)一一致。你和您請不要隨意混用或均使用，應當統(tǒng)一。 操作名稱與目的頁面標題一致 常見于移動端，在 PC 常見于鏈接及導航。
3. 易讀性 簡化內(nèi)容，避免啰嗦 簡單而直接，避免長段使用短語，保持措辭簡潔，讓讀者感受到閱讀樂趣，引誘他們深入閱讀。 打破復雜冗長 通過段落、有序列表（項目編號）、無序列表等方式使內(nèi)容結構化，便于視覺掃描。 段落：根據(jù)句意，進行分段呈現(xiàn)。 有序：當項目順序或優(yōu)先級重要（程序等）時，使用編號列表。 無序：項目相關時使用項目符號列表，但順序或優(yōu)先級無關緊要。 結構化：節(jié)奏和韻律。例如，電話號碼或者銀行卡號，使用連字符或空格使其容易被讀取和識別。 重要內(nèi)容突出顯示 讓用戶首先看到最重要的內(nèi)容，而不是去尋找它們。 經(jīng)過良好的排版 合理使用文字大?。菏褂煤侠淼淖煮w大小，太小太大對于屏幕閱讀來說都是低效率的。網(wǎng)頁端字體大小一般使用不低于12px，更加直觀易辨（對于多數(shù)人而言）的字體14px和16px；移動端字體大小不小于10pt（sp），12-18pt（sp）都是常用的字體選擇范圍。 顏色與對比度：顏色我們需要考慮色彩本身（色相、明度和飽和度）給人直觀感受和文化寓意的，以及文本與背景之間是否有足夠的對比度，從而方便人們可以更加直觀舒服的進行閱讀。W3C 建議的視覺呈現(xiàn)文本和文本的圖像具有對比度至少為4.5:1，大型文字和圖像的對比度至少為3:1，具體詳情可了解 Contrast (Minimum):Understanding SC 1.4.3 字間距：漢字屬于方塊字，原則上文字外框彼此緊貼配置，稱作密排；在各字之間加入固定量的空白來排列文字，稱作疏排；減少字距，使得文字外框一部分重疊，稱作緊排。文字排版時，會根據(jù)具體情況對字間距進行調(diào)整。大多時候我們對采用疏排方式，增加字間距，以提高易讀性。 行高：具有良好的行距的文本，更易閱讀和引導用戶視線。與行之間的空白稱為行距，文字尺寸+行距=行高，行距一般介于文字尺寸的50%–99.99%之間，自然行高的設置一般為文字尺寸的1.5-2倍。文字尺寸較小時，行高設定也會相對較小。行距一般不會超過文字尺寸，因為這樣并不會因此而增加易讀性。 段間距：段落與段落之間的距離，段間距大于行間距，行間距一般設置為文字大小的2-3倍之間，合適的段間距能夠緩解用戶的視線壓力，起到很好的節(jié)奏及閱讀定位。 行字數(shù)：一行的文字數(shù)量。一行文本過長，用戶需要去移動脖子或視角，易造成的眼睛疲憊感，造成閱讀困難；此外，在大段文本中找到正確的行也將變得困難。過短視線需要不斷換行，從而打斷了讀者閱讀節(jié)奏，造成尷尬的斷裂效果；行太短也會造成用戶在一行沒讀完的情況下去關注和閱讀下一行。 雖然至今漢字依然沒有正統(tǒng)的方法和具體行字數(shù)來衡量文本的好長度，個人經(jīng)驗在12px下30-60漢字左右（包含標點），具體也要根據(jù)內(nèi)容、人群等約束和變量，當然最重要的是要相信你自己（專業(yè)的設計師）的眼睛和判斷。 詞語盡量避免同行斷開：例如，行末為「跳」，下行開頭為「轉(zhuǎn)」，讀起來就有斷句的存在感。 對齊方式：中文（簡體）排版一般遵循左對齊的原則，符合我們從左到右的閱讀習慣。文字居中，本身不適合可讀性，但可用于許多小段文本塊。右對齊在表格設置中，可用于數(shù)字的對比等應用。 符號避頭尾：中文中行首遇到不能置于行首的標點符號，必須要將移動到前一行行尾。 合理突出：對于關鍵字、要點通過位置、加粗、比例大小和色彩處理等，以便讓用戶直接關注到。當然也要控制突出數(shù)量，畢竟都是「重點就沒有重點」，過多也會擾亂和分散用戶的注意力。 鏈接：鏈接文本需要很好的說明用戶將要去何處，可以使用藍色或者下劃線標示出鏈接的樣式，這是用戶熟悉方式。神奇的「下劃線」為體驗賦能 盡量少用斜體：PC 和無線端的各個官方的中文字體包并沒有斜體預設，生拉硬扯的傾斜在一定程度上是影響美觀度，并造成一定的閱讀困難。如果是為了突出或區(qū)別可以考慮使用字重、大小和顏色等方式。 層級處理：有對比就有層級關系，可通過大小、字重、色彩、距離、方向、紋理、形狀、背景等等方式，可以讓整體排版布局更加富有層次結構，讓內(nèi)容的可讀性得到明顯的提升。 例如：標題、副標題、引用和內(nèi)容也是一種層級處理（結合了大小、色彩或者距離等等）。 留白：合適的留白可以更好的烘托內(nèi)容主題，緩解視覺壓力。 數(shù)量信息前后有漢字時需加空格：不加空格會出現(xiàn)前后擁擠的視感，另一方面可凸顯數(shù)字信息。
4. 內(nèi)容調(diào)性 依據(jù)產(chǎn)品定位，通過文本表述傳遞其相應的價值觀和情感訴求 任何產(chǎn)品都有所針對的人群及自身的品牌形象。C端產(chǎn)品和 B端產(chǎn)品，兒童產(chǎn)品和成年人產(chǎn)品，所使用的語言表達方式自然也都是不一樣的。 依據(jù)不同狀態(tài)和用戶群體 根據(jù)狀態(tài)（正面、中性和負面）和用戶（新手、中級用戶和專家），使用合理的語調(diào)及用詞規(guī)范，以適應不同的情境和狀況。 始終堅持積極主動的，而不是消極令人沮喪 「請輸入內(nèi)容」與「錯誤，內(nèi)容不能為空」，同樣的意思卻有不同的感受，從積極的一面表達就是傳播正能量。
四、通用產(chǎn)出物 字體 日期和數(shù)字 標點符號 大小寫 中英文混排 代稱
1. 字體 字族 Font-Family Font-Family 屬性設置的字體系列。Font-Family 屬性設置多個字體作為一種「后背」機制，瀏覽器不支持一種字體，它會嘗試下一個字體。 如果字體系列的名稱超過一個字，它必須用引號，如Font-Family：「宋體」。 對于依附在 PC 端產(chǎn)品而言，統(tǒng)一的字體規(guī)范，以保證在不同平臺、不同瀏覽器下保持良好的美觀性和易讀性。 以下呈現(xiàn)的是 Ant Design 的字體家族。個人在使用了多款后，覺得的一份： font-family：「Chinese Quote」, -apple-system, BlinkMacSystemFont, 「Segoe UI」, 「PingFang SC」, 「Hiragino Sans GB」, 「Microsoft YaHei」, 「Helvetica Neue」, Helvetica, Arial, sans-serif,「Apple Color Emoji」, 「Segoe UI Emoji」, 「Segoe UI Symbol」; 如果大家想了解字體排列前后順序的玄機可以認真看《推薦！Web中文字體應用指南》這篇文章。 以下備注區(qū)域，是我在使用字族的路上磕磕碰碰所收集到的有限知識，也算知其所以然了，若有不妥、錯誤和缺漏歡迎指正。 備注區(qū)域： -apple-system：macOS 和 iOS平臺的 Safari 調(diào)用 SanFrancisco 字體 BlinkMacSystemFont：macOS Chrome 調(diào)用 SanFrancisco 字體 Roboto字體，由 Google 開發(fā)，是 Android 4.0「Ice Cream Sandwich」及后面Android版本的默認字體。 Segoe UI 取代Tahoma，Windows 從 Vista 開始的界面默認西文字體。利用 ClearType 技術的新字體 Segoe UI 看起來比現(xiàn)在略顯僵硬的 Tahoma 更加人性化。 Tahoma 被采用為 Windows 2000、Windows XP、Windows Server 2003及 Sega 游戲主機 Dreamcast 等系統(tǒng)的默認字型。 Arial 是一套隨同多套微軟應用軟件所分發(fā)的無襯線體 TrueType字型。 Microsoft YaHei 微軟雅黑，該字體將作為 Windows Vista 的默認字體取代2001年推出的 XP系統(tǒng)下默認的宋體漢字，以支持高清顯示的 ClearType 功能。 Simsun 宋體，一直是簡體中文版 Windows XP系統(tǒng)及之前版本的默認字體。但由于字體的特性，在Windows Vista 中已經(jīng)改用支持 OpenType 的微軟雅黑， HanHei SC 威鋒瀚黑，現(xiàn)蘋果簡體中文，OS X 10.11 El Capitan 開始， STHeiti 華文黑體，分為「黑體-簡（Heiti SC）」和「黑體-繁（Heiti TC）」，OS X 10.6 Snow Leopard 直至 OS X 10.10 Yosemite。 Hiragino Sans GB 冬青黑體 STXihei 華文細黑，是蘋果公司 Mac OS X9 以及之前版本的操作系統(tǒng)的中文默認字體，截至 OS X 10.5 Leopard。 PingFang SC 為 iOS9.0 以后系統(tǒng)自帶中文字體。 SanFrancisco iOS9 正式發(fā)布之后，替換了之前的 Helvetica Neue 成為了 iPhone/iPad 系列設備的默認字體。 Myriad Set Pro 蘋果向 adobe 公司定制了一款西文字體，是以 myriad 為原型的，完成后在市面上叫做「myriad set」，后期升級為「myriad set pro」。 Helvetica Neue 意為「新 Helvetica」 Helvetica 是蘋果電腦的默認西文字體 sans-serif 并非一個具體字體，而是css的通用字體族，具體是什么字體是由瀏覽器設置決定的。 字號 font-size 標題，內(nèi)容，注釋說明等不同字號的大小。 字間距 letter-spacing 根據(jù)不同字號，及文本數(shù)量進行字間距定義。 行高 line-height 設置行高能很好的解決，緩和上下文本之間擁擠在一起的情況。 顏色 text-color 這里主要講下注意對比度的問題，很多產(chǎn)品在這一點上都忽視了這一點，搞出了所謂的「小清新」。 你可以查看完整的《網(wǎng)頁內(nèi)容可訪問性指南WCAG 2.1》 《色彩無障礙設計（Color Accessibility）之「對比度」的探索》中推薦的工具很實用 《「好」的字體系統(tǒng)搭建與維護指南》 《掌握具有共享樣式的文本系統(tǒng)》（搭梯子訪問）
2. 日期和數(shù)字 日期 使用完整數(shù)字日期，如：2018-01-02。 時間 使用24小時制，如 13:01:29 具體到時分秒，如當前對話顯示 09:01:02 使用半角 「:」 日期和時間之間包含一個空格，如 2018-09-01 13:01:20。 數(shù)字 使用阿拉伯數(shù)字。 對四位或更多位數(shù)的數(shù)字使用逗號。 對手機號碼使用前后無空格的連字符「-」。不要使用點，空格等其他符號。 數(shù)字范圍使用前后無空格的連字符「-」。 正負數(shù)后不加空格。 數(shù)字和字符之間不需要空格 貨幣 人民幣符號（￥）在數(shù)字前面，精確到小數(shù)點后兩位。 測量單位 儲存單位（B、kB、MB、GB、TB），在數(shù)量和度量單位之間包含一個空格。 對于長度「毫米（mm）、厘米（cm）、分米（dm）、千米（km）、米（m）、微米（μm）、納米（nm）等」和重量「千克（kg）、克（g）、毫克（mg）、微克（ug）等」等測量單位應為小寫（電流單位除外）。在數(shù)量和度量單位之間包含一個空格。 屏幕單位「像素（px）、邏輯分辨率（pt、dp、sp）、英寸（in）等 」應為小寫。在數(shù)量和度量單位之間包含一個空格。 在連續(xù)列出尺寸時，將度量單位放在末尾，而不是在每個數(shù)字之后，并包括一個空格。 在所有情況下，數(shù)字和單位之間包含一個空格。HTML代碼的最小空間是 & hairsp; 或 & #8202; 測量單位分為基本單位和導出單位。國際單位制共有7個基本單位長度： 長度：米 m； 質(zhì)量：千克（公斤） kg； 時間：秒 s； 電流：安[培] A； 熱力學溫度：開[爾文] k； 物質(zhì)的量：摩[爾] mol； 發(fā)光強度：坎[德拉]cd； 并由物理關系導出的單位稱「導出單位」 。
3. 標點符號 省略不必要的標點 標題、副標題、輸入框下的提示文本、輸入框占位符、懸停提示中的文本、Toast中、彈窗等短句，在遣詞造句時盡量避免標點符號，始終末尾不要使用句點。 有序列表和無序列表 使用冒號引入項目列表，列表后不使用標點。 使用列表來表示步驟、組或信息集。簡要介紹列表的上下文。在順序重要時列出數(shù)字列表，比如當您描述流程的步驟時。當列表的順序不重要時，不要使用數(shù)字。 常用標點符號規(guī)范 空格：鏈接與前后文本之間增加空格；數(shù)字和單位之間包含一個空格；電話號碼與前后文本包含一個空格； 省略號「…」：半角省略號，超出截斷代替省略文本； 星號「*」：半角星號。表單必填、說明備注； 連接號「-」：半角連接號，前后無空格，如2018-01-04，2008-2018； 冒號「:」：半角冒號，用于時間的表示，如16:45 ； 冒號「：」：全角冒號，用于表單； 破折號「——」：中文破折號占兩個漢字空間； 書名號「《》」：產(chǎn)品中常用于法律條文。 相關推薦： 《標點符號用法》 常用標點符號用法簡表 中文排版需求 寫給大家看的中文排版指南
4. 大小寫 專門名詞大小寫 文件格式 當一般引用文件擴展名類型時，全部大寫而不包含句點。 GIF PDF HTML JPG 格式 引用特定文件時，文件名應該是小寫的： 內(nèi)容策略-設計完全手冊.pdf 皮皮蝦.gif 西湖.jpg hot.html
5. 中西文混排 中英文之間需要加空格 中文與數(shù)字之間需要加空格 中文為主，使用全角符號且與英文或數(shù)字之間不加空格
6. 代稱 為了表達雙方的平等，避免使用「您」。使用「你」代稱客戶/用戶，借以表達客戶的口吻。在客戶/用戶為主的情況下使用「我」。避免同一句子中混用「你」和「我」。 對于「您」還是「你」的使用并非絕對，主要看行業(yè)以及服務的對象 在《勝于言傳-Web內(nèi)容創(chuàng)作與設計的藝術》中作者建議： 當用戶提問的時候： 在問題中使用「我」和「我的」（用戶的聲音） 在答案中使用「你」和「你的」（應用對用戶說話） 用「我們」和「我們的」代表回答公司 當應用提問的時候： 在問題中使用「你」和「你的」（應用向用戶提問） 在答案中使用「我」和「我的」（用戶的聲音） 用「我們」和「我們的」代表回答公司
五、指導建議 操作行動 文本說明 句式結構 語音和語調(diào) 寫作建議
1. 操作行動 按鈕 清晰可預測。應該能夠預測當點擊按鈕時會發(fā)生什么。 行動號召。按鈕應始終帶有強烈的動詞，鼓勵行動。為了給用戶提供足夠的上下文，在按鈕上使用 {動詞} + {名詞} 格式，除了保存，關閉，取消或確定等常用操作。 以下是常用詞的含義，以避免不恰當或混淆使用： 所有具體的用詞需結合場景和生活習慣。 鏈接 使用描述性的鏈接文本。切勿使用「點擊這里」或「這里」作為鏈接文本。 如果一個鏈接出現(xiàn)在句子的末尾或逗號之前，不要鏈接標點符號。 鏈接使用藍色，這是用戶習以為常的認知，并明確區(qū)分點擊和未點擊的區(qū)別。
2. 文本說明 對操作說明，功能說明，名詞（術語）解釋，提示信息等進行用戶測試，是否明白其意，記住這是一個不斷優(yōu)化的過程。 以下是產(chǎn)品內(nèi)的主要文本： 操作文本：按鈕； 導航文本：全局和局部導航、目錄、鏈接； 說明文本：功能說明、術語解釋； 提示文本：彈框、toasts、操作反饋、系統(tǒng)反饋、通知等； 操作說明：功能引導說明，操作文檔； 標題和副標題：彈框標題、操作說明標題、法律條款標題等； 條款：法律條款、申明； ALT：為圖片添加文字說明。
3. 句式結構 通用場景下的語句可進行歸納在一起，形成統(tǒng)一的句式結構。 例如： 操作反饋：成功直接提示結果，失敗顯示結果+說明原因+如何解決。 二次確認：先說明利害，再詢問是否操作。 標題：「動詞」+ 「名詞」格式等。
4. 語音和語氣 這聽起來是誰，什么樣的語音和語氣能代表我們，我們想傳達什么的形象。 因此，你可以建立一套準則，一般而言準則應該： 基于產(chǎn)品當前的業(yè)務； 準則可被執(zhí)行，避免過于空洞； 易于記憶，3-5個尚可； 并隨著產(chǎn)品發(fā)展和愿景的變化而不斷適應改進。 例如： 積極主動 始終堅持積極主動的，而不是消極令人沮喪。 自信專業(yè) 避免聽起來傲慢、親密、孩子氣或其他不適當?shù)幕蚍钦降摹?友好尊重 依據(jù)不同狀態(tài)（正面、中性和負面）和用戶群體（新手、中級用戶和專家），使用合理的語氣及用詞規(guī)范。
5. 寫作建議 個人寫作過程中的一些小感悟： 好的結果是不斷修改來的，修改的基礎是要先寫下來，所有先記錄而不是停留在腦子里，這才是一切開始的基礎。 記住用戶很忙且沒有耐性，甚至不聰明，這會不斷的促使你修改調(diào)整。 找人閱讀并呈現(xiàn)結果，并詢問其含義和建議。這是檢驗的好實踐。 過段時間再來看看，或許有更好的方式。 結尾 這并非是一個完整的（內(nèi)容層面可能保存圖片風格，插畫圖標等），還有很多地方可以補充。重要的是找到適合你的產(chǎn)品，并有這樣的意識去不斷優(yōu)化你的產(chǎn)品內(nèi)容，從而更好的服務你的用戶。

網(wǎng)站題目：新手還在學習排版配色，高手已經(jīng)在做內(nèi)容設計了
文章位置：http://www.muchs.cn/news17/194517.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、建站公司、網(wǎng)頁設計公司、定制開發(fā)、自適應網(wǎng)站、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)