首页

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

用心设计

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

现象

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

不要被这些尺寸吓倒。实际上大部分的app和移动端网页,在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法,而且有规律可循。

iOS 平板与 Android 平板的交互与动画

用心设计

iOS 8 的设计原则在我的理解是:

  1. 充分利用整个屏幕(所谓「沉浸式」)、弱化拟物设计、使用毛玻璃底板等方式去突出主体内容,以内容为主
  2. 通过留白、不同状态的颜色、排版及无边框的按钮保证内容显示的清晰度
  3. 利用毛玻璃、重叠效果及空间的大小关系(如日历中「年」与「月」)表达空间中的层级关系。

而要讲 Android 5.0 设计原则就必须说到谷歌推出的全新设计语言 Material Design 。Material Design 的设计原则在我的理解里是这样的:

  1. 通过纸面质感的设计效果(包括排版、网格、空间、比例、配色、图像使用)让用户感到自然(明白隐喻)
  2. 突出核心功能,引导用户操作
  3. 对用户的行为进行统一的、恰当的反馈

日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档