本期接着对Android的美学设计的分享。

1.3 Light and shadows 光学与阴影

1.3.1 Light

在素材设计的环境中,我们会用虚拟的光来照亮UI界面。主灯光会产生尖锐,有方向的阴影。背景光会在各个角度产生分散的,柔和的阴影,我们叫背光阴影。

主光产生的阴影

背景光产生的阴影

1.3.2 光源

在安卓和IOS的设计中,阴影的产生,是因为处于不同仰角位置(z轴)的素材平面,对光源进行遮挡时产生的。这点上和web的产品不同,web的产品的阴影,都是只是在y轴上来表现阴影效果。

我们结合直射光+散射光时候的阴影效果。

1.3.2 阴影

阴影可以协助我们发现 一个素材组件的深度,运动的方向以及表面的边缘。一个表面的阴影,是由他自己的仰角以及他和其他平面的关系来共同决定的。

阴影的应用

首先,在同一个产品中,仰角和对应的阴影的对应关系,应该保持一致。

接着 仰角值越大(离用户的相对位置越近),产生的阴影范围也就越大

在我们的界面设计中, 如果我们不使用阴影这个元素,那我们所有界面的移动,都是默认在一个仰角进行的。

2. Layout 布局

2.1 理解布局设计:我们通过使用统一的元素和间距,使得我们的布局设计在不同的平台和环境以及屏幕大小都可以保持一致。

2.1.1 布局的使用

a. 可预见性

UI界面应该是可以直接表现的,并且可以预测的布局(统一的UI区域以及空间组织的方式)

b. 一致性

布局上,我们应该使用一致的网格,标线和填充形式

c. 回应

对于来自用户,设备,和屏幕元素的输入,布局需要的是可以适应的并且有反馈的。

2.1.2 结构

在布局的设计中,各个部件应该在视觉上看起来是均衡的。一般来说我们都使用8dp的网格来座位最小的一个测量单位,对于logo那样的特别小的组件,我们一般也可以用4dp的网格。

2.1.2 Pixel Density

屏幕的PD和分辨率对于不同的平台和设备来说都是不同的。对于不同的设备,我们可以用这种灵活可变的方式在达到最好的视觉呈现效果。

计算pd

首先,在1英寸的品目范围内的像素点的数量我们叫像素密度。高密度的屏幕,当然在一个固定尺寸中的像素点会多于低密度的屏幕。所以一个固定像素点的图片,在高精度的屏幕上,会显示的视觉效果上更小一点。

密度的独立性

密度的独立性指的是虽然屏幕的像素点密度不同,但是图标依然显示的统一的大小。效果如下图。

关于Android的PD

When developing an Android app, use dp to display elements uniformly on screens with different densities. A dp is equal to one physical pixel on a screen with a density of 160.

当我们开发一个安卓app的时候,我们使用dp来确保我们的元素在不同的密度屏幕上显示的是统一的。一个dp等于的绝对值的大小dpi/160

dp = (width in pixels * 160 )/screen density

Screen physical width

Screen density

Screen width in pixels

Screen width in dps

1.5 in

120

180 px

240 dp

1.5 in

160

240 px

1.5 in

240

360 px

针对文字信息我们一般用scalable pixels(sp), 这里用户可以调节字体来控制文字信息的显示大小。

pd in IOS

逻辑分辨率

ios设备是通过逻辑分辨率来控制显示密度,他们来测量没一个点里面的单位,举个例子, 如果你现在为iphone x设计一个元素, 你可能选择一个逻辑分辨率的大小为 375 * 812个点。接着,在这个给定后,图形处理硬件会自动把这个组件填充到1125 * 2436的屏幕中。

Android 美学设计基础 <3>的更多相关文章

  1. Android 美学设计基础 <1>

    在做原型的时候,和设计师交流的过程中,发现在设计安卓交互的过程中,其实是存在一些基本规则的.那这些规则,可以保证第一应用美观,第二不会出现反人类的开发难度,第三,用设计师的话说就是可能会有“最好的体现 ...

  2. Android 美学设计基础 <2>

    我们接着上期的项目进行分享. 1.2.2 Elevation (仰角) 仰角只的是不同的素材块在Z轴上的选对位置 仰角的测量方式 这里只的是两个平面在z的距离,记住我们默认每个平面都是1dp的厚度 1 ...

  3. Android程序设计基础作业目录 (作业笔记)

    Android程序设计基础 • [目录] 第1章 Android程序入门 >>> 1.2.4 安装并配置 Android Studio 开发工具和 Genymotion 模拟器. 1 ...

  4. Android程序设计基础 • 【目录】

    章节 内容 实践练习 Android程序设计基础作业目录 (作业笔记) 第1章 Android程序设计基础 • [第1章 Android程序入门] 第2章 Android程序设计基础 • [第2章 基 ...

  5. Android程序设计基础 • 【第1章 Android程序入门】

    全部章节   >>>> 本章目录 1.1 Android 平台介绍 1.1.1 Android 简介 1.1.2 Android 平台的发展 1.1.3 Android 平台架 ...

  6. Android与MVC设计模式

    写在前面,之前做过一段时间移动开发,后来因为工作原因搁浅了,最新重新拿起Android权威编程指南学习,顺道做个学习笔记. 首先呢,我想说无论是计算机科班出身还是培训班出身,都听说过高内聚低耦合以及M ...

  7. 赵雅智:android教学大纲

    带下划线为详细内容链接地址.点击后可跳转.希望给大家尽一些微薄之力.眼下还在整理中 教学章节 教学内容 学时安排 备注 1 Android高速入门 2 Android模拟器与常见命令 3 Androi ...

  8. 详解 “Android UI”设计官方教程

    我们曾经给大家一个<MeeGo移动终端设备开发UI设计基础教程>,同时很多朋友都在寻找Android UI开发的教程,我们从Android的官方开发者博客找了一份幻灯片,介绍了一些Andr ...

  9. Android Develop 之 Ddevelop WorkFlow Basics

    Android应用程序的开发流程一言以蔽之,可以用一图五步概括.一图如下. 第一步:安装.安装开发环境,包括JDK,Android Studio,SDK Manager(通常下载Android Stu ...

随机推荐

  1. loadrunner12.5-vugen回放脚本提示:URL=“http://www.testclass.net/js/scripts.js”的常规连接当前无套接字 (16 不足) 可用,是什么意思呢?怎么理解呢?

    会发生这个报错,是因为每个浏览器都有一个限制,检查哪个浏览器客户正在模拟, 通常只允许16个并发连接. 如果超过此超过接数,将显示该消息,通知您没有可用的连接. 而max connection的默认值 ...

  2. web服务器部署过程记录

    由于之前没有服务器部署经验,又选择了所有软件都是单独编译安装,遇到很多问题,解决之后还是学习到了很多新东西. 如今回过头来还是选择lnmp集成环境的部署方式比较方便快捷:https://lnmp.or ...

  3. [SoapUI] 在执行某个TestSuite之前先执行login或者其他什么前置步骤

    打开TestSuite有一个地方可以设置Setup Script import com.eviware.soapui.model.support.PropertiesMap log.info &quo ...

  4. 3. Install Spring-Tool-Suite & TestNG

    1.Install Spring-Tool-Suite 2.Install TestNG

  5. 2018.08.12 bzoj5301: [Cqoi2018]异或序列(前缀和+莫队)

    传送门 简单的异或前缀和处理+莫队统计答案. 惊奇的发现无论开不开long long都能跑过... 代码: #include<bits/stdc++.h> #define N 100005 ...

  6. POJ 1061 青蛙的约会(扩展欧几里德算法)

    题意:两只青蛙在同一个纬度上跳跃,给定每个青蛙的开始坐标和每秒跳几个单位,纬度长为L,求它们相遇的最短时间. 析:开始,一看只有一组数据,就想模拟一下,觉得应该不会超时,但是不幸的是TLE了,我知道这 ...

  7. @WebService @WebMethod 详解

    形象图解 首先AB均需要@WebService如果 @WebService(endpointInterface="package.B") public class A implem ...

  8. (匹配)Dolls --HDU --4160

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=4160 代码: #include<stdio.h> #include<string.h& ...

  9. Win & Mac 系统之间U盘传递的U盘文件格式选取问题

    Win & Mac 系统之间U盘传递的U盘文件格式选取问题 1. Win系统与Mac系统之间可以通过 exFat U盘文件系统传递 exFAT(Extended File Allocation ...

  10. Bellman_ford货币兑换——正权回路判断

    POJ1860 题目大意:你在某一点有一些钱,给定你两点之间钱得兑换规则,问你有没有办法使你手里的钱增多.就是想看看转一圈我的钱能不能增多,出现这一点得条件就是有兑换钱得正权回路,所以选择用bellm ...