整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML 實(shí)例

          TML 基礎(chǔ)

          非常簡(jiǎn)單的HTML文檔

          HTML 標(biāo)題

          HTML 段落

          HTML 鏈接

          HTML 圖片

          實(shí)例解析

          HTML 標(biāo)題

          HTML 標(biāo)題

          在html源碼中插入注釋

          插入水平線

          實(shí)例解析

          HTML 段落

          HTML 段落

          更多段落

          本例演示在 HTML 文檔中折行的使用。

          HTML 格式化的某些問題。

          實(shí)例解析

          HTML 文本格式化

          文本格式化

          此例演示如何使用 pre 標(biāo)簽對(duì)空行和空格進(jìn)行控制。

          此例演示不同的"計(jì)算機(jī)輸出"標(biāo)簽的顯示效果。

          此例演示如何在 HTML 文件中寫地址。

          此例演示如何實(shí)現(xiàn)縮寫或首字母縮寫。

          此例演示如何改變文字的方向。

          此例演示如何實(shí)現(xiàn)長短不一的引用語。

          文本下劃線與刪除線

          實(shí)例解析

          HTML 樣式

          HTML Style 元素

          背景色樣式

          字體樣式,顏色,大小

          文本對(duì)齊樣式

          設(shè)置文本字體

          設(shè)置文本字體大小

          設(shè)置文本字體顏色

          設(shè)置文本字體,字體大小,字體顏色

          HTML使用不同樣式

          沒有下劃線的鏈接

          鏈接到一個(gè)外部樣式表

          實(shí)例解析

          HTML 鏈接

          創(chuàng)建超級(jí)鏈接

          將圖像作為鏈接

          在新的瀏覽器窗口打開鏈接

          鏈接到同一個(gè)頁面的不同位置

          跳出框架

          創(chuàng)建電子郵件鏈接

          創(chuàng)建電子郵件鏈接 2

          實(shí)例解析

          HTML 圖像

          插入圖像

          從不同的位置插入圖片

          排列圖片

          本例演示如何使圖片浮動(dòng)至段落的左邊或右邊。

          制作圖像鏈接

          創(chuàng)建圖像映射

          實(shí)例解析

          HTML 表格

          簡(jiǎn)單的表格

          沒有邊框的表格

          表格中的表頭

          帶有標(biāo)題的表格

          跨行或跨列的表格單元格

          表格內(nèi)的標(biāo)簽

          單元格邊距(Cell padding)

          單元格間距(Cell spacing)

          實(shí)例解析

          HTML 列表

          無序列表

          有序列表

          不同類型的有序列表

          不同類型的無序列表

          嵌套列表

          嵌套列表 2

          定義列表

          實(shí)例解析

          HTML Forms 和 Input

          創(chuàng)建文本域(Text fields)

          創(chuàng)建密碼域

          復(fù)選框

          單選按鈕

          簡(jiǎn)單的下拉列表

          預(yù)選下拉列表

          本例演示如何創(chuàng)建一個(gè)文本域(多行文本輸入控件)。

          創(chuàng)建一個(gè)按鈕

          本例演示如何在數(shù)據(jù)周圍繪制一個(gè)帶標(biāo)題的框。

          帶有文本域與輸入域的表單

          帶有復(fù)選框與提交按鈕的form表單

          帶有單選框與提交按鈕的表單

          發(fā)送郵件表單

          實(shí)例解析

          HTML iframe

          內(nèi)聯(lián)框架 (HTML頁面中插入框架)

          實(shí)例解析

          HTML 頭部元素

          描述了文檔標(biāo)題

          HTML頁面中默認(rèn)的URL鏈接

          提供文檔元數(shù)據(jù)

          實(shí)例解析

          HTML 腳本

          插入一個(gè)腳本

          使用 <noscript> 標(biāo)簽

          實(shí)例解析

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          章作者分享了一種基于設(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


          主站蜘蛛池模板: 久久精品一区二区三区日韩| 国产一区二区三区日韩精品| 激情亚洲一区国产精品| 国产精品一区在线观看你懂的| 国产无线乱码一区二三区| 国产视频一区二区| 能在线观看的一区二区三区| 日韩精品一区二区三区大桥未久 | 国产午夜精品一区二区三区小说 | 中文字幕一区二区三| 久久se精品一区二区国产| 亚洲国产激情在线一区| 国产在线精品一区二区三区不卡| 亚洲av鲁丝一区二区三区 | 亚洲欧美日韩中文字幕在线一区| 久久精品国产亚洲一区二区三区| 少妇精品久久久一区二区三区| 中文字幕人妻第一区| 波多野结衣的AV一区二区三区| 色婷婷亚洲一区二区三区| 久久91精品国产一区二区| 精品人妻少妇一区二区三区在线| 成人丝袜激情一区二区| 亚洲日韩AV一区二区三区四区 | 亚洲熟妇无码一区二区三区导航| 中文字幕不卡一区| 国产高清一区二区三区四区| 国产日韩精品一区二区在线观看播放 | 四虎永久在线精品免费一区二区| 美女视频黄a视频全免费网站一区| 福利一区二区在线| 日本不卡在线一区二区三区视频 | 国产情侣一区二区三区 | 亚洲一区欧洲一区| 久久久一区二区三区| 精品黑人一区二区三区| 国产一区二区三区四| 亲子乱av一区二区三区| 久久精品无码一区二区WWW| 成人国内精品久久久久一区| 无码毛片视频一区二区本码|