雙擊安裝字體，安裝后重啟PPT請安裝字體山東科技職業(yè)學院UI設(shè)計UIdesignUI設(shè)計UIdesign山東科技職業(yè)學院6.1了解H5界面設(shè)計講課人：郭杰學習目的1.什么是H52.H5的特點、應用、尺寸3.H5的頁面風格和界面設(shè)計6.1.1什么是H5？

H5指的是移動端上基于HTML5技術(shù)的交互動態(tài)網(wǎng)頁，是用于移動互聯(lián)網(wǎng)的一種新型營銷工具，通過移動平臺（如微信）傳播。6.1.2H5的特點

H5具有跨平臺、多媒體、強互動以及易傳播的特點?？缙脚_多媒體強互動易傳播H5具有強大的兼容性，可以同時兼容PC端以及iOS和Android系統(tǒng)的移動端設(shè)備。H5具有多媒體性，其展現(xiàn)形式可以包括文字、圖像、動畫、音頻、視頻等多種視聽信息。H5交互形式豐富，包括結(jié)合手勢交互、利用硬件交互以及使用技術(shù)交互等交互形式，這些交互能夠充分激起用戶的參與感，進行互動。移動互聯(lián)網(wǎng)的發(fā)展，通過微信傳播的H5只需要點擊右上角的更多就可以發(fā)送給朋友、分享到朋友圈，非常方便傳播。6.1.3H5的應用

H5的應用形式多樣，常見的應用有品牌宣傳、產(chǎn)品展示、活動推廣、知識分享、新聞熱點、會議邀請、企業(yè)招聘、培訓招生等。6.1.4H5的設(shè)計尺寸根據(jù)目前多數(shù)的在線制作工具，設(shè)計H5尺寸普遍采用在iPhone5的手機屏幕尺寸640px×1136px的基礎(chǔ)上，減去微信或瀏覽器觀看時的128px導航欄和狀態(tài)欄，因此畫面最終的有效尺寸是640px×1008px，有個別H5在線制作工具的有效尺寸會有些許區(qū)別。如iH5默認尺寸是640px×1040px，因此H5的尺寸設(shè)計需要結(jié)合最終使用的工具來進行，而分辨率都是72px。6.1.5常見的H5頁面風格一、簡約風格在H5頁面風格設(shè)計中，簡約風格常用于傳遞品牌信息或表達情感通過恰當?shù)牧舭滋幚砼c排版來形成細膩別致的視覺效果。6.1.5常見的H5頁面風格二、扁平化風格扁平化風格優(yōu)勢在于其通過形狀、色彩、字體等呈現(xiàn)出清晰明了的視覺層次，給用戶帶來較為直觀的視覺感受，更易于用戶理解傳播的信息。6.1.5常見的H5頁面風格三、科技感風格炫酷的科技感效果能夠在短時間內(nèi)吸引用戶的注意力，備受年輕人的喜愛。這種H5設(shè)計風格的應用范圍較廣，多用于互聯(lián)網(wǎng)、汽車等領(lǐng)域。6.1.5常見的H5頁面風格四、卡通手繪風格卡通手繪風格在H5頁面風格設(shè)計中也較為常見，設(shè)計人員往往通過手繪來表現(xiàn)主題內(nèi)容，既輕松又有趣，用戶瀏覽起來也不會覺得累，自然會停留更長的時間。6.1.5常見的H5頁面風格五、水墨風格水墨風格的H5融合了許多傳統(tǒng)文化元素，具有濃郁的古典韻味。它延續(xù)和傳承了傳統(tǒng)水墨繪畫的手法，有的還增添了時尚的成分。6.1.6H5頁面板式設(shè)計頁面有層級，元素要統(tǒng)一。在設(shè)計H5頁面時，一個頁面中的元素層級關(guān)系最好不要超過三個，且層級要分明。一級信息為頁面焦點部分二級信息為頁面次要部分三級信息為頁面的點綴部分6.1.6H5頁面板式設(shè)計由于H5是多頁或長圖文的形式，在排版時應保證頁面的連續(xù)與統(tǒng)一。設(shè)計時可以為頁面設(shè)計相似的版式、元素，并使字體格式、顏色、圖片風格等保持統(tǒng)一。6.1.6H5頁面板式設(shè)計內(nèi)容要提煉，提高信息傳播效率，并可以考慮將文字表達圖形化。6.1.6H5頁面板式設(shè)計適當?shù)牧舭卓梢耘懦槐匾?/p>