⑴ 移動app設計時,按鈕做多大尺寸
小按鈕比大按鈕更難於操控。當設計移動界面時,最好把可點擊目標的尺寸做大一點,這樣更利於用戶點擊。但這個「大」究竟需要多「大」,才能方便大多數用戶呢?絲路教育小編相信很多移動開發者也非常想知道這個問題的答案,最後都在各平台的UI設計規范中找到了答案。
移動平台設計指導規范告訴了我們什麼?
在蘋果的《iPhone人機界面設計規范》中指出,最小的點擊目標尺寸是44 x 44像素。微軟的《Windows手機用戶界面設計和交互指南》中建議使用34 x 34像素的尺寸,最小也要26 x 26 像素。諾基亞開發指南中建議,目標尺寸應該不小於1cm x 1cm或者28 x 28 像素。
盡管這些指導規范給我們列舉了各平台下可點擊目標的尺寸標准,但是彼此的標准並不一致,更無法和人類手指的實際尺寸相一致,他們的建議尺寸比手指的平均尺寸要小,這會影響觸摸屏下對於點擊目標的精準度。
小的點擊目標會導致大問題
可點擊目標尺寸太小,對於用戶體驗來說就非常糟糕,因為如果要更精確的觸控。用戶需要調整手指的操作方式,從指心操作,變為指尖操作,這樣才能操作尺寸較小的目標。使用指心操作通常會整個覆蓋操作對象,讓用戶無法分辨他們所要操作的目標,也無法收到操作過程中的視覺反饋,也就無法知曉,他們的操作是否有效。當用戶不得不用指尖進行操作時,又出現了一個新問題,這種操作方式非常的慢,而且很吃力,體驗很差。
問題不僅這些,目標的尺寸過小還會導致失誤的觸摸操作。因為尺寸小,所以容易擁擠在一起,用戶容易觸碰到附近的目標,導致運行結果非用戶所願。手指太大,目標尺寸太小,一根手指的寬度大概能覆蓋兩個目標的寬度。如果不按壓到錯誤的位置,就會導致錯誤的操作。食指容易出錯,但是拇指更容易出錯。因為拇指更大、更笨拙。有時候用戶會傾斜拇指,使用拇指的側邊進行操作,但是目標尺寸過小,依然失誤頻繁。
在移動用戶的日常操作中,拇指的使用非常頻繁。有時用戶無法騰開兩只手操作,只能用一隻手握住手機,用拇指和食指操作。在這種場景下,用戶的操作精度有限,就需要提高目標尺寸來避免操作錯誤,這就是所謂的友好的觸控體驗。
食指操作下的平均像素寬度
MIT觸摸實驗室的做了一項研究,以手指指尖作為調查,分析其感覺機能。研究發現,成年人的食指寬度一般是1.6——2 cm。轉換成像素就是45——57 px,這比那些指導書上建議的寬度都要寬。
45——57 px的目標尺寸非常夠用,用戶可以將整個手指緊貼在目標上。在操作的過程中,用戶也能看到目標的邊緣。這樣用戶與控制對象之間的反饋與信息傳達變的非常清晰,用戶也能知曉他們的操作是否有效。因為尺寸大,定位更快,拖移也更方便。費茨法則中提到過,目標越小,操作耗時就越長。小目標減慢了用戶的操作速度,因為需要用戶集中精力去精準定位。手指大小的目標則不一樣,這種目標給予用戶足夠的空間操作,容錯率也很高。
拇指操作情況下的像素寬度
也有很多用戶用拇指敲擊屏幕上的目標。拇指比食指要寬,平均寬度大概在2.5cm,轉換成像素是72 px。
72像素的實際使用效果很棒,更容易定位、操作的舒適感更好。同樣可以看到操作目標的邊緣。這意味著用戶不用費力的調整手指,使用指尖去操作了。也不用傾斜拇指,用拇指側面點擊目標。
在《小型觸摸設備上單手操作研究:關於拇指操作的目標尺寸》這篇文章中發現,目標尺寸的增加會降低失誤操作的次數。更多的空間提供了更高的容錯率和更精確的操作,同時因為大型的尺寸,目標的表現力也變強。
另外一篇《移動端觸摸設計:關於目標選擇的關鍵》中也表達了同樣的看法。
手指大小的目標尺寸很理想,但也有特殊情況
將目標尺寸的大小,設置為跟手指大小相近,其中的好處不再贅述。但並不是適合所有的設計場景。在移動設備上,空間有限。這就意味著,如果每個目標的大小都很大,那麼屏幕空間根本不夠,就需要不斷的翻頁,這在體驗上很糟糕。你需要測量屏幕尺寸,然後計算比例,搞清楚「在這種尺寸的屏幕上,合適的、最大的目標尺寸是多少?」倘若你按照手指大小進行尺寸調整,整個界面的比例很糟糕;再次按照比例調整後,最大的目標尺寸效果也不假,那麼就只能使用指導規范上的建議尺寸了。
對於平板設備來說,情況就沒有手機那麼復雜,因為平板的空間更多。不用害怕沒有空間去放置點擊目標,空間足夠,你可以非常悠然的通過提高尺寸來提高操作適用性。手機是最麻煩的,點擊目標的尺寸非常不好拿捏。但正是因為手機的空間有限,容易操作失誤,所以才需要設置真實手指大小的目標尺寸。設計師的挑戰就在於,要想辦法,讓屏幕上大多數的目標,尺寸都跟手指大小一致。但也有好處,這迫使設計師設計時更注重功能性、風格更加極簡。
為游戲應用設計拇指大小的點擊對象
我們無法推測的問題是,用戶使用你的應用時,是用食指操作更多?還是用拇指更多?因此,針對這一點,我們要非常細致的做調研,然後設置合理的目標尺寸。 然而,如果你的應用是一款游戲的話,大多數用戶會使用拇指。這就是為什麼很多游戲應用中,一些控制項的尺寸一般有拇指那麼大,這樣用戶就能更穩固的雙手持握,更精準的操作。
結論
通過調整目標尺寸的大小,結合實際的應用情況,能夠有效的提高移動端的適用性,同時提高用戶體驗。不管你的應用是游戲還是別的什麼。觸摸屏上的目標就是用來讓用戶點擊的。如果用戶需要去想「我該怎樣去點擊,才能完成精確的操作」,需要再交互前思考方法,需要調整操作方法,使用多種方法才能完成交互。這說明這款產品的交互設計是糟糕的。在這篇文章里,我拋出了個人的一些觀點,在觸摸即將成為操作方式的一統時代,如何打造友好的觸控體驗?這是我們將要面臨的問題。期待更多的想法,以及更規范的標准。
感謝閱讀!
看完這篇絲路提醒你只要記住2點,食指點擊目標尺寸是44 x 44像素,拇指是72 x72像素。所以在畫界面的時候,要注意這2個尺寸。
小技巧:在導出ICON的時候,假如你的ICON實際尺寸是32×32,那麼你可以導出50x50PNG透明背景的ICON,重點是加了透明區域。這樣就更方便點擊了。
⑵ Web 頁面採用多大的寬度最合適
網頁設計在初始要界定出網頁的尺寸大小.就像繪畫給出一塊畫版來.這樣才能方便設計.
網頁的尺寸受限於兩個因素:一個是顯示器屏幕.顯示器現在種類很多,以17寸為主流, 正在朝19寸及寬屏的方向發展.但目前也有為數不少的15寸顯示器.另一個是瀏覽器軟體,就是我們常用的IE,遨遊,Friefox等.
高度:
高度是可以向下延展的,所以一般對高度不限制. 對於一屏來說,一般沒有一個固定值,因為每個人的瀏覽器的工具欄不同,我見過有的瀏覽器工具欄被插件佔了半個屏幕,所以高度沒有確切值。
寬度:
1、在IE6.0下,寬度為顯示器解析度減21,比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無論你的網頁多高都會有右側的滾動條框。
2、在Firefox下,寬度的分率辨減19。比如1024的寬度-19就變成1005
3、在Opear下,寬度的分率辨減23。比如1024的寬度-23就變成1001
註:Firefox或Opear在內容少於瀏覽器高度時不顯示右側滾動條。
所以如果是1024的解析度,你的網頁不如設成1000安全一點。設成900兩側空白更大,視覺上更舒服一點.也方便做一些浮動層的設計.
如果是800的解析度一般都設成770。但也有設成760的.
這些需要明白並且牢記,不然很可能做出來不符合瀏覽器要求,不過一般我們都回設定的再稍微小一點,應為有些瀏覽器加了插件或者其他的東西寬度會有變化所以 800的解析度一般設定760左右,1024的設定990左右.
網頁設計標准尺寸:
1、800*600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。
2、1024*768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612-615之間.就不會出現水平滾動條和垂直滾動條。
3、在ps裡面做網頁可以在800*600狀態下顯示全屏,頁面的下方又不會出現滑動條,尺寸為740*560左右
4、在PS里做的圖到了網上就不一樣了,顏色等等方面,因為WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色范圍很廣,所以自然會有失色的現象.
頁面標准按800*600解析度製作,實際尺寸為778*434px
頁面長度原則上不超過3屏,寬度不超過1屏
每個標准頁面為A4幅面大小,即8.5X11英寸
全尺寸banner為468*60px,半尺寸banner為234*60px,小banner為88*31px
另外120*90,120*60也是小圖標的標准尺寸
每個非首頁靜態頁面含圖片位元組不超過60K,全尺寸banner不超過14K
標准網頁廣告尺寸規格
一、120*120,這種廣告規格適用於產品或新聞照片展示。
二、120*60,這種廣告規格主要用於做LOGO使用。
三、120*90,主要應用於產品演示或大型LOGO。
四、125*125,這種規格適於表現照片效果的圖像廣告。
五、234*60,這種規格適用於框架或左右形式主頁的廣告鏈接。
六、392*72,主要用於有較多圖片展示的廣告條,用於頁眉或頁腳。
七、468*60,應用最為廣泛的廣告條尺寸,用於頁眉或頁腳。
八、88*31,主要用於網頁鏈接,或網站小型LOGO。
廣告形式 像素大小 最大尺寸 備注
BUTTON 120*60(必須用gif) 7K
215*50(必須用gif) 7K
通欄 760*100 25K 靜態圖片或減少運動效果
430*50 15K
超級通欄 760*100 to 760*200 共40K 靜態圖片或減少運動效果
巨幅廣告 336*280 35K
585*120
豎邊廣告 130*300 25K
全屏廣告 800*600 40K 必須為靜態圖片,FLASH格式
圖文混排 各頻道不同 15K
彈出窗口 400*300(盡量用gif) 40K
BANNER 468*60(盡量用gif) 18K
懸停按鈕 80*80(必須用gif) 7K
流媒體 300*200(可做不規則形狀但尺寸不能超過300*200) 30K 播放時間 小於5秒60幀(1秒/12幀)
網頁中的廣告尺寸
1.首頁右上,尺寸120*60
2.首頁頂部通欄,尺寸468*60
3.首頁頂部通欄,尺寸760*60
4.首頁中部通欄,尺寸580*60
5.內頁頂部通欄,尺寸468*60
6.內頁頂部通欄,尺寸760*60
7.內頁左上,尺寸150*60或300*300
8.下載地址頁面,尺寸560*60或468*60
9.內頁底部通欄,尺寸760*60
10.左漂浮,尺寸80*80或100*100
11.右漂浮,尺寸80*80或100*10
⑶ Web網頁設計尺寸,到底選哪個
很多新手設計師都會面對一個問題,Web頁面尺寸寬度到底選哪個?
其實答案並不是固定的,可以做成1920,也可以做1280。黑客認為最重要的決定因素在於你自己的工作電腦解析度。
這是廣告公司AdDuplex送出的統計大數據
市面上的電腦屏幕尺寸多種多樣,不過大部分都集中在這幾種:
1920-1080:目前常用設備中最大的尺寸(Mac 5K屏除外)
1440-900:15寸MacBook Pro為代表,很多UI設計師首選
1366-768:普通的PC電腦
1280-800:13寸MacBook Pro為代表
在以上設備中,13寸和15寸Mac Book,雖然實際解析度非常大,但由於是Retina屏幕,視覺展示上還屬於以上范圍。
所以,網站的內容顯示寬度大部分都在1200px以內,確保小的電腦屏幕能顯示全網頁內容。更早的時候很多都是960px,不過由於屏幕越來越大,目前比較少。
在了解過電腦屏幕尺寸後,網頁設計尺寸(本文專指寬度,高度不限)選哪個也很清楚了:選哪個都不會錯。
事實上很多設計師是這么做的:用小於1920的屏幕去設計1920的網頁。
這樣設計沒錯,而且是很多培訓機構、學校的標準定義:網頁設計寬度尺寸是1920。
但是如果你用了這個神器的Sketch插件,就不會按照之前的結論來設計了。
以前黑客有介紹過。 點擊查看
設計師在做界面的過程中需要經常查看設計稿,以便及時修改設計細節。除非你用1920的屏幕可以設計1920尺寸,否則我們的設計尺寸和屏幕尺寸不相同,就會導致預覽的界面偏移,需手動調節居中。
如果設計的尺寸和屏幕尺寸保持一致,那麼插件預覽的效果就會完美,不用每次都要去調節。
本質上網頁設計尺寸選哪個都是正確的,關鍵在於怎麼方便、快捷地幫助我們預覽、展示設計稿。
在利用sketch插件頻繁預覽的前提下,黑客建議網頁設計尺寸等於你的工作電腦屏幕尺寸,這會節約你很多時間。在設計後台類的界面時,這個方法的優勢會更加明顯。
最後有一點需要注意,在進行切圖的時候,如果遇到全屏的圖,需要把切圖修改成1920,否則在1920電腦中切圖寬度會不足。不過到了切圖這一步,就屬於設計工作的後期了,我們只需要花點時間把對應切圖改成1920即可。
更多UI設計干貨文章請關注UI黑客
微信公眾號 uihacker
UI黑客官網 http://www.uihacker.com/
UI黑客論壇 http://bbs.uihacker.com/
⑷ 做交互設計時,按鈕大小如何規范
做界面交互設計的時候,有個看似簡單但依然容易引起撕逼的問題——按鈕到底得做多大。無論是面對美術同學設計的各種精美小巧細如針尖的按鈕,或是策劃同學各種「加加加」的需求轟炸,還是老闆「大大大」的呼喊,最終還是需要落地——按鈕這玩意,多大才是大,多小才算小。這個時候,就需要一套設計規范和標准,但也要言之有理,讓人心服口服地遵守。
本文就介紹一個簡單快速的入門,讓大家了解到按鈕大小設計的邏輯,還有到底應該設多少大小的問題。
事先說明:本文介紹的每一節的課題,都是值得交互設計們深入研究的。本文從簡單入手,講究快速實用,摒棄容易混淆新人的長篇大論,但還是建議能查閱網上的相關資料,才能更加深入地了解這方面的知識,希望能幫助到大家。
1、菲茨定律(Fitts』s Law)
關於按鈕到底做多大,有一個很牛逼的公式,稱為菲茨定律:
其中:
MT=完成點擊的時間,理論上來說越小越好
a、b 是變化參數,不知道有什麼用
A = 起點到目標中心的距離,也就是手指移動到按鈕的距離
W = 目標在運動軸線上的寬度,也就是按鈕的大小
作為一個文科生對於任何數學公式都是拒絕的,有興趣的同學可以網路詳細研究。列出這個公式的目的是,讓大家了解到,我們所謂的「按鈕手感」,是由哪幾個參數影響的。
不想研究這個公式的同學,可以直接看對這個公式的解讀(翻譯):
1)按鈕越大,越容易被點中(這個有點像廢話)。
2)尺寸小的按鈕,只要增大微小一點,對可點擊性就增加很多。
對第二點的理解就是,按鈕做得太小是很可憐的,犧牲任何東西都不能犧牲按鈕大小
3)隨著按鈕的增大,可點性增幅降低
同樣,一味無腦地增大按鈕尺寸,並不能帶來體驗感的同樣幅度的提升,差不多就好。
4)按鈕過大,不會顯著增加精度,但會降低速度
按鈕過大帶來的好處會越來越小,而且會帶來另外新的問題——想像一下:拿著一個碩大無比如同桌子一樣大小的手柄,肯定不如正常尺寸的好。
本節get:菲茨定律是一個很牛逼的定律,想深入研究可以看知乎上的一篇文章(傳送門: https://zhuanlan.hu.com/p/25530956 )。
2、不要廢話直接給結論吧
菲茨定律是原理,但最終結論是什麼呢,到底要設置多大的按鈕呢,有很多講交互的書籍,有各種答案:
ISO標准:
標准尺寸——19mm*19mm(mm是尺寸單位,毫米)
最小尺寸——9.5mm
最低標准——6.4mm
按鈕和按鈕之間最小間距——3mm
iOS(蘋果)標准:
1倍率設備——44*44dp(dp表示像素,根據蘋果設備屏幕,換算下來約7mm)
安卓標准:
48dp(約為7.4mm)
微軟標准:
115dp(約為9mm)
看了這么多標准,是不是有點懵?
實際上,目前沒有一個統一的標准,沒有人可以解釋為什麼9mm的按鈕會比8mm的按鈕好,熟悉微積分的同學應該知道,一個平滑的曲線是可以無限分割的,沒有那個「好」與「不好」的明顯邊界。
不過,現在界面都要求精細化,按鈕都偏嚮往小了做,所以9mm~15mm就已經算得上是大按鈕了,6mm~9mm是普遍喜歡的區域。但做人要有底線,最好不要再低於6mm了,而且細小的按鈕加上過密的排布和微小的間距,會更加加重「誤觸的災難」。
另外補充一句,特別是游戲,一些重要的入口,是不在這個體系之內的。相信大家對於很多手游內一個碩大的「play」或「開始游戲」按鈕的印象都不會陌生吧。
本節get:
大按鈕9mm~15mm
小按鈕6mm~9mm
請盡量保持在這兩個標准內
3、什麼是PPI
當有人說最合適的按鈕是XX像素時,那麼這個人不是外行就是太懶。在移動設備上,不談設備直接說像素(px)應該是多少多少,都是沒有意義的。
打開網路,查看PPI的解釋——PPI是Pixels Per Inch縮寫,pixels per inch所表示的是每英寸所擁有的像素(pixel)數目。簡單的說,每個手機的PPI都不一樣,所以你的手機的6毫米(mm),和我的手機的6毫米(mm),是不一樣的,也就是對應的像素值(px)也是不一樣的。
所以PPI沒什麼玄乎的,就是把第2節的毫米(mm)轉成像素(px)的媒介,計算方法也很簡單,像素=PPI*毫米值*0.03937就可以了,當然也可以弄個高大上的公式:
實際工作中,建議大家把一些主流的設備上的都列出來,等到要做的時候再算就會很繁瑣,而且事先列出來有助於時刻遵守,做得多了也就不用再一一對著看了,自然而然就會有意識地去遵守,有點像「肌肉記憶」。
另外,大家也會接觸到一個DPI的概念,這兩個概念非常類似,甚至有一些地方都混為一談。網上介紹DPI和PPI區分的文章很多,有興趣的同學可以自行尋找學習,但是有一點個人的建議:如果你是做手機游戲和軟體的界面設計的,可以只關注PPI,而無視DPI,不然大量的信息充斥進來,很容易混淆。
那麼如何知道設備的PPI呢,很簡單直接網路,或者自己也可以算,參考我這個公式:
通過計算發現iPhoneX和官方公布的數值略有差距,可能全面屏採用了一套不同的演算法。
另外再最後啰嗦一句,其實很多項目,都是只有一個「設計解析度」的,也就是GUI設計的時候,只是以一個解析度作設計,其他解析度只是進行適配,不太可能每個解析度都單獨進行一套設計。目前游戲主流的設計解析度是1334*750(iPhone6),或是1920*1080(Plus設備)。
本節get:
根據設備的PPI,把物理大小(mm)轉成像素(px),才有實際操作設計的意義。
4、不同的位置對大小的影響
由於移動設備的小巧,所以其持握方式也會對按鈕大小有要求,一般來說,離設備邊緣的按鈕應該設的更大一些,離設備越中間的按鈕就可以放寬要求。
另外,如果是豎屏模式的游戲或軟體,甚至是可以支持單手操作的,最好在這個基礎上增加1mm左右。具體原因是:
橫屏操作,和屏幕接觸的主要還是大拇指指面,而橫屏下,接觸屏幕的很有可能是拇指指腹,從接觸面積上來說,幾乎少了一半。設置過iPhone指紋解鎖的人應該知道,錄入手指正面的指紋後,系統還需要我們錄入指腹的指紋,這也是考慮到單手手持手機下,手指和指紋屏的接觸情況。
5、其他解決辦法
當然,規范是死的,實際情況還會有很多不得不違反規范的做法,為了讓設計效果和實際體驗折中妥協,我們還可以採取下列方法:
只犧牲一個維度(寬或高),也能達到較好的點按效果:
不怕小按鈕,就怕小按鈕扎堆,如果是並排密集的按鈕,最好能預留出間距,防止誤觸:
上面那個3mm,放置在iPhone 8 Plus上對應的像素就是47,對應其他的設備也可以用上文介紹的方法計算出來。
讓按鈕的觸控區域和按鈕的實際尺寸脫鉤,這個就需要程序做支持了,這是最一勞永逸的做法,可以應對各種不同的情況,但要注意一點:觸控區域代替了按鈕,執行響應的任務,那麼觸控區域本身就應該代替按鈕,執行遵守上文所說的一系列規范了。
⑸ PC端UI設計尺寸規范
對於剛入行的UI設計師,最容易犯的錯就是在設計移動APP時,不懂什麼尺寸或者用哪種屏幕的尺寸是最適當的?為了解決這個問題,今天我們就簡單的為大家整理做UI時最基礎的尺寸規范。
現象
首先說現象,大家都知道移動端設備屏幕尺寸非常多,碎片化嚴重。尤其是Android,你會聽到很多種解析度:480×800,480×854,540×960,720×1280,1080×1920,而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了:640×960,640×1136,750×1334,1242×2208。
不要被這些尺寸嚇倒。實際上大部分的appUI設計和移動端網頁,在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法,而且有規律可循。
像素密度
要知道,屏幕是由很多像素點組成的。之前提到那麼多種解析度,都是手機屏幕的實際像素尺寸。比如480×800的屏幕,就是由800行、480列的像素點組成的。每個點發出不同顏色的光,構成我們所看到的畫面。而手機屏幕的物理尺寸,和像素尺寸是不成比例的。最典型的例子,iPhone3gs的屏幕像素是320×480,iPhone4s的屏幕像素是640×960。剛好兩倍,然而兩款手機都是3.5英寸的。
所以,我們要引入最重要的一個概念:像素密度,也就是PPI(pixelsperinch)。這項指標是連接數字世界與物理世界的橋梁。
Pixelsperinch,准確的說是每英寸的長度上排列的像素點數量。1英寸是一個固定長度,等於2.54厘米,大約是食指最末端那根指節的長度。像素密度越高,代表屏幕顯示效果越精細。Retina屏比普通屏清晰很多,就是因為它的像素密度翻了一倍。
倍率與邏輯像素
再用iPhone3gs和4s來舉例。假設有個郵件列表界面,我們不妨按照PC端網頁設計的思維來想像。3gs上大概只能顯示4-5行,4s就能顯示9-10行,而且每行會變得特別寬。但兩款手機其實是一樣大的。如果照這種方式顯示,3gs上剛剛好的效果,在4s上就會小到根本看不清字。
在現實中,這兩者效果卻是一樣的。這是因為Retina屏幕把2×2個像素當1個像素使用。比如原本44像素高的頂部導航欄,在Retina屏上用了88個像素的高度來顯示。導致界面元素都變成2倍大小,反而和3gs效果一樣了。畫質卻更清晰。
在以前,iOS應用的資源圖片中,同一張圖通常有兩個尺寸。你會看到文件名有的帶@2x字樣,有的不帶。其中不帶@2x的用在普通屏上,帶@2x的用在Retina屏上。只要圖片准備好,iOS會自己判斷用哪張,Android道理也一樣。
由此可以看出,蘋果以普通屏為基準,給Retina屏定義了一個2倍的倍率(iPhone6plus除外,它達到了3倍)。實際像素除以倍率,就得到邏輯像素尺寸。只要兩個屏幕邏輯像素相同,它們的顯示效果就是相同的。
Android的解決方法類似,但更復雜一些。因為Android屏幕尺寸實在太多,解析度高低跨度非常大,不像蘋果只有那麼幾款固定設備、固定尺寸。所以Android把各種設備的像素密度劃成了好幾個范圍區間,給不同范圍的設備定義了不同的倍率,來保證顯示效果相近。像素密度概念雖然重要,但用不著我們自己算,iOS與Android都幫我們算好了。
如圖所示,像素密度在120左右的屏幕歸為ldpi,160左右的歸為mdpi,以此類推。這樣,所有的Android屏幕都找到了自己的位置,並賦予了相應的倍率:
ldpi[0.75倍]
mdpi[1倍]
hdpi[1.5倍]
xhdpi[2倍]
xxhdpi[3倍]
xxxhdpi[4倍]
各型號iPhone的倍率比較簡單,我們後面會講到。那麼Android手機那麼多,具體怎麼分?哪些手機是幾倍的倍率呢?我們先看一張表,這是友盟2014年10月到2015年03月的數據:
就目前市場狀況而言,各種手機的解析度可以這樣粗略判斷。雖然不全面,但至少在1年內都還有一定的參考意義:
ldpi如今已絕跡,不用考慮
mdpi[320x480](市場份額不足5%,新手機不會有這種倍率,屏幕通常都特別小)
hdpi[480x800、480x854、540x960](早年的低端機,屏幕在3.5英寸檔位;如今的低端機,屏幕在4.7-5.0英寸檔位)
xhdpi[720x1280](早年的中端機,屏幕在4.7-5.0英寸檔位;如今的中低端機,屏幕在5.0-5.5英寸檔位)
xxhdpi[1080x1920](早年的高端機,如今的中高端機,屏幕通常都在5.0英寸以上)
xxxhdpi[1440x2560](極少數2K屏手機,比如GoogleNexus6)
自然地,以1倍的mdpi作為基準。像素密度更高或者更低的設備,只需乘以相應的倍率,就能得到與基準倍率近似的顯示效果。
不過需要注意的是,Android設備的邏輯像素尺寸並不統一。比如兩種常見的屏幕480×800和1080×1920,它們分別屬於hdpi和xxhdpi。除以各自倍率1.5倍和3倍,得到邏輯像素為320×533和360×640。很顯然,後者更寬更高,能顯示更多內容。所以,即使有倍率的存在,各種Android設備的顯示效果仍然無法做到完全一致。
單位
不難發現,真正決定顯示效果的,是邏輯像素尺寸。為此,iOS和Android平台都定義了各自的邏輯像素單位。iOS的尺寸單位為pt,Android的尺寸單位為dp。說實話,兩者其實是一回事。
單位之間的換算關系隨倍率變化:
1倍:1pt=1dp=1px(mdpi、iPhone3gs)
1.5倍:1pt=1dp=1.5px(hdpi)
2倍:1pt=1dp=2px(xhdpi、iPhone4s/5/6)
3倍:1pt=1dp=3px(xxhdpi、iPhone6)
4倍:1pt=1dp=4px(xxxhdpi)
單位決定了我們的思考方式。在設計和開發過程中,應該盡量使用邏輯像素尺寸來思考界面。設計Android應用時,有的設計師喜歡把畫布設為1080×1920,有的喜歡設成720×1280。給出的界面元素尺寸就不統一了。Android的最小點擊區域尺寸是48x48dp,這就意味著在xhdpi的設備上,按鈕尺寸至少是96x96px。而在xxhdpi設備上,則是144x144px。
無論畫布設成多大,我們設計的是基準倍率的界面樣式,而且開發人員需要的單位都是邏輯像素。所以為了保證准確高效的溝通,雙方都需要以邏輯像素尺寸來描述和理解界面,無論是在標注圖還是在日常溝通中。不要再說「底部標簽欄的高度是96像素,我是按照xhdpi做的」這樣的話了。
Web怎麼辦
移動端頁面的絕對單位仍然是px,至少代碼里這么寫,但它的道理也和app一樣。由於像素密度是設備本身的固有屬性,它會影響到設備中的所有應用,包括瀏覽器。前端技術可以善加利用設備的像素密度,只需一行代碼,瀏覽器便會使用app的顯示方式來渲染頁面。根據像素密度,按相應倍率縮放。
以iPhone5s為例,屏幕的解析度是640×1136,倍率是2。瀏覽器會認為屏幕的解析度是320×568,仍然是基準倍率的尺寸。所以在製作頁面時,只需要按照基準倍率來就行了。無論什麼樣的屏幕,倍率是多少,都按邏輯像素尺寸來設計和開發頁面。只不過在准備資源圖的時候,需要准備2倍大小的圖,通過代碼把它縮成1倍大小顯示,才能保證清晰。
實際應用
大家最關心的還是實際運用,畫布該怎麼設置。我們就iOS、Android、Web三個平台來分別梳理一下。不過在這之前,我要為使用PS進行設計的朋友介紹一個小技巧。
之前我說過,我們要以邏輯像素尺寸來思考界面。體現到設計過程中,就是要把單位設置成邏輯像素。打開PS的首選項——單位與標尺界面,把尺寸和文字單位都改成點(Point)。這里的點也就是pt,無論設計iOS、Android還是Web應用,單位都用它。當然,各平台單位名稱還是要記住的。這里我們用的只是它的原理,不用在意名稱。
要調節倍率,則通過圖像大小里的DPI來控制。這個DPI,其實就是PPI,像素密度。有個常識大家都知道,屏幕上的設計DPI設成72,印刷品設計DPI設成300。為什麼是這兩個數字?
首先說300,這和人眼的分辨能力有關。由於1英寸是固定長度,每1英寸有多少個像素點決定了畫質清晰程度。之前說過,這就是像素密度,也就是DPI。DPI達到300以上,其細膩程度就會給人真實感,像真實世界中的物件。相反,DPI只有10的話,在你一個食指指節大小的長度內只有10個像素,這明顯就是馬賽克了。所以印刷品要設成300,才能保證清晰。
再說72,這有一定的歷史原因。最早的圖形設計是在mac電腦上進行的,mac本身的顯示器解析度就是72。PS中把圖像DPI也設成72,就能保證屏幕上顯示的尺寸和列印尺寸相同,便於設計。72的PC顯示器解析度逐漸成為一種默認的行業標准,這套規則就這么沿用下來。
現在回到正題,我們怎麼通過DPI來調節倍率?既然屏幕本身的解析度是72,DPI設成72剛好是1倍尺寸,那設成72的兩倍就是倍率為2的屏幕了,就這么簡單。
下面來看看3個平台各自的畫布設置:
IPhone
iPhone的屏幕尺寸各不相同,我說的是邏輯像素尺寸,這確實是讓人很頭疼的事情。如果想用一套設計涵蓋所有iPhone,就要選擇邏輯像素折中的機型。
從市場佔有率數據來看,目前最多的是iPhone5/5s的屏幕。倍率為2,邏輯像素320×568。上升勢頭最猛,未來有望登上第一的是iPhone6的屏幕。倍率為2,邏輯像素375×667。
按照這兩種尺寸來設計,都是比較主流的做法。可以兼顧短一些的iPhone4s,大一點的6plus也不會過於空曠。
不過在切圖的時候要注意,由於iPhone6plus的3倍圖是由2倍圖放大而來,所以點陣圖要注意保證清晰。
Android
都說Android碎片化嚴重,但它現在反而比iOS好處理。因為如今的Android屏幕邏輯像素已經趨於統一了:360×640,就看你設成幾倍了。想以xhdpi為准,就把DPI設成72×2=144。想以xxhdpi為准,就把DPI設成72×3=216。
對於那些比較老的低端機,寬度是480px的那批,畫面確實會小一些,顯示內容會更少。稍微留意一下,重要內容盡量保持在界面中上部分。
當然,這些機型不出一年就會被邊緣化,基本淘汰。現在能運轉的也是當作功能機在用,軟體多了必卡無疑,用戶體驗無從談起。不作考慮也是OK的。
Web
手機端網頁就沒有統一標准了,比較流行的做法是按照iPhone5的尺寸來設計。倍率2,邏輯像素320×568。
這樣的做法比較實在,倍率2的屏幕無論在iOS還是Android方面都是主流,而且又是2倍屏幕中邏輯像素最小的。所以圖片的尺寸可以保持在較小的水平,頁面載入速度快。當然,缺點就是在倍率3的設備上看,圖片不是特別清晰。
如果追求圖片質量,願意犧牲載入速度,那麼可以按照最大的屏幕來設計。也就是iPhone6plus的尺寸,倍率3,邏輯像素414×736。
總結
移動端的尺寸比PC端復雜,關鍵就在倍率。但也正因為倍率的存在,把大大小小的屏幕拉回到同一水平線,得以保證一套設計適應各種屏幕。站在這條水平線的角度看,會發現它很好理解。
⑹ web網頁設計尺寸標准(最小寬度/尺寸)
綜上所述,電腦屏幕解析度1024px,低於1024px則不再考慮,所以以上網站設計網站的最小寬度/尺寸小於1000px;
⑺ web軟體的界面尺寸
尺寸適應。解析度一直是困擾網頁設計者的問題,在網頁設計中大多還是集中在頁面寬度的問題上。適應800px還是1024px,這就好像當年哈密雷特口中的 "To be or not to be",近年來隨著顯示器的變革這個問題還在愈演愈烈,除了剛剛說的2種解析度,也許很多設計師腦中已經開始考慮1280px這個寬屏解析度甚至更高的解析度。當然也有的設計師乾脆就只為800px,說這也是個不錯的兼容性考慮,可惜我那1920px的顯示器啊整天閑著兩邊。在 B/S結構 軟體界面中從來沒有這么簡單的辦法,因為復雜的功能可能有著大量的操作設置或數據顯示,一絲一毫的空間都不容的浪費。並且上一條也指出我們不想用整頁滾動條來解決問題,這帶來的不單是顯示面積的限制,還有就是我們需要考慮的是寬度和高度雙重尺寸適應問題。不單單是顯示器解析度,當瀏覽器不是最大化時界面同樣要適應(Mac系統根本就不存在最大化),也就是說界面要時時應對瀏覽器窗口尺寸大小而調整。所以利用一切可能的手段使頁面可以自動適應瀏覽器窗口尺寸就成為了棘手但卻是必須去做的事情。又由於這個問題同時又衍生出的新問題是軟體界面在自動適應時不同區域不會是等比縮放尺寸的,勢必有些區域隨之放大縮小而有些區域固定不變。這一點可以參照 C/S結構 軟體界面,以大家常用的網頁製作工具Dreamweaver為例,主要的代碼顯示區域是隨窗口尺寸的調整而調整,但上邊的菜單及功能按鈕區域、下邊的屬性及結果區域、右邊的功能區域都是固定不變的或者單方向調整的(只調整寬度或者高度) 。
⑻ 如何設置WINDOWS 2000的窗口按鈕在任務欄的最小寬度
根據你所說情況,可能是用戶許可權的問題,你可以嘗試建立一個新的管理員級的帳戶,原來的帳戶可以刪除。
如果上述方法不靈,那可得修改計算機的注冊表了。方法是:打開「注冊表編輯器」,找到[HKEY_CURRENT_USER\Software\Microsoft\InternetExplorer\Desktop\OldkAreas],然後選中彈出窗口右側的一個選項「OldWorkAreaRects」,並刪除。在「注冊表編輯器」中找到[HKEY_CURRENT_USER\Software\Microsoft\InternetExplorer\Main],選擇窗口右側的「Windos_Placement」,將其刪除。退出「注冊表編輯器」,重新啟動電腦,然後打開IE,將其窗口最大化,並單擊「向下還原」按鈕將窗口還原,接著再次單擊「最大化」按鈕,最後關閉IE窗口。以後再打開IE時,窗口就正常了!
如果仍不能正常使用可以嘗試重裝IE,具體方法是將你的系統安裝盤放入光碟機,在「開始菜單——運行」裡面輸入「rundll32.exe Setupapi,InstallHinfSection DefaultInstall 132 c:\windows\inf\ie.inf」即可,如果你使用的是Win 2000操作系統,請輸入「rundll32.exe Setupapi,InstallHinfSection DefaultInstall 132 c:\winnt\inf\ie.inf」。
參考資料:http://..com/question/2512057.html
⑼ web面板占整個瀏覽器大小
一、快捷鍵法:可以按住「Ctrl++」鍵,一步步進行調節。二、鼠鍵結合法:用滑鼠和鍵盤也能實現瀏覽器的寬屏設置,按住「Ctrl」鍵的同時向上滾動滑鼠滾輪。三、縮放按鈕調節:在瀏覽器的右下角顯示「XXX%」,單擊它會出現調節手柄,調節好手柄大小,勾選「縮放比例對所用網頁生效」。四、調節解析度:也可以把電腦的解析度,調節為1024X768。
將網頁內容占滿整個瀏覽器方法:一、快捷鍵法:打開網頁之後,發現自己的網頁在瀏覽器中的中央位置處,而兩邊是空白的,可以按住「Ctrl++」鍵,一步步進行調節。二、鼠鍵結合法:用滑鼠和鍵盤也能實現瀏覽器的寬屏設置,按住「Ctrl」鍵的同時向上滾動滑鼠滾輪,這樣也可以使頁面變成寬屏。三、縮放按鈕調節:在瀏覽器的右下角顯示「XXX%」,這就是瀏覽器頁面的縮放大小(各種瀏覽器的縮放不盡相同)。單擊它會出現調節手柄,調節好手柄大小,勾選「縮放比例對所用網頁生效」,現在就可以看到網頁已經寬屏了。四、調節解析度:也可以把電腦的解析度,調節為1024X768,這樣網頁也可以寬屏,但是字體有些「胖」(不建議使用)。
⑽ 網頁設計合適的頁面尺寸是多少
網頁設計選用的解析度是72像素,使用的畫布尺寸1920px*1080px。但是並不意味著在整個畫布上進行設計,一般採用全屏展示和兩側留白的方式。
全屏展示,是整個網站看起來大氣一些,但是布局要合理安排,不然看起來有些傻大的感覺。
兩側留白是為了適配不同電腦屏幕的尺寸,能夠確保網站只是電腦站的時候一些筆記本電腦也能顯示全面網站的內容區域,內容限時區域在好控制在1000px-1200px。