章作者分享了一種基于設(shè)備模板的移動(dòng)端原型設(shè)計(jì)方法，相信能夠?qū)δ愕脑驮O(shè)計(jì)工作帶來幫助，值得馬克。

在使用Axure設(shè)計(jì)移動(dòng)端原型的應(yīng)用方面，我總結(jié)出了兩種常用的方法。第一種是更適合在移動(dòng)端進(jìn)行演示的設(shè)計(jì)方法，大家可以參考我之前已經(jīng)分享過的一篇教程：使用Axure打造最佳的移動(dòng)端交互原型教程，使用這種方法輸出的原型在手機(jī)設(shè)備上進(jìn)行演示時(shí)可以達(dá)到跟真實(shí)APP幾乎一致的展示效果及交互體驗(yàn)。在今天我將分享另外一種基于設(shè)備模板的移動(dòng)端原型設(shè)計(jì)方法。

什么是基于設(shè)備模板的移動(dòng)端原型設(shè)計(jì)方法？簡(jiǎn)而言之就是在Axure的編輯界面中放置對(duì)應(yīng)的機(jī)型模板，使輸出的原型達(dá)到更規(guī)范和真實(shí)的演示效果。其實(shí)這是一種很常見的移動(dòng)端原型的設(shè)計(jì)方法，很多同行在設(shè)計(jì)原型的時(shí)候也都用過。這篇分享教程將對(duì)個(gè)設(shè)計(jì)方法進(jìn)行了總結(jié)和梳理，并基于這個(gè)方法制作了一套可快速復(fù)用的模板。這套模板具有幾個(gè)方面的特點(diǎn)：

● 結(jié)構(gòu)化，根據(jù)APP界面結(jié)構(gòu)進(jìn)行搭建；

● 標(biāo)準(zhǔn)化，非常方便進(jìn)行編輯和維護(hù)；

● 高保真，可高度還原移動(dòng)端交互效果；

在本篇分享的結(jié)尾我會(huì)提供模板的Axure源文件下載，其中包含了最新的IPhoneX和IPhone8等多套IOS設(shè)備機(jī)型，以及一些常見的界面元素和交互效果。在開始正式的介紹之前，大家可以查看使用這套模板還原IOS中兩款官方應(yīng)用的設(shè)計(jì)演示。

IOS11 AppStroe For iPhoneX 原型演示

IOS11 Contacts For iPhone8 原型演示

1.界面元素和結(jié)構(gòu)介紹

由于這套模板是基于IOS系統(tǒng)進(jìn)行設(shè)計(jì)的，所以相關(guān)界面元素和交互方式均以IOS為標(biāo)準(zhǔn)。目前主流的移動(dòng)端系統(tǒng)除了IOS還有Android，這兩種系統(tǒng)設(shè)計(jì)標(biāo)準(zhǔn)和交互方式其實(shí)是存在一些差異的，不過目前市面上大部分APP在設(shè)計(jì)時(shí)并沒有爭(zhēng)對(duì)兩種系統(tǒng)做單獨(dú)的處理。

所以如果沒有特珠需求的話，我們一般也只需要輸出一套原型方案就可以了，不過設(shè)計(jì)過程中需要盡量兼顧這兩個(gè)主流的系統(tǒng)。當(dāng)然，如果你的產(chǎn)品明確需要按照Android的系統(tǒng)規(guī)范來設(shè)計(jì)，你也可以參照本教程設(shè)計(jì)一套Android的原型模板，相關(guān)交互方式可以參照Android版的交互指南規(guī)范。

在開始介紹模板的搭建和使用方法之前，需要先對(duì)APP的界面結(jié)構(gòu)做一個(gè)簡(jiǎn)單的介紹，熟悉了界面結(jié)構(gòu)可以方便我們后續(xù)的設(shè)計(jì)。常見APP的界面主要由以下元素或組件組成：

StatusBar / 狀態(tài)欄

狀態(tài)欄顯示設(shè)備的關(guān)鍵信息，包含設(shè)備模型或網(wǎng)絡(luò)提供商、網(wǎng)絡(luò)信號(hào)強(qiáng)度、電池使用量、時(shí)間等。在特殊界面中可以對(duì)狀態(tài)欄做隱藏處理，或根據(jù)需要自定義狀態(tài)欄背景。

NavBar / 導(dǎo)航欄

導(dǎo)航欄位于app內(nèi)容區(qū)的上方，系統(tǒng)狀態(tài)欄的下方，并且提供在一系列頁面中的導(dǎo)航能力。可在導(dǎo)航欄中顯示當(dāng)前視圖的標(biāo)題，如果標(biāo)題非常冗長且無法精簡(jiǎn)，可以空缺，避免用過多的元素填滿導(dǎo)航欄。導(dǎo)航欄中可以添加文字和圖標(biāo)控件，相關(guān)控件的可點(diǎn)擊區(qū)域需要大于控件的可視大小。

Body / 內(nèi)容區(qū)

內(nèi)容區(qū)域根據(jù)需要進(jìn)行自定義設(shè)計(jì)，常見的設(shè)計(jì)形式有菜單列表、圖標(biāo)列表、卡片列表、圖文組合等。

TabBar / 標(biāo)簽欄

標(biāo)簽欄位于APP底部，方便用戶在不同功能模塊之間進(jìn)行快速切換。標(biāo)簽欄一般用作APP的一級(jí)分類，數(shù)量控制在3-5個(gè)之間。建議使用Badge進(jìn)行提示，讓用戶知道有內(nèi)容更新。

Toolbar / 工具欄

工具欄一般會(huì)出現(xiàn)在視圖的的底部，提供給用戶相關(guān)可操作的功能按紐。如，郵件應(yīng)用程序里的收件箱欄中有刪除、分享、答復(fù)等等。

Modal / 彈出層

移動(dòng)端的彈出層根據(jù)彈出方式不同，共分為模態(tài)窗口、動(dòng)作面板、彈出面板等幾種不同的類型。在實(shí)際使用中，可根據(jù)界面的交互方式選擇對(duì)應(yīng)的類型。

Toast / 輕提示

一種輕量級(jí)反饋提示，可以用來顯示不會(huì)打斷用戶操作的內(nèi)容，適合用于頁面轉(zhuǎn)場(chǎng)、數(shù)據(jù)交互的等場(chǎng)景中。一次只顯示一個(gè)輕提示，有圖標(biāo)的提示字?jǐn)?shù)為4-6個(gè)，沒有圖標(biāo)的輕提示字?jǐn)?shù)不宜超過14個(gè)。

TableView / 列表視圖

列表視圖是移動(dòng)端APP中一種通用的界面元素。很多應(yīng)用程序在一定程度上，都有使用表視圖來顯示數(shù)據(jù)列表。常見的例如IOS的聯(lián)系人應(yīng)用中聯(lián)系人信息列表，另外還有Mail中使用列表視圖顯示郵箱和郵件。列表視圖不僅可以用來顯示文本數(shù)據(jù)，也可以用來呈現(xiàn)圖像數(shù)據(jù)。

以上是豆瓣APP的一個(gè)界面截圖示例，界面的結(jié)構(gòu)用顏色進(jìn)行了區(qū)分，從上至下分別為：狀態(tài)欄、導(dǎo)航欄、內(nèi)容區(qū)、標(biāo)簽欄。

2.結(jié)構(gòu)化的模板搭建

在介紹完APP的界面結(jié)構(gòu)之后，接下來說明一下模板的搭建方法。在本篇教程的結(jié)尾會(huì)提供了已經(jīng)制作好的模板的文件，大家可以下載并參考本部分介紹進(jìn)行使用，也可以參照介紹制作自己的原型模板。

在制作模板時(shí)需要用到對(duì)應(yīng)的機(jī)型設(shè)備的圖片素材，可以通過Dribbble等設(shè)計(jì)分享平臺(tái)找到對(duì)應(yīng)的素材文件，然后對(duì)素材做一些簡(jiǎn)單的處理。處理的過程首先是去掉多余的元素，只保留機(jī)型設(shè)備的框架圖片。另外還需要對(duì)圖片的尺寸進(jìn)行調(diào)整，例如在制作手機(jī)等移動(dòng)端模板時(shí)我們將內(nèi)容區(qū)域定為375px，需要根據(jù)所定的內(nèi)容區(qū)域?qū)D片的尺寸進(jìn)行相應(yīng)的調(diào)整。

為什么模板的內(nèi)容區(qū)域是375px？這個(gè)問題我在上篇教程中進(jìn)行過介紹，所以不再進(jìn)行展開說明。但是需要記住的這個(gè)尺寸是一個(gè)重要的標(biāo)準(zhǔn)，后續(xù)在設(shè)計(jì)過程中相關(guān)元件的寬度尺寸都需要參照這個(gè)標(biāo)準(zhǔn)。機(jī)型設(shè)備的圖片素材準(zhǔn)備好之后，我們?cè)贏xure中創(chuàng)建一個(gè)對(duì)應(yīng)的母版，然后將機(jī)型設(shè)備圖片拖入到母版中。母版的名稱可以按該機(jī)型設(shè)備的名稱命名，后面在使用時(shí)在新建的頁面中拖入該母版即可。

下一步需要?jiǎng)?chuàng)建前面介紹過的APP界面中常見元素或組件，首先大家可以看一下這張圖片中已經(jīng)創(chuàng)建好的模板，其中包含了機(jī)型母版、輕提示、彈層、導(dǎo)航欄、標(biāo)簽欄、內(nèi)容框架等元素。

在這個(gè)模板頁面的概要視圖中可以看到相關(guān)的對(duì)象，所有對(duì)象我都創(chuàng)建了一個(gè)對(duì)應(yīng)的動(dòng)態(tài)面板。這樣的處理主要出于兩個(gè)方面的考慮，一是方便對(duì)相關(guān)元素進(jìn)行編輯維護(hù)，二是相關(guān)對(duì)象的顯示是有順序的，這樣可以方便在概要視圖中進(jìn)行排序處理。

3.模板使用細(xì)節(jié)說明；

在內(nèi)容框架中編輯界面內(nèi)容；

界面的主要內(nèi)容在內(nèi)容框架動(dòng)態(tài)面板中進(jìn)行編輯和維護(hù)，由于該動(dòng)態(tài)面板設(shè)置了自動(dòng)顯示滾動(dòng)條，如果你的界面內(nèi)容超出了一屏，在演示時(shí)可以通過在內(nèi)容框架區(qū)域滾動(dòng)鼠標(biāo)滾輪查看更多內(nèi)容。

關(guān)于模板界面元素的尺寸說明：

模板中的界面元素的尺寸并沒有非常嚴(yán)格的標(biāo)準(zhǔn)，以下尺寸是我根據(jù)比例進(jìn)行設(shè)置的，僅供參考。IphoneX狀態(tài)欄：44px、IphoneX標(biāo)簽欄：80px、Iphone8狀態(tài)欄：28px、IphoneX標(biāo)簽欄：60px、導(dǎo)航欄：40px。另外，內(nèi)容區(qū)域的高度因?yàn)闄C(jī)型設(shè)備的素材圖片不統(tǒng)一可能略有差異，基本上可以忽略。

每個(gè)界面對(duì)應(yīng)一個(gè)頁面；

在設(shè)計(jì)原型時(shí)建議每一個(gè)界面創(chuàng)建一個(gè)對(duì)應(yīng)的頁面，通過添加頁面鏈接進(jìn)行界面跳轉(zhuǎn)，這樣方便對(duì)原型進(jìn)行編輯和維護(hù)。不建議將多個(gè)界面用動(dòng)態(tài)面板堆砌在一起頁面內(nèi)，這樣會(huì)使輸出的原型在演示時(shí)出現(xiàn)卡頓現(xiàn)象。

關(guān)于元素的層級(jí)順序；

在概要視圖中可以看到相關(guān)元素對(duì)應(yīng)動(dòng)態(tài)面板的層級(jí)順序，在使用該模板的時(shí)候請(qǐng)盡量參照此順序，否則可能在演示時(shí)出現(xiàn)顯示錯(cuò)誤的情況。

關(guān)于底部標(biāo)簽欄的設(shè)置；

為了方便維護(hù)可以將標(biāo)簽欄創(chuàng)建為母版，然后添加到需要顯示標(biāo)簽欄的頁面中。另外，在對(duì)應(yīng)的頁面中需要顯示對(duì)應(yīng)的標(biāo)簽選中效果，只需要在該頁面中的標(biāo)簽欄動(dòng)態(tài)面板中添加一個(gè)選中效果的標(biāo)簽元件。

熱區(qū)占位符的使用；

如果頁面中添加了標(biāo)簽欄或工具欄，由于標(biāo)簽頁的動(dòng)態(tài)面板在內(nèi)容框架的動(dòng)態(tài)面板之上，在演示時(shí)會(huì)出現(xiàn)內(nèi)容有一部分被擋住的情況。可以創(chuàng)建一個(gè)高度為100px的熱區(qū)元件為母版，將母版拖入對(duì)應(yīng)的頁面底部，用來解決內(nèi)容區(qū)域被擋住的問題。

4.常用設(shè)計(jì)元素及規(guī)范

經(jīng)常有朋友向我咨詢?nèi)绾卧O(shè)計(jì)出更漂亮美觀的原型，雖然原則上原型能完整的體現(xiàn)出需求細(xì)節(jié)即可，好看并不是我們?cè)谠洼敵鰰r(shí)應(yīng)該關(guān)注的重點(diǎn)，但是如果能滿足說明需求的同時(shí)能把原型做得更漂亮一些更好，這也算是體現(xiàn)專業(yè)程度和工作態(tài)度的一個(gè)方面，而且很多人對(duì)自己的輸出物也是有強(qiáng)烈的美感追求的。

其實(shí)原型設(shè)計(jì)不需要了解太復(fù)雜的設(shè)計(jì)方法，只要掌握一點(diǎn)簡(jiǎn)單的技巧就能達(dá)到美觀的效果，同時(shí)能讓整體更統(tǒng)一和標(biāo)準(zhǔn)。在分享的這套模板中包含了一些基本的設(shè)計(jì)元素，我下面對(duì)其中的一些規(guī)范細(xì)節(jié)進(jìn)行說明，供大家進(jìn)行參考。

配色方案

• ◆ 一般采用黑白灰的配色方案就能夠滿足基本設(shè)計(jì)要求了，但是如果能稍微得加上一些亮色的配色效果，可以使原型更好的體現(xiàn)出視覺層級(jí)，這對(duì)UI是有一定的參考價(jià)值的。不要感覺得配色效果能夠影響UI的設(shè)計(jì)，如果UI會(huì)被原型中的配色影響，只能說明UI的設(shè)計(jì)能力有待提升；
• 整套原型中亮色主色調(diào)不要超過兩個(gè)，對(duì)于主要按紐和重點(diǎn)提示可以加上主色調(diào)色值，次要元素統(tǒng)一使用#000000、#333333、#999999等灰色輔助色；
• ◆ 模板中的這套模板方案中的主色調(diào)是從IOS11的UI設(shè)計(jì)規(guī)范中提取的，你可以根據(jù)自己的需要整理一套自己的配色方案，建議盡量使用扁平化設(shè)計(jì)色值；

配色板使用

Axure中的配色板提供了一些常用的顏色色值，可用作一些常用元素的顏色配色。例如截圖中標(biāo)注1中的縱向的灰色色值可用于相關(guān)字體元素的顏色，標(biāo)注2中橫向的灰色色值可用于相關(guān)元素的背景和線條的顏色。另外，點(diǎn)擊標(biāo)注3中的更多按紐，可以將其它的常用色值加入到自定義顏色中，方便快速的使用。

字體元素

• ◆ 原型設(shè)計(jì)時(shí)的字體字號(hào)建議統(tǒng)一使用偶數(shù)，常用的標(biāo)題字號(hào)為16px、18px、20px，常用的正文字號(hào)為12px、14px；
• 針對(duì)不同字體大小的多行文本單獨(dú)設(shè)置對(duì)應(yīng)的行間距，例如12px的多行文本行間距建議設(shè)置為20，14px的多行文本行間距建議設(shè)置為28；
• 推薦中文字體統(tǒng)一使用微軟雅黑，由于Axure的默認(rèn)字體為Arial，可以通過生成HTML設(shè)置中的字體映射，將Arial映射為微軟雅黑，這樣就不需要在設(shè)計(jì)時(shí)去單獨(dú)設(shè)置每個(gè)元件的字體了。

其它元素

• ◆ 原型設(shè)計(jì)時(shí)元件的寬度建議統(tǒng)一保持為5和10的倍數(shù)，元件的間距建議為10px或20px；
• ◆ 使用鍵盤方向鍵移動(dòng)選中的元件時(shí)每次移動(dòng)距離為1px ，使用ctrl+鍵盤方向鍵每次移動(dòng)距離為10px；
• ◆ 按住Ctrl+鼠標(biāo)拖動(dòng)可以快速的復(fù)制元件，按住Shift+鼠標(biāo)拖動(dòng)可以垂直或水平的移動(dòng)元件；

對(duì)齊及分布工具使用

• 有對(duì)齊強(qiáng)迫癥的朋友可以使用頂部工具欄中的對(duì)齊及分布工具對(duì)元件進(jìn)行處理，右擊頂部的工具欄區(qū)◆ 域可以自定義顯示或隱藏相關(guān)的工具圖標(biāo)；
• 選中多個(gè)元件時(shí)可以使用對(duì)齊工具快速的對(duì)多個(gè)元件進(jìn)行各種對(duì)齊處理，還可以使用分布工具快速的對(duì)多個(gè)元件進(jìn)行垂直或水平分布處理；

5.使用輔助線進(jìn)行排版；

在以前的教程中已經(jīng)介紹過輔助線的使用方法，合理的使用輔助線可以幫助我們提升設(shè)計(jì)效率，同時(shí)能讓輸出的原型效果更標(biāo)準(zhǔn)，所以強(qiáng)烈建議大家在設(shè)計(jì)過程中使用。以下是模板中內(nèi)容框架編輯區(qū)域的截圖，是我常用使用輔助線用來排版的方式。截圖中的輔助線均為橫向x軸輔助線，可以看到其中共有4條，分別介紹一下它們的作用和位置：

• 第1條輔助線是用來劃分左邊的內(nèi)容留白區(qū)域，例如我一般習(xí)慣將左邊留白為20px，這條輔助線位于x軸的20px位置。
• 第2條輔助線是內(nèi)容居中輔助線，之前已經(jīng)介紹過模板的設(shè)計(jì)寬度標(biāo)準(zhǔn)為375px，這條輔助線位于x軸的188px位置；（375px/2=187.5px）
• 第3條輔助線用來劃分右邊的內(nèi)容留白區(qū)域，例如右邊跟左邊留白一樣為20px，這條輔助線位于x軸的355px位置；(375px-20px=355px)
• 第4條輔助線是用來劃分內(nèi)容設(shè)計(jì)區(qū)域，例如模板的設(shè)計(jì)寬度標(biāo)準(zhǔn)為375px，這條輔助線位于位于x軸的375px位置；

這些輔助線的用法只是作為參考，可以根據(jù)自己的需要新建對(duì)應(yīng)的輔助線。鼠標(biāo)光標(biāo)移動(dòng)到編輯區(qū)域的左側(cè)和頂部的標(biāo)尺區(qū)域，按住鼠標(biāo)左鍵并往編輯區(qū)域拖動(dòng)時(shí)，就可以生成橫向x軸或縱向y軸的輔助線，然后將輔助線拖動(dòng)到對(duì)應(yīng)的位置即可。輔助線還有一個(gè)特性就是當(dāng)拖動(dòng)元件靠近它時(shí)，元件會(huì)自動(dòng)吸附到輔助線的邊緣達(dá)到快速對(duì)齊的效果。

幾點(diǎn)輔助線的使用小技巧：

• 右擊輔助線可以將其鎖定，以防止拖動(dòng)元件時(shí)會(huì)將輔助線會(huì)跟著一起移動(dòng)；
• 可以通過按住Ctrl拖動(dòng)創(chuàng)建全局輔助線，全局輔助線就是在所有頁面中產(chǎn)生一條相同的輔助線；
• 在“布局—柵格和輔助線—鎖定輔助線”中選中可以將所有的輔助線保持鎖定狀態(tài)且無法刪除；
• 在“布局—柵格和輔助線—?jiǎng)h除輔助線”中可以清除所有頁面中的輔助線；
• 在“布局—柵格和輔助線—輔助線設(shè)置”中可以修改輔助線的顏色或進(jìn)行更多設(shè)置；

6.Toast提示交互設(shè)置；

移動(dòng)端原型中最常用的交互效果就是彈出層和輕提示兩種，模板中已經(jīng)包含了這種兩交互效果的相關(guān)元件和事件，這里再單獨(dú)簡(jiǎn)單的介紹一下。

Toast提示顯示效果

在模板頁面的概要視圖中可以看到名為“提示”的動(dòng)態(tài)面板，需要顯示的提示信息在這個(gè)動(dòng)態(tài)面板中編輯就可以了。當(dāng)前的動(dòng)態(tài)面板中有一個(gè)“操作成功”的提示狀態(tài)，如果在一個(gè)頁面中顯示多個(gè)提示，可以新增對(duì)應(yīng)的狀態(tài)然后修改相關(guān)的提示內(nèi)容。

選中提示的動(dòng)態(tài)面板的狀態(tài)右擊選擇復(fù)制狀態(tài)可以快速創(chuàng)建新的提示。建議對(duì)每個(gè)對(duì)應(yīng)的提示狀態(tài)進(jìn)行命名，這樣方便后續(xù)進(jìn)行管理。關(guān)于輕提示的基本使用規(guī)范請(qǐng)參照前面的介紹內(nèi)容。

Toast提示的顯示方式設(shè)置很簡(jiǎn)單，只需要在對(duì)應(yīng)的元件事件上加入以上的交互動(dòng)作。首先設(shè)置提示動(dòng)態(tài)面板中對(duì)應(yīng)的狀態(tài)，然后設(shè)置顯示動(dòng)態(tài)面板，顯示時(shí)有一個(gè)逐漸的動(dòng)畫效果。

Toast提示顯示以后會(huì)在3秒后自動(dòng)逐漸隱藏，模板中的這個(gè)交互動(dòng)作已經(jīng)加在提示動(dòng)態(tài)面板的顯示時(shí)事件中了，不需要再單獨(dú)的進(jìn)行設(shè)置。

7.常用彈層交互設(shè)置

模態(tài)窗口交互效果

移動(dòng)端的彈層共分為模態(tài)窗口、動(dòng)作面板、彈出面板等幾種不同的類型。在模板頁面的概要視圖中可以看到名為“彈層”的動(dòng)態(tài)面板，可以根據(jù)需要?jiǎng)?chuàng)建更多其它的彈層狀態(tài)，還能在對(duì)應(yīng)的面板狀態(tài)屬性中設(shè)置透明背景的遮罩效果。

上面截圖中的為比較常見的模態(tài)窗口彈層效果，設(shè)置方式是在對(duì)應(yīng)的元件事件上加入以上的交互動(dòng)作。另外，根據(jù)模態(tài)窗口、動(dòng)作面板、彈出面板這幾種彈層類型的彈出方式不同，需要設(shè)置顯示時(shí)為向上滑動(dòng)和逐步等動(dòng)畫效果。

8.導(dǎo)航欄切換交互設(shè)置

最后介紹一下如何實(shí)現(xiàn)內(nèi)容區(qū)域滾動(dòng)時(shí)，導(dǎo)航欄自動(dòng)切換的交互效果。首先需要在導(dǎo)航欄的動(dòng)態(tài)面板中創(chuàng)建對(duì)應(yīng)的狀態(tài)，然后選中內(nèi)容框架動(dòng)態(tài)面板，在它的滾動(dòng)時(shí)事件中按照上面的格式加入對(duì)應(yīng)的條件判斷即可。

在這個(gè)設(shè)置用到了條件判斷和函數(shù)，條件的詳細(xì)設(shè)置見上方的截圖。它的原理是當(dāng)內(nèi)容框架垂直滾動(dòng)高度大于70時(shí)設(shè)置導(dǎo)航欄動(dòng)態(tài)面板的顯示狀態(tài)為2，當(dāng)內(nèi)容框架垂直滾動(dòng)高度大小于70設(shè)置導(dǎo)航欄動(dòng)態(tài)面板的顯示狀態(tài)為1。其中用到的This.scrollY函數(shù)是獲取當(dāng)前元件的直滾動(dòng)高度，70的值可以根據(jù)需要自己設(shè)置。

好了，到此這篇基于設(shè)備模板的移動(dòng)端原型設(shè)計(jì)方法的分享基本介紹完了。最后提供的是iPhoneX And iPhone8 Mockup 原型模板的源文件下載，大家可以結(jié)合本文中的相關(guān)介紹進(jìn)行使用。

最后再給大家分享一套本人整理設(shè)計(jì)的移動(dòng)端元件庫，這套元件庫中的相關(guān)元件是可以在這個(gè)模板中復(fù)用的，后續(xù)也會(huì)不斷的進(jìn)行優(yōu)化和完善，有需要的朋友可以關(guān)注一下。

言

在學(xué)習(xí)和工作中，我們經(jīng)常需要使用日志來記錄程序的運(yùn)行狀態(tài)和調(diào)試信息。而為了更好地區(qū)分不同的日志等級(jí)，我們可以使用不同的顏色來呈現(xiàn)，使其更加醒目和易于閱讀。

在下圖運(yùn)行結(jié)果中，我們使用了 colorlog 庫來實(shí)現(xiàn)彩色日志輸出。通過定義不同日志等級(jí)對(duì)應(yīng)的顏色，我們可以在控制臺(tái)中以彩色的方式顯示日志信息。例如，DEBUG 級(jí)別的日志使用白色，INFO 級(jí)別的日志使用綠色，WARNING 級(jí)別的日志使用黃色，ERROR 級(jí)別的日志使用紅色，CRITICAL 級(jí)別的日志使用藍(lán)色。

但是在查看日志文件時(shí)，我們會(huì)發(fā)現(xiàn)日志信息是系統(tǒng)默認(rèn)的字體顏色，并且前后多了一些特殊符號(hào)，例如 [32m 等。這是因?yàn)樵诳刂婆_(tái)中使用的是 ANSI 轉(zhuǎn)義序列來實(shí)現(xiàn)彩色文本效果，而這些特殊符號(hào)是 ANSI 轉(zhuǎn)義序列的一部分。如下圖所示：

現(xiàn)在有一個(gè)需求，在前端頁面直接查看日志內(nèi)容并還原彩色文本效果，因此，我們將進(jìn)行以下內(nèi)容講解：

1. 什么是 ANSI 轉(zhuǎn)義序列？
2. 如何在前端頁面直接查看日志內(nèi)容？
3. 如何在前端頁面還原彩色文本效果？

本文代碼點(diǎn)擊此處跳轉(zhuǎn)，往期系列文章請(qǐng)?jiān)L問博主的 項(xiàng)目實(shí)戰(zhàn)專欄，博文中的所有代碼全部收集在博主的 GitHub 倉庫中；

ANSI 轉(zhuǎn)義序列

ANSI 轉(zhuǎn)義序列是美國國家標(biāo)準(zhǔn)化組織（American National Standards Institute，ANSI）制定的標(biāo)準(zhǔn)，是一種用于控制文本終端顯示的特殊字符序列。它們以 3[ 開頭，以字母和數(shù)字組合的形式表示不同的控制功能。

ANSI 轉(zhuǎn)義序列可以用于控制文本的顏色、背景色、文本樣式（如粗體、斜體等）、光標(biāo)位置、清屏等操作。通過在輸出文本中插入適當(dāng)?shù)?ANSI 轉(zhuǎn)義序列，可以實(shí)現(xiàn)豐富的終端顯示效果。

以下是一些常用的 ANSI 轉(zhuǎn)義序列示例：

• 3[0m：重置所有屬性，恢復(fù)默認(rèn)設(shè)置；
• 3[31m：設(shè)置文本顏色為紅色；
• 3[42m：設(shè)置背景顏色為綠色；
• 3[1m：設(shè)置文本為粗體；
• 3[4m：設(shè)置文本為下劃線；
• 3[2J：清屏；

需要注意的是，ANSI 轉(zhuǎn)義序列在不同的終端和操作系統(tǒng)上的支持程度可能會(huì)有所不同。在某些終端中，可能無法正確解釋和顯示 ANSI 轉(zhuǎn)義序列。

我們以 3[31m 和 3[42m 為例，輸出一個(gè)綠底紅字的句子 Hello World! --sidiot.，代碼如下所示：

log.debug("3[42m3[31mHello World! --sidiot.3[0m3[0m")

運(yùn)行結(jié)果：

前端頁面直接查看日志內(nèi)容

這里的話，我們使用 Python 的 http.server 模塊來啟動(dòng)一個(gè)簡(jiǎn)單的 HTTP 服務(wù)器。

比較快捷的方式就是在日志文件夾中打開終端，輸入 python -m http.server 8888 即可，運(yùn)行結(jié)果如下所示：

不過這種方式相對(duì)來說還是不太安全的，因此我們可以通過設(shè)置白名單的方式，來規(guī)避一些潛在的安全隱患，代碼如下所示：

import http.server
import socketserver

class HTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
    def check_client_address(self):
        # 設(shè)置白名單，只允許特定的IP地址或主機(jī)訪問
        whitelist = ['127.0.0.1', 'localhost']

        client_address = self.client_address[0]
        if client_address not in whitelist:
            self.send_response(403)
            self.end_headers()
            self.wfile.write(b'Forbidden. Please contact sidiot.')
            return False

        return True

    def do_GET(self):
        if not self.check_client_address():
            return
        
        super().do_GET()

with socketserver.TCPServer(('0.0.0.0', 8888), HTTPRequestHandler) as httpd:
    httpd.serve_forever()

目前本機(jī)的 IP 為 192.168.124.23，當(dāng)我們以 127.0.0.1 來訪問 8888 服務(wù)端口時(shí)，訪問是成功的，但是當(dāng)我們用 192.168.124.23 來訪問服務(wù)端口時(shí)，訪問是失敗的。

運(yùn)行結(jié)果：

現(xiàn)在我們點(diǎn)擊文件，它會(huì)直接通過瀏覽器直接下載，但是我們需要的是在網(wǎng)頁上能夠直接閱覽文件中的內(nèi)容，因此我們可以從 do_GET() 下手。

我們可以設(shè)計(jì)一個(gè)根據(jù)傳入的文件名參數(shù)，讀取本地文件并作為響應(yīng)結(jié)果進(jìn)行返回的方法，然后根據(jù)一定的規(guī)則進(jìn)行觸發(fā)，代碼如下所示：

def read_file(self):
    try:
        self.send_response(200)
        self.send_header("Content-Type", "text/plain; charset=utf-8")
        self.end_headers()
        self.wfile.write(open(self.path[6:], 'rb').read())

    except FileNotFoundError:
        self.send_response(404)
        self.end_headers()
        self.wfile.write(b'File not found!')

def do_GET(self):
    if self.check_client_address():
        if self.path.startswith("/?log="):
            self.read_file()
        else:
            super().do_GET()

上述代碼通過檢查請(qǐng)求的資源路徑來處理 GET 請(qǐng)求。如果請(qǐng)求的資源路徑前綴是 /?log=，且是當(dāng)前目錄下存在的日志文件，它會(huì)讀取文件并將其內(nèi)容作為響應(yīng)發(fā)送。否則，它會(huì)使用基類的默認(rèn)行為處理普通的 GET 請(qǐng)求。

運(yùn)行結(jié)果：

至此，我們已經(jīng)實(shí)現(xiàn)了前端頁面直接查看日志內(nèi)容的功能。

前端頁面還原彩色文本效果

原理分析

當(dāng)我們想要在前端頁面展示 ANSI 字體的彩色效果時(shí)，我們只需要簡(jiǎn)單地將 ANSI 轉(zhuǎn)義序列轉(zhuǎn)換成相應(yīng)的 HTML 代碼就可以實(shí)現(xiàn)了。這個(gè)轉(zhuǎn)換過程實(shí)際上可以通過編寫一個(gè) Python 函數(shù)來實(shí)現(xiàn)，該函數(shù)可以接受包含 ANSI 控制碼的字符串作為輸入，并將其轉(zhuǎn)換為帶有相應(yīng)樣式的 HTML 代碼輸出，代碼如下所示：

def convert_ansi_to_html(ansi_text):
    ansi_to_html = {
        '\x1b[31m': '<span style="color: red;">',
        '\x1b[42m': '<span style="background-color: green;">',
        ...,
    }
    html_text = re.sub(r'\x1b[[0-9;]*m', lambda match: ansi_to_html.get(match.group(0), ''), ansi_text)

    return html_text


if __name__ == '__main__':
    ansi = "\033[42m\033[31mHello World! --sidiot.\033[0m\033[0m"
    print(ansi)
    html = convert_ansi_to_html(ansi)
    print(f"convert content: {html}")

需要注意的是，在 ANSI 轉(zhuǎn)義序列中，\x1b 和 3 都代 表ASCII 碼中的 Escape 字符，用于開始一個(gè)轉(zhuǎn)義序列。

運(yùn)行結(jié)果：

使用 ansiconv 轉(zhuǎn)換

接下來，我們借助已有的庫函數(shù) ansiconv 進(jìn)行 ANSI 的轉(zhuǎn)換。

通過 pip 進(jìn)行安裝：

pip install ansiconv

根據(jù) ansiconv 的官方文檔使用其中的三個(gè)方法 to_plain()，to_html() 和 base_css() 來實(shí)現(xiàn)在前端頁面展示 ANSI 字體的彩色效果，代碼如下所示：

import ansiconv

ansi = "\033[42m\033[31mHello World! --sidiot.\033[0m\033[0m"
print(f"Ansi: {ansi}")
plain = ansiconv.to_plain(ansi)
html = ansiconv.to_html(ansi)
print(f"Convert Plain: {plain}")
print(f"Convert HTML: {html}")

在 base_css() 中會(huì)有相關(guān)的 CSS 映射表，如下所示：

css_rule('.ansi31', color="#FF0000"),
css_rule('.ansi42', background_color="#00FF00"),

運(yùn)行結(jié)果：

研究 ansiconv 源碼

我們將通過研究 ansiconv 的源碼，以便深入了解它是如何將 ANSI 轉(zhuǎn)換成純文本或 HTML 代碼的工作原理。

to_plain() 的源碼如下所示：

上述代碼使用正則表達(dá)式匹配字符串中的 ANSI 轉(zhuǎn)義序列，并將其替換為空字符串，從而得到不包含轉(zhuǎn)義序列的純文本。

正則表達(dá)式的含義如下：

• \x1B：匹配 ESCAPE 字符；
• \[：匹配左方括號(hào)；
• [0-9;]*：匹配零個(gè)或多個(gè)數(shù)字或分號(hào)；
• [ABCDEFGHJKSTfmnsulh]：匹配 ANSI 轉(zhuǎn)義序列中的控制字符；

我們通過 re.findall() 方法來獲取所有匹配的結(jié)果，這樣夠清晰地捕獲所有符合條件的匹配項(xiàng)，從而更好地理解 ansiconv 是如何進(jìn)行 ANSI 到純文本的轉(zhuǎn)換，代碼如下所示：

ansi = "\033[42m\033[31mHello World! --sidiot.\033[0m\033[0m"
print(re.findall(r'\x1B[[0-9;]*[ABCDEFGHJKSTfmnsulh]', ansi))

運(yùn)行結(jié)果：

to_html() 的源碼如下所示：

上述代碼將 ANSI 字符串分割成塊，并對(duì)每個(gè)塊調(diào)用 _block_to_html() 函數(shù)進(jìn)行解析和轉(zhuǎn)換，同時(shí)還處理了 ANSI 命令 "A"，模擬向上移動(dòng)光標(biāo)的行為。如果 replace_newline 為 True，則 HTML 字符串中的換行符 \n 將替換為 <br />\n 以保留 HTML 輸出中的換行符。

其中 _block_to_html() 的源碼如下所示：

上述代碼使用正則表達(dá)式匹配 ANSI 代碼，并根據(jù)匹配結(jié)果生成對(duì)應(yīng)的 HTML 代碼。

正則表達(dá)式的含義：

• ^：表示匹配字符串的開頭。
• \[：匹配左方括號(hào) [。
• (?P<code>\d+(?:;\d+)*)?：這是一個(gè)命名捕獲組，用于匹配 ANSI 代碼中的數(shù)字部分。它由以下組成： \d+：匹配一個(gè)或多個(gè)數(shù)字。 (?:;\d+)*：這是一個(gè)非捕獲組，用于匹配分號(hào) ; 和一個(gè)或多個(gè)數(shù)字的重復(fù)出現(xiàn)。(?: ... ) 表示非捕獲組，* 表示重復(fù)零次或多次。
• (?P<command>[Am])：這是另一個(gè)命名捕獲組，用于匹配 ANSI 代碼中的命令部分。它由以下組成： [Am]：匹配字符 A 或 m。

我們可以通過運(yùn)行源碼里的部分代碼來幫助理解，代碼如下所示：

text = ("\x1B[0;32;45msidiot\n"
        "\033[42m\033[31mHello World! --sidiot.\033[0m\033[0m")
print(text)
blocks = text.split('\x1B')
print(blocks)
for block in blocks:
    match = re.match(r'^[(?P<code>\d+(?:;\d+)*)?(?P<command>[Am])', block)
    if match is not None:
        print("\nmatch:", match, ", code:", match.group('code'), ", command:", match.group('command'))

運(yùn)行結(jié)果：

實(shí)際應(yīng)用

通過深入理解 ANSI 轉(zhuǎn)換思路和 ansiconv 源碼，我們可以為之前的 http.server 服務(wù)帶來全新的優(yōu)化。

首先，將原先的 read_file() 方法進(jìn)行優(yōu)化，代碼如下所示：

def read_file(self, content_type, file_io):
    try:
        self.send_response(200)
        self.send_header("Content-Type", f"{content_type}; charset=utf-8")
        self.end_headers()
        self.wfile.write(file_io)

    except FileNotFoundError:
        self.send_response(404)
        self.send_header("Content-Type", "text/plain; charset=utf-8")
        self.end_headers()
        self.wfile.write(b'File not found!')

上述代碼通過接收 content_type 和 file_io 兩個(gè)參數(shù)，實(shí)現(xiàn)將自定義內(nèi)容作為響應(yīng)返回給客戶端。

然后修改請(qǐng)求路徑，使其能夠返回純文本和 HTML 兩種不同類型的內(nèi)容，代碼如下所示：

def do_GET(self):
    if self.check_client_address():
        if self.path.startswith("/?plain="):
            file = open(self.path[8:], 'rb').read()
            plain = ansiconv.to_plain(file.decode('UTF-8'))
            self.read_file("text/plain", plain.encode())
        elif self.path.startswith("/?html="):
            file = open(self.path[7:], 'rb').read()
            conv = ansiconv.to_html(file.decode('UTF-8'))
            css = ansiconv.base_css()
            html = """
            <html>
              <head><style>{0}</style></head>
              <body>
                <pre class="ansi_fore ansi_back">{1}</pre>
              </body>
            </html>
            """.format(css, conv)
            print(html)
            self.read_file("text/html", html.encode())
        else:
            super().do_GET()

這里要注意的是，需要設(shè)置 CSS 樣式，不然 class 類是無法進(jìn)行渲染的。

純文本運(yùn)行結(jié)果：

HTML 運(yùn)行結(jié)果：

后記

在本文中，我們探討了如何實(shí)現(xiàn)將 ANSI 字體在前端頁面進(jìn)行彩色展示的方法。在前端頁面中直接顯示 ANSI 轉(zhuǎn)義序列是不起作用的，因?yàn)闉g覽器不會(huì)解析和處理這些轉(zhuǎn)義序列。

為了在前端頁面實(shí)現(xiàn)彩色展示，我們介紹了一種方法，即將 ANSI 轉(zhuǎn)義序列轉(zhuǎn)換為對(duì)應(yīng)的 HTML 代碼。通過解析 ANSI 轉(zhuǎn)義序列并將其轉(zhuǎn)換為適當(dāng)?shù)?HTML 標(biāo)簽和樣式，我們可以在前端頁面上還原彩色文本的效果。

在本文中，我們使用了 Python 中的 ansiconv 庫來實(shí)現(xiàn) ANSI 轉(zhuǎn)換。該庫提供了 to_plain 和 to_html 兩個(gè)方法，分別用于將 ANSI 轉(zhuǎn)義序列轉(zhuǎn)換為純文本和 HTML 代碼。我們還展示了如何使用這些方法來轉(zhuǎn)換 ANSI 字符串，并在前端頁面上顯示轉(zhuǎn)換后的結(jié)果。

通過本文的介紹，讀者可以了解到如何在前端頁面實(shí)現(xiàn)彩色文本的展示，從而提升用戶體驗(yàn)和可讀性。無論是在日志查看器、終端模擬器還是其他需要展示彩色文本的應(yīng)用中，這種技術(shù)都能發(fā)揮重要作用。

以上就是 從終端到瀏覽器：實(shí)現(xiàn) ANSI 字體在前端頁面的彩色展示 的所有內(nèi)容了，希望本篇博文對(duì)大家有所幫助！歡迎大家持續(xù)關(guān)注我的博客，一起分享學(xué)習(xí)和成長的樂趣！?

作者：sidiot
鏈接：https://juejin.cn/post/7381820436274184202