??現(xiàn)在app手機(jī)網(wǎng)站開發(fā)設(shè)計(jì)市場(chǎng)非常的火熱，很多企業(yè)都有設(shè)計(jì)app手機(jī)網(wǎng)站的需求，那么app手機(jī)網(wǎng)站設(shè)計(jì)技巧是怎樣的？網(wǎng)站設(shè)計(jì)和手機(jī)app設(shè)計(jì)有什么區(qū)別呢？下面新網(wǎng)就給大家具體說明一下。

??app手機(jī)網(wǎng)站設(shè)計(jì)技巧是怎樣的？

??1，字體大小對(duì)比

??在桌面方面，我們可能會(huì)使用字體大小差異較大的單詞組合。移動(dòng)端的屏幕較小，屏幕中包含的文字較小。小屏幕上相同字體大小的差異將被放大。

??原因是我們?cè)谑褂眠@兩種設(shè)備時(shí)有不同的觀看距離。我們的眼睛遠(yuǎn)離桌面屏幕，反之亦然，因此我們應(yīng)該在移動(dòng)端使用較小的字體大小對(duì)比度。通常，界面設(shè)計(jì)的電話版本使用的字體大小是Web版本的兩倍。

??2，字體粗細(xì)變化

??不要在PS中使用粗體文本。它不僅破壞了字體本身的美感，還改變了文本的原始字寬，并影響了段落內(nèi)文本的對(duì)齊。合理的方法是使用字體本身的字體粗細(xì)來控制。當(dāng)然，設(shè)計(jì)渲染中的字體邊緣定義與實(shí)際設(shè)備中顯示的字體不完全相同。

??3，字體顏色對(duì)比與背景對(duì)比

??使用移動(dòng)設(shè)備的環(huán)境是復(fù)雜的并且不限于室內(nèi)。它可能在室外，甚至暴露在強(qiáng)烈的陽光下。應(yīng)該確保文本不能識(shí)別背景中的困難，即使是弱者也能正常閱讀。WCAG 2.0中推薦的色彩對(duì)比度應(yīng)高于4.5:1（AA級(jí)），以確保更多人和環(huán)境可以輕松閱讀。

??4，文字間距設(shè)置

??除非您對(duì)布局有特殊要求，否則請(qǐng)勿更改字體的字體間距。字體設(shè)計(jì)者已經(jīng)考慮了適合這種字體的字體間距。如果您不滿意，可以更改字體。

??5，文本和光柵化系統(tǒng)

??在移動(dòng)設(shè)備的小屏幕上，一些網(wǎng)頁與不均勻間距（右對(duì)齊等）無關(guān)將變得突出。以Lofter為例，Lofter是一款優(yōu)雅而優(yōu)雅的網(wǎng)易應(yīng)用程序，但其文章文本界面略有缺陷：如圖6所示，文本在容器的左側(cè)和右側(cè)對(duì)齊

??手機(jī)APP原型圖設(shè)計(jì)需要注意的幾點(diǎn)

??1、留白

??界面中的留白的區(qū)域一般不會(huì)放置任何視覺元素。大量的留白可以讓本來凌亂的界面看起來簡約而吸引人——它讓界面元素周圍都空出來，讓這些元素更加醒目，脫穎而出。留白讓界面顯得更加富于呼吸感，也更加簡潔。

??用好留白，能讓界面以非侵略性的方式來區(qū)分不同的區(qū)域和元素。

??2、顏色對(duì)比

??顏色對(duì)比是最強(qiáng)大的設(shè)計(jì)手法之一，如果用的好，它能給你帶來醒目而帥氣的設(shè)計(jì)。創(chuàng)造性地使用色彩的差異來區(qū)分不同的內(nèi)容，這其中的關(guān)鍵是要控制兩種顏色的對(duì)比度。不僅要可以在視覺上容易區(qū)別，并且不能讓人覺得突兀產(chǎn)生出戲感。如果顏色對(duì)比控制得好，應(yīng)該能讓用戶更加快速便捷地獲取信息。

??3、陰影和高度

??暗影和高度都能在UI界面上創(chuàng)造出“深度”，相當(dāng)于是讓元素在Z軸高度上產(chǎn)生差異。最典型的就是Material Design 的設(shè)計(jì)，谷歌日歷的設(shè)計(jì)很好地展現(xiàn)了怎么借助陰影和空間，非強(qiáng)制性地區(qū)分不同的部分。

??陰影的另外一個(gè)作用是用來區(qū)別重疊內(nèi)容的“高度差”，呈現(xiàn)相互關(guān)系，讓其中的某個(gè)部分吸引用戶的注意力。

??4、圖片內(nèi)容無需單獨(dú)的分隔控件

??圖片內(nèi)容使用網(wǎng)格來呈現(xiàn)的時(shí)候，其實(shí)是無需專門的線或許其他東西來分隔的，因?yàn)榫W(wǎng)格本身就已經(jīng)起到了視覺區(qū)分的作用了。圖片之間的留白和副標(biāo)題都起到區(qū)別的作用。

??網(wǎng)站的設(shè)計(jì)和手機(jī)app的設(shè)計(jì)有哪些區(qū)別?

??規(guī)范上：

??比如WEB的字體大小跟APP的字體大??；

??比如WEB的按鈕高度一般是多少，APP的按鈕高度一般是多少；

??之所以有這方面的差別主要是因?yàn)槠聊怀叽鐚?dǎo)致，手機(jī)上1080P也就5.5-6寸，電腦上1080P就11到21寸都有；

??內(nèi)容分布上：

??電腦屏幕寬，有時(shí)候可以允許雙流，多流的內(nèi)容分布；

??手機(jī)屏幕窄，所以基本都是單流；

??設(shè)計(jì)過程中交互一定要考慮這一點(diǎn)。

??app手機(jī)網(wǎng)站設(shè)計(jì)技巧是怎樣的？大家在做app手機(jī)網(wǎng)站設(shè)計(jì)的時(shí)候，就可以按照上面的技巧去做，同時(shí)還需要注意一些要點(diǎn)的問題，這樣才能制作出讓人滿意的app手機(jī)網(wǎng)站來，如有需要，可以找新網(wǎng)。