火星網(wǎng)校
掌握這8個H5設(shè)計小技巧，讓你的頁面炫酷又有個性！
發(fā)布時間：2024-08-01 15:57:44 瀏覽量：210次
隨著HTML5技術(shù)的成熟，H5頁面越來越受大家歡迎，各種H5頁面層出不窮，那如何才能讓自己的H5頁面在眾多頁面中脫穎而出呢？
運用幾何圖形
生活中隨處可見幾何圖形的存在，簡單的三角形、正方形、長方形和圓形甚至幾根線條就可以組成很多簡潔大氣的圖形，適當(dāng)?shù)倪\用幾何圖形能夠給H5頁面帶來動感與節(jié)奏感。
幾何圖形構(gòu)圖常用于公司宣傳，產(chǎn)品介紹中，可以給人一種很強(qiáng)烈的整潔和商務(wù)感。
*注意：一般會是純色大塊搭配漸變，主要突出形狀和區(qū)塊。
運用蒙版
當(dāng)背景顏色比較復(fù)雜的時候，通常會使用蒙版，主要方法是插入形狀，調(diào)色至與背景中的顏色比較協(xié)調(diào)，降低透明度，這樣既不會影響圖片的完整性，又能夠讓文字更加清晰。
蒙版的運用比較普遍，MAKA眾多H5都采用這種版式制作。
在內(nèi)容不多的情況下，選用居中的構(gòu)圖，可以讓人們的視線集中在頁面中部，可以讓整個H5頁面顯得更加精致簡潔，同時也更加專注于重點內(nèi)容。這種構(gòu)圖方式非常普遍，幾乎適合所有類型的H5。
海報式設(shè)計通常是一張大圖覆蓋整個屏幕，再加一些文字標(biāo)題作為點綴，效果更類似于我們平時看到的一些海報大片，非常的有視覺沖擊力。
這種設(shè)計比較適合產(chǎn)品宣傳、旅行畫冊、個人簡歷等等，可以放一些產(chǎn)品圖片、照片、個人寫真。
交互上，慎用向右滑動的操作方式。如：刮刮樂涂抹效果，左右滑動翻頁等。
因為蘋果手機(jī)上，向右滑動容易觸發(fā)返回“上一級頁面”效果。
交互上，慎用橫屏展示效果。
體驗上，需要用戶設(shè)備開啟屏幕旋轉(zhuǎn)功能，才能正常觀看，用戶操作成本高。對不同屏幕的手機(jī)，長寬比例不一，難以展示最佳的視覺效果。
視覺上，功能按鈕等，遠(yuǎn)離頁面底部（大概128px，這個尺寸不是固定值），具體看重構(gòu)采用什么適配方式（僅供參考：640*1136 px，從上往下計算，主要內(nèi)容在1008px內(nèi)）。
原因：更好的設(shè)備各種屏幕的手機(jī)，避免按鈕被擋住。
視覺上，慎用“光線疊加效果”或PS里面的“圖層樣式”效果。如：給圖層加個“柔光”、“濾色”、“色相”等等效果，除非這個視覺元素可以合并為一體。
掌握上述8個技巧，做好H5一點都不難，快來制作你的H5作品吧~
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費學(xué)習(xí)UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 武漢UI設(shè)計培訓(xùn)班費用怎么樣？想學(xué)UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費用是多少嗎？不知道學(xué)UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學(xué)費價格以及學(xué)習(xí)內(nèi)容。
-
10. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
最新文章
