本系列文章旨在總結展現(xiàn)層的元素，分為三部分進行敘述对供，基本元素位他、表單、控件产场。
首先要清楚展現(xiàn)層是什么鹅髓，按照軟件開發(fā)的三層架構，展現(xiàn)層是直接暴露給用戶京景，用于數(shù)據(jù)的輸入與輸出窿冯，換句話說，就是用戶界面确徙。
那么醒串，展現(xiàn)層是由什么組成的呢？總的而言米愿，展現(xiàn)層可分為輸出和輸入兩部分厦凤，其組成元素為：
1、輸出頁面：文字育苟、圖片较鼓、音頻、動畫、視頻博烂。
2香椎、輸入頁面：表單。
以下介紹輸出頁面元素的概念與關注點禽篱。
一畜伐、文字
文字是最最基礎的元素了，文字占據(jù)產(chǎn)品展現(xiàn)層大部分區(qū)域躺率，它的重要性不可言喻玛界。因此，對于文字的關注是必不可少悼吱。
1慎框、編碼
為什么要把編碼放在第一位呢，因為在計算機中后添，數(shù)據(jù)以01保存笨枯，編碼則是將這些01數(shù)據(jù)翻譯成文字，因為存在多種編碼遇西，所以用錯編碼會導致中文文字亂碼馅精。亂碼問題一般是由開發(fā)處理的，常用的編碼為UTF-8粱檀。
2洲敢、字體
字體要關注兩個點，首先確保使用的字體不侵權梧税，其次字體在保證易辨認的前提下符合產(chǎn)品場景沦疾。字體的核心關注人為UI。
2第队、顏色
如何使用合適的文字顏色呢哮塞，一是保證文字可見，例如灰色背景使用黑色字體明顯不合適凳谦。二是重點凸出忆畅，例如重點內(nèi)容使用更醒目的顏色來顯示，必要時可加粗尸执。
3家凯、字號
字號要注意文字自適應，有一個固定分辨率的固定字號如失，在不同分辨率的屏幕下會等比例綻放绊诲。同時應注意不同字號能引起的關注度不同，一般而言褪贵，越要展現(xiàn)的內(nèi)容字號應越大掂之。
4抗俄、鏈接
即文字加上鏈接，鏈接要注意內(nèi)鏈和外鏈的區(qū)別世舰，鏈接應加下劃線或特殊背景色动雹。
5、標題跟压、下劃胰蝠、加粗、刪除線
二震蒋、圖片
1茸塞、尺寸
圖片有大有小，大圖片使用場景為banner查剖、列表翔横、歡迎引導頁、商品主圖等梗搅。而小圖片使用特別廣泛，logo效览、icon无切、甚至特殊的文字等。
2丐枉、自適應
由于目標終端分辨率不統(tǒng)一哆键，因此使用的圖片要考慮到自適應的問題，這是前端的責任瘦锹。
三籍嘹、動畫
動畫是什么呢，它是由用戶或系統(tǒng)發(fā)起弯院，引起展現(xiàn)層內(nèi)容發(fā)生變化的過程辱士。例如點擊一個按鈕令部分文字跳轉(zhuǎn)，頁面切換動畫效果等等听绳。關于動畫的內(nèi)容非常多颂碘，但總體關注點可為分兩部分，頁面內(nèi)動畫和頁面跳轉(zhuǎn)動畫椅挣。
1头岔、頁面內(nèi)動畫
前幾年推出的HTML5給網(wǎng)頁帶來非常多的酷炫效果，讓頁面動畫更上一個臺階鼠证。但其本質(zhì)是用戶操作的銜接過渡效果峡竣，能起到提交上一步操作、通知用戶準備下一步操作的作用量九。但并不是動畫越多越好适掰，簡單的動畫紅袖添香，繁雜的動畫多此一舉。所以什么時候應用動畫效果是一個關鍵攻谁，若是低頻\重要\核心的操作稚伍，可適當添加過渡動畫，但若是高頻操作就盡量不要動畫戚宦。
2个曙、頁面跳轉(zhuǎn)動畫
說到頁面跳轉(zhuǎn)動畫，關于頁面跳轉(zhuǎn)使用問題受楼，手機行業(yè)有一個經(jīng)典的例子垦搬。在目前全面屏的時代，蘋果和安卓的返回操作有非常本質(zhì)的區(qū)別艳汽。安卓返回上一頁是沒有任何動畫效果猴贰，而蘋果有一個非常順滑從左到右的效果，在效果上面蘋果完勝河狐。但在操作方面上米绕，安卓支持左右側邊劃動，但蘋果由于動畫效果的存在馋艺，只能從左側劃動栅干，對于右手操作的人非常不方便，可以說捐祠，在操作體驗上安卓完勝碱鳞。所以說，頁面跳轉(zhuǎn)動畫要配合用戶操作進行踱蛀，若無合適的方案窿给，盡量不要加跳轉(zhuǎn)動畫。
四率拒、音頻
在頁面中嵌入音頻的操作還是非常少見的崩泡，常見于音樂和聊天產(chǎn)品，但某些特殊領域也會有音頻存在俏橘，例如在線學習允华、在線禮拜等。音頻的使用要注意音頻的生產(chǎn)者寥掐、下載問題靴寂。
1、音頻生產(chǎn)者
顧名思義召耘，就是這段音頻的提供者百炬，有兩種，一種是管理員提供污它，一個是用戶提供剖踊。若是管理員提供庶弃，約束可放寬，例如允許提供不大于100M的音頻文件德澈。若是用戶提供歇攻，要考慮音頻大小，一般不大于10M梆造，同時對格式要有嚴格的限制缴守，必要時上傳時要轉(zhuǎn)碼。
2镇辉、下載
產(chǎn)品有時會提供音頻下載屡穗，但很多場景會對下載進行約束，不允許進行下載操作忽肛，例如微信瀏覽器村砂、蘋果safari瀏覽器。安卓可引導用戶在瀏覽器中打開下載屹逛，蘋果若有APP可引導用戶下載APP础废，若沒有則下載功能可屏蔽掉。
五罕模、視頻
視頻元素有兩種色迂，長視頻的短視頻，其中長視頻常見于各種視頻產(chǎn)品手销，例如愛奇藝、騰訊視頻图张、網(wǎng)易云課堂等锋拖，但短視頻應用場景主要應用于，產(chǎn)品介紹祸轮、操作說明等一些較特殊的領域兽埃。它和音頻一樣，都屬于常規(guī)產(chǎn)品低頻內(nèi)容适袜。此處就不作分析柄错。
