h5設計稿
① 一個H5的製作流程是怎麼樣的
一個有互動的H5(不是易企秀和MAKA之類的)。
大概如下:
1.前期溝通了解需求。
2.策劃H5方案
3.設計出草稿
4.定稿出正稿
5.後期工程師開發
6.測試
7.正式上線
② h5頁面製作,設計多大的尺寸,怎麼和前端適配,實現設計的視覺稿效果
H5的頁面製作設計尺寸是有一定規范的,正常的話是考慮手機的適配問題,所以這個專尺寸的話是基屬於手機來做的。
具體是多少呢?因為手機的尺寸是不一樣的,特別是在比例上,這就要求我們在不同的手機上必須要保證內容的呈現,一定是完整的,但自己要考慮一個問題,要把內容分為重要的和不重要,重要的是什麼呢,比如說背景圖;重要的話就是放一些文字信息等等。
這樣就劃分了一個安全區和出血區,出血區和安全區交界的部分,就是不重要的,可以在各位手機上被裁掉的或者用來遮住手機頁面背景的;但是安全的內容,是可以保證在任何大小屏幕手機上都可以完整顯示。
一般安全區內框的尺寸是375X603PX,但在製作上又是另外一回事了,作鋪滿內框的圖要按照這個尺寸的2倍大小去做。
出血區也就是外框尺寸是422X748PX,作鋪滿外框的圖要按照這個尺寸的2倍大小去做。
這個你可以參考下意派Epub360的畫布標准,這個工具是專業級的H5工具。
③ 在移動端設計稿為1080p的時候,用rem布局。怎麼計算寬度和字體大小
原文鏈接:http://caibaojian.com/rem-and-px.html
1rem等於多少px呢?·
1rem等於html根元素設定的font-size的px值,假如我們在css裡面設定下面的css。
//code from http://caibaojian.com/rem-and-px.html
html{font-size:14px}
那麼後面的CSS裡面的rem值則是以這個14來換算,例如設定一個div寬度為3rem,高度為2.5rem.則它換算成px為width:42px.height:35px,同理,假如一個設計稿為寬度42px,高度為35px,則換成成rem,則是42/14=3rem,35/14=2.5rem。
如果css裡面沒有設定html的font-size,則默認瀏覽器以1rem=16px來換算。
來源:前端開發博客
這是我查看資料分享過來的,具體對不對要看題主測試之後的結果
④ H5設計稿切圖按照什麼尺寸,微信公眾號版本的
H5的設計稿一般設計為640x1136px即可。
⑤ 5移動網頁的設計稿尺寸應該是多少
html5移動端尺寸750*1334,還有720*1080都是可以的,如果要兼容蘋果和安卓的用750*1334的多一些
⑥ UI設計和網頁美工的區別是什麼
UI設計只是網站美工的一部分,網站美工需要學習的內容有UI設計,PS,AI,html語言,javaScript語言等。
網頁美工局限於美術設計和頁面製作,UI注重交互,用戶體驗是第一目標。
UI設計師的職能大體包括三方面:一是圖形設計,軟體產品的產品「外形」設計。二是交互設計,主要在於設計軟體的操作流程、樹狀結構、操作規范等。一個軟體產品在編碼之前需要做的就是交互設計,並且確立交互模型,交互規范。三是用戶測試/研究,這里所謂的「測試」,其目標恰在於測試交互設計的合理性及圖形設計的美觀性,主要通過以目標用戶問卷的形式衡量UI設計的合理性。
網頁美工需要學習網站概念知識、色彩構成、網頁設計中的美學規律、FIREWORKS網頁圖形處理、FLASH二維動畫、PHOTOSHOP平面設計軟體在網站設計中的應用、作品設計及點評等內容。
拓展知識
UI設計:UI即User Interface(用戶界面)的簡稱。UI設計則是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟體變得有個性有品味,還要讓軟體的操作變得舒適、簡單、自由、充分體現軟體的定位和特點。
網頁美工:是精通美學,photoshop(PS),FLASH,dreamwaver(DW)等一網站製作軟體的網路人員,必須具有良好的創意和一定程度的審美觀。必要時需要一定的策劃知識。為網站所有的頁面畫出來並用DW和css排版出來。頁面必須清晰簡潔,還要適宜後台調用。
⑦ HTML5移動網頁的設計稿尺寸應該是多少
HTML5的移動端網來頁設計稿,通常情況下源,內容區為750px或960px或者1080px的,一般不小於750px像素大小(寬度)
設計稿可以比750px大,但是絕對不能比750px小,這個主要是由於當前手機的解析度相對較高(iPhone 6是375物理像素,但實際像素為其兩倍,也就是750,這個750就是這么來的)
如果設計圖稿過小,前端在實現圖稿的時候裡面的圖片大小在高解析度的情況下會顯得模糊不清,所以這也是為何要「大」解析度
此外需要注意的是,要保證頁面的基準字體大小,在320px的設計稿當中,最小字體不宜小於12像素,其他像素的設計稿當中,等比例換算即可(12/320px*設計稿像素值)
⑧ h5動畫怎麼寫方便
簡單的思維步驟
拿到設計稿一開始就先看看這個設計稿的布局,有一些是從頁面版頂部到底部權都有效果的,這個時候就要考慮在 iPhone4 這樣屏幕不夠高的設備上如何保證頁面完整呈現;
在不影響交互的情況下,隱藏哪些元素。有的時候頁面上元素比較集中,這個時候就要考慮在 iPhone6+ 這樣的大屏幕設備上,要不要調整間距使得頁面不會太空曠。
zoom和transform
zoom 縮放的是被 zoom 的容器的視口,可以把它想像成放大鏡的效果,這個屬性是可被繼承的;
做設備屏幕兼容的時候,可以在 body 標簽下加一個 div 包裹住頁面上的其他元素,然後在這個 div 上加 zoom,達到的視覺效果就是頁面上其他元素也被縮放了。但是有些元素並不支持 zoom。
transform 屬性應用到元素的過程其實是矩陣變換的過程,在渲染的時候,元素的坐標就會被確定下來,然後和 transform 的屬性值進行矩陣運算得到最終的坐標;
⑨ 這個H5手機頁面 字體大小要怎麼換算 如設計稿是40px,我們切圖製作要縮小一半還是怎麼樣
切圖按照正常的大小切,
html{
font-size: calc(100vw/7.5);
}
設計稿是40px,你就寫0.4rem;(那個7.5是設計稿尺寸設計稿是750就寫7.5,設計稿是640就寫6.4)