pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

移動設備界面設計之:顯示屏背后的秘密

  全新iPad的發布,不少朋友對新的分辨率(2048x1536像素)產生各種擔心。比如擔心設計全新iPad應用程序的界面時,是否需要為設計師配備更大的顯示設備。又比如因為要處理分辨率的適配而擔心開發難度增高。

移動設備界面設計之:顯示屏背后的秘密  三聯

  種種擔心,絲毫不亞于我們常常聽到的對Android設備存在多種分辨率而發出的各種抱怨。

  為超高或多種分辨率的設備設計界面,真的有那么可怕嗎?

  我們先來一起了解一下屏幕尺寸與分辨率之間的關系吧。有條件的朋友也可以動手試一試。

  一臺22英寸顯示屏與一臺15.4英寸的顯示屏,分辨率都是1680x1050像素。它們要顯示相同的內容:一個100x48像素大小的方塊。

  通過對比可以發現,方塊在15.4英寸顯示屏上看起來要比22英寸顯示屏上小一些。這個原因我想大家都能理解,因為顯示屏的物理尺寸小嘛。

  反過來,我們把更小尺寸的15.4英寸顯示屏的顯示分辨率調整至800x600像素,你會發現這時方塊看起來會比22英寸的顯示屏還要大一些。只是很可惜,這時的顯示效果并不理想,不夠清晰。

  至此,我們可以了解到:在相同尺寸的屏幕,隨著分辨率的提高,顯示的內容變小。反之,相同分辨率的屏幕,隨著尺寸的提高,顯示的內容變大。

  以上結果,對于顯示設備廠商而言,或許更多的是市場機會。他們清楚知道,要讓顯示設備提供更細膩的視覺體驗,必須在有限的屏幕尺寸中提高分辨率!

  分辨率之戰,從PC DIY的時代開始,各大顯示設備廠商就注定要參與這個較量。直到1920x1080像素屏幕的出現,大家似乎開始有些滿足,比這個更高的分辨率不再被強調。因為這個分辨率意味著達到HDTV級別了!可以觀看高清電影了!高清,也就是在近幾年成為眾多電視機廠商或者其它顯示設備廠商的廣告中出現最多的詞語。

  顯然,分辨率和尺寸都不可能無止境地提高。尺寸大了設備笨重,分辨率高了又會讓原來的內容看起來更小。而顯示的內容太小,會導致用戶在正常的觀看距離無法看清楚。因此,隨著分辨率的提高,既要讓內容顯示大小合適,又要讓顯示效果更加出色,成為一個迫切需要解決的問題。

  那么,該怎么辦呢?

  答案是為顯示設備提高分辨率,但同時要為高分辨率的屏幕單獨提供資源以保障最終顯示結果相同或相近。在不同的設備上顯示相同內容保持相同或相近的物理大小,這對于觸摸屏尤其重要。顯示的物理大小決定了用戶能否準確并舒適地對顯示屏上的內容進行操作。

  這個時候,屏幕密度是時候出場了!

  屏幕密度是指以屏幕分辨率為基礎,沿屏幕長寬方向排列的像素。密度較低的屏幕,在長和寬方向都只有比較少的像素,而高密度的屏幕通常則會有很多,甚至會非常非常多的像素排列在同一區域。在相同尺寸的屏幕里,隨著分辨率的提高,屏幕密度相應也會跟著提高。

  看,這就是高分辨率與高密度屏幕所帶來的卓越的顯示效果!

界面設計之:顯示屏背后的秘密 - 阿智 - (((azero)))

  【圖片來源于Apple官方網站】

  我們知道,在Apple的產品中,使用PPI(每英寸所擁有的像素)來描述屏幕密度。而在Android的產品中,使用DPI(每英寸所擁有的點數)來描述屏幕密度。

  下面,來看看當下熱門的iPhone、iPad以及Android設備,看看它們是如何為多分辨率和高密度屏幕解決界面設計難題的。

  iPhone:

  第一代的iPhone屏幕密度為165PPI,而從iPhone4開始屏幕密度增加了兩倍。

  在設計iPhone4應用程序界面時,設計師仍然只需要以第一代iPhone為基準進行設計,然后制作一套放大兩倍的圖片資源。因為所有iPhone都使用了相同的尺寸,所以最終通過系統的適配使得相同的內容在兩種分辨率上顯示的物理大小完全相同。

  iPad:

  第一代的iPad屏幕密度為132PPI,全新的iPad屏幕密度同樣提升了兩倍。

  在設計全新iPad的應用程序時,我們仍然以第一代iPad的屏幕作為基準進行設計,然后提供兩倍大小的圖片資源,最終通過系統的適配使得相同的內容在相同尺寸的兩種分辨率上顯示的物理大小也完全相同。

  Android設備:

  Android設備的屏幕相對復雜一些,因為它們有各種尺寸和分辨率。

  為了讓各種分辨率的屏幕顯示合適的大小以方便用戶閱讀或者操作,同時又能滿足Android設備多樣性的需求。于是,Android官方通過對各種屏幕進行密度等級劃分,最后分為“低密度(LDPI)”、“中密度(MDPI)”、“高密度(HDPI)”、“超高密度(XHDPI)”這四個規格,并同時將“中密度”定義為基準線。

界面設計之:顯示屏背后的秘密 - 阿智 - (((azero)))
移動設備界面設計之:顯示屏背后的秘密 - 阿智 - (((azero)))

  【圖片來源于Android官方網站】

  這樣,在設計Android應用程序的界面時,我們就可以一視同仁把中密度的屏幕作為基準進行設計,然后給其它密度的屏幕提供相應的圖片資源。最后通過系統的適配性自動處理,一樣使得相同的內容在各種屏幕上可以顯示比較接近的大小。

界面設計之:顯示屏背后的秘密 - 阿智 - (((azero)))

  【圖片來源于Android官方網站】

  回到文章的開頭,我們現在可以知道為超高分辨率、多種分辨率的設備設計界面其實并不可怕。也不見得是多么高難度的事情。雖然我們目前常見的顯示屏都是中密度居多(PC和Mac顯示屏目前的顯示密度在90到130左右),但隨著超高分辨率高密度顯示技術的逐步推廣,也許不久的將來我們設計PC或Mac 軟件界面也同樣需要面對超高分辨率、多種分辨率的問題了。

  附1:屏幕密度的計算公式

界面設計之:顯示屏背后的秘密 - 阿智 - (((azero)))

  作者:阿智

  文章來源:阿智的博客

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章給大家詳細介紹了HTML頁面跳轉及參數傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實現照片墻3D效果的示例代碼,可以實現鼠標經過圖片實現改變,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實現文字過長自動隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 京港视通报道-质量走进大江南北-京港视通传媒[北京]有限公司 | 中医治疗皮肤病_潍坊银康医院「山东」重症皮肤病救治平台 | 小区健身器材_户外健身器材_室外健身器材_公园健身路径-沧州浩然体育器材有限公司 | 动力配电箱-不锈钢配电箱-高压开关柜-重庆宇轩机电设备有限公司 聚天冬氨酸,亚氨基二琥珀酸四钠,PASP,IDS - 远联化工 | 锂辉石检测仪器,水泥成分快速分析仪-湘潭宇科分析仪器有限公司 | 卡诺亚轻高定官网_卧室系统_整家定制_定制家居_高端定制_全屋定制加盟_定制家具加盟_定制衣柜加盟 | 祝融环境-地源热泵多恒系统高新技术企业,舒适生活环境缔造者! | 全自动面膜机_面膜折叠机价格_面膜灌装机定制_高速折棉机厂家-深圳市益豪科技有限公司 | 二手Sciex液质联用仪-岛津气质联用仪-二手安捷伦气质联用仪-上海隐智科学仪器有限公司 | 深圳货架厂_仓库货架公司_重型仓储货架_线棒货架批发-深圳市诺普泰仓储设备有限公司 | 工业铝型材-铝合金电机壳-铝排-气动执行器-山东永恒能源集团有限公司 | 赛默飞Thermo veritiproPCR仪|ProFlex3 x 32PCR系统|Countess3细胞计数仪|371|3111二氧化碳培养箱|Mirco17R|Mirco21R离心机|仟诺生物 | 探鸣起名网-品牌起名-英文商标起名-公司命名-企业取名包满意 | 智慧旅游_智慧景区_微景通-智慧旅游景区解决方案提供商 | 南京技嘉环保科技有限公司-杀菌除臭剂|污水|垃圾|厕所|橡胶厂|化工厂|铸造厂除臭剂 | 户外环保不锈钢垃圾桶_标识标牌制作_园林公园椅厂家_花箱定制-北京汇众环艺 | 深圳富泰鑫五金_五金冲压件加工_五金配件加工_精密零件加工厂 | 肉嫩度仪-凝胶测试仪-国产质构仪-气味分析仪-上海保圣实业发展有限公司|总部 | 天津货架厂_穿梭车货架_重型仓储货架_阁楼货架定制-天津钢力仓储货架生产厂家_天津钢力智能仓储装备 | 珠光砂保温板-一体化保温板-有釉面发泡陶瓷保温板-杭州一体化建筑材料 | 密集架-密集柜厂家-智能档案密集架-自动选层柜订做-河北风顺金属制品有限公司 | 创客匠人-让IP变现不走弯路| 3dmax渲染-效果图渲染-影视动画渲染-北京快渲科技有限公司 | 济南宣传册设计-画册设计_济南莫都品牌设计公司 | 合肥办公室装修 - 合肥工装公司 - 天思装饰 | 电主轴-高速精密电主轴-高速电机厂家-瑞德沃斯品牌有限公司 | 口臭的治疗方法,口臭怎么办,怎么除口臭,口臭的原因-口臭治疗网 | 米顿罗计量泵(科普)——韬铭机械 | 冷藏车-东风吸污车-纯电动环卫车-污水净化车-应急特勤保障车-程力专汽厂家-程力专用汽车股份有限公司销售二十一分公司 | 伊卡洛斯软装首页-电动窗帘,别墅窗帘,定制窗帘,江浙沪1000+别墅窗帘案例 | 3d可视化建模_三维展示_产品3d互动数字营销_三维动画制作_3D虚拟商城 【商迪3D】三维展示服务商 广东健伦体育发展有限公司-体育工程配套及销售运动器材的体育用品服务商 | 3d可视化建模_三维展示_产品3d互动数字营销_三维动画制作_3D虚拟商城 【商迪3D】三维展示服务商 广东健伦体育发展有限公司-体育工程配套及销售运动器材的体育用品服务商 | 工业冷却塔维修厂家_方形不锈钢工业凉水塔维修改造方案-广东康明节能空调有限公司 | 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 | BHK汞灯-百科|上海熙浩实业有限公司 | 深圳宣传片制作-企业宣传视频制作-产品视频拍摄-产品动画制作-短视频拍摄制作公司 | 企业彩铃制作_移动、联通、电信集团彩铃上传开通_彩铃定制_商务彩铃管理平台-集团彩铃网 | 东莞市踏板石餐饮管理有限公司_正宗桂林米粉_正宗桂林米粉加盟_桂林米粉加盟费-东莞市棒子桂林米粉 | 无锡网站建设_企业网站定制-网站制作公司-阿凡达网络 | 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 硫化罐_蒸汽硫化罐_大型硫化罐-山东鑫泰鑫智能装备有限公司 |