© 视觉设计
Powered by LOFTER

移动端尺寸基础知识科普指南

@十萬個為什麽 :初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白,感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起,理清关于尺寸的所有细节。由于是写给初学者的,所以不要嫌我啰嗦 >>>

现象

首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片化严重。尤其是Android,你会听到很多种分辨率:480×800, 480×854, 540×960, 720×1280, 1080×1920,而且还有传说中的2K屏。近年来iPhone...

为设计师量身打造的DPI指南

本文是为“初学者”或者作为从一开始就想要学习更多跨DPI和跨平台设计知识的中级设计师准备的序言读物。 没有复杂的计算和不可分析的图表,只是按照划分直截了当地将内容呈献给读者,便于读者理解以及直接运用到设计过程中,非常实用且专业的知识,记得收藏唷。

什么是DPI、PPI?

DPI(Dots Per Inch)是测量空间点密度的单位,最初应用于打印技术中,它表示每英寸能打印上的墨滴数量。较小的DPI会产生不清晰的图片。

后来DPI的概念也被应用到了计算机屏幕上,计算机屏幕一般采用PPI(Pixels Per Inch)来表示一英寸屏幕上显示的像素点的数量,现在DPI也被引入。

安...

iOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程

移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是来了,移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。


加上Android生态中纷繁复杂的各种奇葩尺寸,现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题?设计和开发之间采用什么协作模式?一个基本思路是:

1、选择一种尺寸作为设计和开发基准;

2、定义一套适配规则,自...

设备像素比(devicePixelRatio)

设备像素比是物理像素与设备无关像素的比值,单位可以用dppx。它用于描述整个渲染环境在硬件设备上的缩放程度。在程序中可以通过window对象上的devicePixelRatio属性来得到这个值。它是只读的,但不是常量,对浏览器的一些特殊操作会改变这个值。
  首先是对几个概念的解释
  物理像素(physical pixel):设备能控制显示的最小单位。
  设备独立像素(DIP,device-independent pixel,density-independent pixel):独立于设备的用于逻辑上衡量像素的单位。
  每英寸像素量(PPI,pixels per inch):一英寸长度上可以并排...

浅谈移动Web开发(上):深入概念

如果你是一个开始接触移动Web开发的前端工程师,那么你或许也遇到了和我曾经遇到的过问题:有太多新的概念需要掌握,太多相似的概念需要区分。没关系,我将用两篇文章的篇幅来解决这些问题。上篇文章关于解释和区分一些入门级别
概念。这些概念你或许一直在各种场合看到或者听说,好像熟的很,但你真的了解它们背后的含义吗?下篇文章我们就需要用到这些概念,聊一聊移动设备上的图片加载方案。至于响应式设计,已经有太多写的非常好的文章来叙述它们,这次在这里我就不赘述了。

我们先从听说最多一个概念——PPI开始。

PPI什么是PPI

PPI的复杂之处在于如果他所属的上下文环境不同,意义也会完全不一样。 当

UI设计中的48DP定律

先说说什么是dp

(魅族工程师):其实对于一个非技术人员要把这个概念完全搞清楚还挺复杂的,所以我们就知道他是干什么用的就好,因为安卓阵营的碎片化,所以会有杂七杂八的不同分辨率的屏幕,但是一个UI人员不可能对不同分辨率把应用的图片都切一遍吧?所以就用dp这个单位,用这个玩意儿可以保证同一个图片在不同分辨率下的屏幕上保持基本相同的物理大小。

说了dp,就得说说px,px就是屏幕上的一个个物理的像素点,以前的屏幕上的像素点是可以用肉眼看到的,后来乔布斯炒作了个视网膜屏幕的概念,其实就是像素的密度比较大,肉眼已经看不见了。

如下图,是用像素(px)为单位的按钮和图片分别在低分辨率、中分辨率和高...

主流Android分辨率简报

Android设备的碎片化众所周知,分辨率、长宽比千变万化,让设计师与开发者头疼不已。由于工作需要,可乐橙对其简略分析了一下,希望对自己与广大设计师和开发者们的工作有帮助。


19条ANDROID平台设计规范

1、尺寸以及分辨率:

Android的界面尺寸比较流行的有:480*800、720*1280、1080*1920,我们在做设计图的 时候建议是以 480*800的尺寸为标准;

2、界面基本组成元素:

界面基本组成元素包括:状态栏+导航栏+主菜单栏+内容区域;以480*800的尺寸为标准下的 各个元素的高度(其实导航栏和菜单栏每一个应用都或许不一样,android对于尺寸没有太明确的 数据规范)如下:


3、字体:

Android 系统中,Droid Sans 是默认字体,与微软雅黑很像;

4、操作栏:

1、”操作栏”对于 Android 应用来说是...

12Grid 智能手机APP栅格系统

12Grid是全球首款兼容多分辨率机型的智能手机应用界面删格布局系统, 使用该套栅格系统,设计师无需再计算尺寸,按照栅格自由布局即可,将大大加快手机应用设计的布局效率,将焦点集中在细节的设计和图形界面的创意 使用栅格系统,可快速布局成四列图标、三列图标、两列缩略图等基本常规的布局、以及更加自由的布局(如WinPhone的磁贴)、甚至手机游戏的界面布局等 一套设计,兼容640X960(1136)的Iphone设备,480X800(845)等主流的Android设备,320X480的WebAPP(手机网站)

注意:栅格系统只是一种布局辅助工具,可灵活根据实际项目需要...

关于“点九”

“点九”是andriod平台的应用软件开发里的一种特殊的图片形式,文件扩展名为:.9.png

智能手机中有自动横屏的功能,同一幅界面会在随着手机(或平板电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。

我们都知道android平台有多种不同的分辨率,很多控件的切图文件在被放大拉伸后,边角会模糊失真。

相关阅读:
Android设计中的.9.png
图片格式与设计那点事儿

OK,在android平台下使用点九PNG技术,可以将图片横向和纵向同时进行拉伸,以实现在多分辨率下的完美显示效果。

【普通拉伸...

Android的设计尺寸

术语和概念屏幕尺寸 

指实际的物理尺寸,为屏幕对角线的测量。
为了简单起见,Android把实际屏幕尺寸分为四个广义的大小:小,正常,大,特大。

像素(PX) 

代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。

屏幕密度 

为解决Android设备碎片化,引入一个概念DP,也就是密度。指在一定尺寸的物理屏幕上显示像素的数量,通常指分辨率。 为了简单起见,Android把屏幕密度分为了四个广义的大小:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi) 像素= DP * (...

移动设备的界面设计尺寸

早读课群里时不时就会有人问起移动设备界面设计的时候尺寸应该做多大,小编不是大神,所以每每有人问的时候都选择了沉默,并且婶婶的因为不能帮助到读er而感到万分内疚。一直到昨天小编看到了这篇教程,内心的激动瞬间化为滚滚热泪夺眶喷出,于是马上联系作者Musen_xiong,希望把这篇教程转载到早读课,Musen_xiong大神非常非常非常非常nice,很快就答复,大气的批准了小编的苛求。无以为谢,小编已经安排站长(当然,站长不是我)今晚面朝南方狠狠地跪磕三个响头。 

作者:Musen_xiong
原载:http://www.zcool.com.cn/article/ZNjUzODg=...

Android系统字体规范与应用探索

我们在做Android移动APP设计的时候,字号的选择也是很让人头疼,今天设计达人网整理了一份有关Android系统字体规范,如果在做Android项目的用户应该看看,如果有任何建议欢迎在留言处与我们交流探讨。

主要从以下几点做了分析:

1. 移动设计中与字号有关的基本概念
  • px:Pixels即像素,基本...

TOP