交互设计师设计APP(一)—了解分辨率的那些事。

最近准备设计移动端界面了,当我画好用户体验流程图,准备将用户痛点、机会点解析成界面原型时,一直设计PC端界面的我才发现我不知道界面原型该设计成多大。PC端一般是考虑终端显示器的主流分辨率,依据主流分辨率1:1的设计。然而友盟大数据统计的手机端的分辨率为:

1、Android的分辨率方面1920x1080以及1280x720是应用适配占比最高,

2、iOS系统中1334x750的4.7寸依然是目前适配率最高的分辨率。

显然手机分辨率、手机显示的尺寸和电脑显示尺寸差距很大,不能1:1的设计。那么问题来了,手机APP的低保真原型到底该设计成多大?如用墨刀等原型工具就不用纠结了,直接选用手机模板开画就可以。但是作为交互设计师怎能不明就里的设计,怎能容忍自己的好奇心。故通过简书、百度等多方查阅整理自问自答如下,如有理解不对的地方希望能得到专家指正。

一、Question

1、手机分辨率1920*1080是什么意思?屏幕分辨率、物理分辨率、DPI、PPI又都是什么意思?原型到底该多大?

2、交互、视觉、开发又是怎么将这些原型沟通至适配不同手机的分辨率呢?

二、Answer

众多分辨率词的比较解释
引用CSDN博主图片,不同设备的分辨率值

看图说话:

1、逻辑分辨率*倍率(Scale Factor)=物理分辨率(设备分辨率),倍率叫做像素倍率(@2X\@3X的倍率)

2、交互设计师只需要按照逻辑分辨率去设计低保真原型。

3、视觉设计师根据需适配的屏幕制作不同倍率的图片

4、开发工程师按照不同终端去适配而调用不同倍率的图片,文字默认按照倍率放大即可。

5、逻辑分辨率与设备分辨率有时候会相等,特别是当设备分辨率较小的时候。

6、通常说的手机尺寸都是对角线尺寸,见下图屏幕尺寸=对角线值

7、像素本身是一个抽象概念,可大可小,也可以理解为一个百分比的概念,如果想精度高就让单位长度显示多个像素。

引用CSDN博主图,直观感受下iPhone尺寸

ok,到此初步理解了,作为交互设计师可以开始工作了。当然后期关于原型尺寸标注、或不同精度要求下更精细的计算,比如以最小逻辑分辨率设计导图时将图片放大@2x 或@3x,或者以最大物理尺寸去设计图片自动压缩的选择。这是更细节的考量,若以后有心得可以继续更新分享。

其实通常PC端设计师会被问到是否有app移动终端设计经验,以前我理解设计理论是一样的,只是设计规范不一样。今天看来大的方向理论是一样的,但是落地设计还是有很多细节值得去专研。后续会继续去摸索亲身体会移动端和PC端的细节差别在哪,希望可以写成系列文章。

感谢杰哥指导,一直因关键词不对搜索不到有效资料,证明平时结交专家的好处。感谢那些在简书或CSDN分享的人,文中图片为了能让我的文章更好的被理解,有引用,如侵权请联系删。

参考1:http://blog.csdn.net/phunxm/article/details/42174937/ iPhone 屏幕尺寸、分辨率及适配 的图片——文中关于设计尺寸开发代码写的较为详细。

参考2:https://www.jianshu.com/p/c3387bcc4f6e (全解析)屏幕尺寸,分辨率,像素,PPI之间到底什么关系?——简单明了的解释这些概念,易懂。

20180317 by 兰哥

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335