android设置界面设计

1. android个人中心页面的设计

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@color/colorGray">

    <include

        android:id="@+id/toolbar"

        layout="@layout/include_layout_fitting" />

    <RelativeLayout

        android:id="@+id/relativeLayout1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@id/toolbar"

        android:orientation="vertical">

        <TextView

            android:id="@+id/header"

            android:layout_width="match_parent"

            android:layout_height="120dp"

            android:background="@color/colorPrimary"

            android:scaleType="centerCrop" />

    </RelativeLayout>

    <RelativeLayout

        android:id="@+id/relativeLayout2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginLeft="10dp"

        android:layout_marginTop="80dp"

        android:layout_marginRight="10dp">

        <android.support.v7.widget.CardView

            android:id="@+id/id_card"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_margin="5dp"

            android:foreground="?android:attr/selectableItemBackground"

            app:cardCornerRadius="5dp"

            app:cardElevation="10dp">

            <LinearLayout

                android:layout_width="match_parent"

                android:layout_height="180dp"

                android:layout_marginLeft="@dimen/dimens_10"

                android:layout_marginTop="@dimen/dimens_20"

                android:layout_marginRight="@dimen/dimens_10"

                android:background="@drawable/mine_blue_shape"

                android:orientation="vertical">

                <LinearLayout

                    android:layout_width="match_parent"

                    android:layout_heig

2. Android设备的界面适配设计

Android设备App设计中有一个问题可能会被设计师忽略，在各种分辨率各种尺寸“杂屏”的界面适配。可能产出的界面稿在常用的720*1280的分辨率中是完美，但一到各个不同分辨率不同尺寸的设备后

这里就谈谈适配，了解适配让设计从PS、sketch到移动设备上都能完美呈现。

如此繁杂的安卓设备，采用哪个标准设计呢？

1.选择一种尺寸一种分辨率作为基准。

2.选择2-3款主流的Android设备，制定一套适配规则。（国内主流设备、分辨率可参考友盟指数）

3.部分极端效果特别注释说明。

目前移动端设计师多采用iPhone 5与6的分辨率设计，这两个分辨率也最接近Android xhdpi的720*1280，设计之后再做等比适配（不做设计元素等比适配会导致Android设备上视觉呈现较小）。

我则倾向于选取720*1280的分辨率设计。优点是处于常用分辨率的中间值，对小分辨率大分辨率调整也较容易。另外iOS@1x的320与720刚好是2.25的倍率关系，使用sketch等比输出快捷多了。（如果时间成本允许的话可以将Android的标注单位用dp，具体的设备尺寸、分辨率知识这里不详描述，可见文章最后面的“Android基础知识”）

案例说明：

雅虎新闻为各个dpi做了优化，图片等比缩放，文字区域等比缩放，并且考虑到在低dpi下会被推移至第二屏，就减小图片了高度，保持文字区域最小高度。

老司机都不会忘记的，仅提醒下新手，每个图标记得输出多个比例。并且记得查看各个比例下图标的显示效果。

案例说明：

还是拿一个雅虎新闻的例子，大家感受下。

Android设备的系统各个厂商都做了定制化，默认的字体库可能不同，且字体占空间大小可能不同。不同设备显示文字会出现不同效果。设计时考虑3点：

多采用流式布局，不对单行做字数限制（如“单行显示多少个字”“文本宽度多少”），而是定义文本容器的高宽，超出则用“…”“渐隐”或者“遮挡”等方式省略。

若较长的文本需要完整显示，设计时预留换行空间。

若文本需要在单行完整显示（如提示类文字），尽量控制字数（建议16字内），避免小屏不够放置。

案例说明：

图文混排同一行显示时，图片等比固定在右侧显示，文字部分区域宽度会因设备不同出现较大的差异，预留文字多行高度。如下图不同设备下文字的展示空间有差异，需要考虑小分辨率下预留多行文字空间。如图2第二条新闻标题文字溢出的丑陋展示，建议设定一个文字区域最大高度，超出部分则隐藏。

单行出现多个文字符素时，注意元素在低dpi下的显示层级，提前说明好该情况的覆盖或者隐藏规则。如下图第一个用户名称，在低dpi下，避免各元素交错，而省略了超出的用户名称。

图片常用的方式有固定宽度dp等比缩放高度（用于非通栏图片）；固定高度dp等比缩放宽度（用于横向滚动图片，如全屏相册中的纵向图片）；根据屏幕宽度等比缩放（横向通栏图片）。设计时考虑3点：

注意图片占用的宽高比，避免大屏设备上占据大量空间，导致内容比例不协调同时降低了屏幕利用率。

考虑到设备屏幕密度不同，输出图片时别忘了输出多个分辨率。

考虑图片宽高比过大的缩略图处理（最常见的处理方式：高度远大于宽度时，是给出最大区域，让图片等宽居中填充该区域，只显示该区域；宽度远大于高度时，与展示区域等高居中取部分显示。当然也可能出现特殊显示要求，需要根据具体情况具体处理。）

案例说明：

网易游戏相册的全屏浏览中，大于设备宽高比的宽图按照最大宽度放置，小于设备宽高比的高度按照最大高度放置。

一行多张图片要考虑图片的在不同设备下等比缩放带来显示效果的差异。排列时会有两种情况：

1.要求在一行内显示完，根据图片的显示效果决定放置的数量，超过则不显示（如下图1第二条新闻）

2.流式布局，当图片宽度小于设定值时自动换行（如下图2相册展示，低dpi低分辨率设备一行显示3张，高的显示4-5张，且按比例撑满屏幕宽度）。

宽高比超出设计区域时的处理，如网络贴吧中列表的小图模式，给出了正方形区域，当图片非正方形时，根据宽高中的短边等比撑满正方形区域后，截取了图片居中的部分显示。

在固定区域内多元素混合放置时，文字一般采取流式布局，图片多采用等比缩放，图标元素多采用 弹性布局，即元素内容本身规格不变，考虑水平、垂直方向的间距做相应扩展。设备屏幕越大，在扩展方向上可以显示更多内容，发挥了大屏幕的优势。

弹性布局需要给出哪一个元素dp不变，哪一个元素缩放的策略。

弹性布局下部分距离标注采用百分比标注。

当有两个等比缩放元素时考虑避免重叠的情况。

案例说明：

网易游戏的新闻列表样式，每一条新闻区域，要求图片dp不变，而文字区域进行弹性缩放。

下图网易游戏专区中间的幽灵按钮图标为确保点按效果，按照固定dp显示，中间间隔的宽度按照设备宽度的百分比来确定

网易游戏求交往的界面，中间卡片区域大小根据设备等比缩放，如中间用户头像与“同喜欢2款游戏”的文字，在设计时需要考虑产品的目标设备中最小设备下的布局显示效果，避免出现重叠的情况。而纵向的元素数量也需要如此考虑。

Android界面适配的案例说明就写到这里啦。

设计时多考虑各个元素（图标、文本、图片、区域）在不同设备的情况。当然，做设计时也不是死板的按照建议来实现，特别是固定区域下的元素放置，根据实际情况来处理即可。

Android系统的UI也在不断进化完善，随着设计趋势的改变，Android除了常见的卡片、列表、浮层外，可能会有更多的展示方式，而Android设备也是逐渐淘汰ldpi与mdpi，设备的分辨率逐渐变大。也就要求我们需要不断的去了解尝试新的设计趋势，产出最好的方案。

这不是彩蛋哈，仅仅补充安卓设备的基础知识，老司机完全可以忽略，供新手参考阅读。

为展示设备的多样化，贴出Android屏幕尺寸示意图（蓝色矩形的大小代表不同尺寸，颜色深浅则代表所占百分比的大小。）

屏幕大小以屏幕尺寸来衡量，指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米

目前的主流尺寸：5.0" ~ 5.5" (有继续往更大尺寸发展的趋势，但趋于稳定)

常见的设备尺寸： 4" ~ 10" 。

手机适配参考尺寸： 4" ~ 6"

手机 + 平板适配参考尺寸： 4" ~ 10”

屏幕分辨率是指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素，如1960*1080。

屏幕像素密度是指每英寸上的像素点数，单位是dpi，即“dot per inch”的缩写。目前每个屏幕像素可以认为就是一个“点”。

屏幕 dpi 的计算方式:

Android 设备中 dpi 分几个段：

•ldpi：~ 120 dpi (几乎绝迹)

•mdpi：~ 160 dpi (罕见)

•hdpi：~ 240 dpi (逐渐减少中)

•xhdpi：~ 320 dpi

•xxhdpi：~ 480 dpi

•xxxhdpi：~ 640dpi (目前较少)

dp(与 dip 同义) 是在 160dpi 下每个像素对应的物理尺寸，可近似理解为:

•160 dp = 1 inch

•1 dp = 1 / 160 inch = 0.15875 mm

•1 dp = 1 px (160 dpi 屏幕下)

•1 dp = 2 px (320 dpi 屏幕下)

Android的屏幕适配指标都基于物理尺寸（即屏幕的物理大小），而非像素（分辨率）。为什么呢？这里根据dp与px适配出两种效果来说明。

按 dp 适配不同屏幕的效果如下，内容的物理尺寸变化不大:

若直接按照像素适配，出现以下情况，高像素密度的设备内容显得特别小，影响布局与可用性：

屏幕长边和短边的比例。

目前手持设备的 长边 dpi 和 短边 dpi 普遍非常接近，可认为屏幕比例和屏幕水平、垂直像素比例一致

屏幕比例目前趋于 16:9 ~ 16:10 (8:5)

因不少设备使用了虚拟按键，所以通常非全屏的 app 可用面积略低，屏幕比例更接近 16:10

3. android app界面设计规范(dpi,dp,px等)

PPI(Pixels per inch)：每英寸所拥有的像素数，即像素密度。
DPI(dots per inch)：即每英寸上，所能印刷的网点数，一般称为像素密度。ppi计算公式：ppi = 屏幕对角线像素数/屏幕对角线英寸数，通过勾股定理计算屏幕对角线像素数。
Screen Size(屏幕尺寸)：手机屏幕尺寸大小，如3英寸、4英寸、4.3英寸、5.7英寸，指的是对角线的长度。
DIP（device independent pixel）：即dip/dp，设备独立像素。 1px = 1dp density(由dpi决定)
Resolution(分辨率)：指手机屏幕垂直和水平方向上的像素个数。eg分辨率480 800，指该设备垂直方向有800个像素点，水平方向有480个像素点。
px(Pixel像素)：相同像素的ui，在不同分辨率的设备上效果不同。在小分辨率设备上会放大导致失真，大分辨率上被缩小。

Android Design里把主流设备的 dpi 归成了四个档次： 120 dpi、160 dpi、240 dpi、320 dpi ，具体见如下表格。
实际开发当中，我们经常需要对这几个尺寸进行相互转换（比如先在某个分辨率下完成设计，然后缩放到其他尺寸微调后输出），一般按照 dpi 之间的比例即 2:1.5:1:0.75 来给界面中的元素来进行尺寸定义。
也就是说如果以 160 dpi 作为基准的话，只要尺寸的 DP 是 4 的公倍数，XHDPI 下乘以 2，HDPI 下乘以 1.5，LDPI 下乘以 0.75 即可满足所有尺寸下都是整数 pixel 。但假设以 240 dpi 作为标准，那需要 DP 是 3 的公倍数，XHDPI 下乘以 1.333，MDPI 下乘以 0.666 ，LDPI 下除以 2。而以 LDPI 和 XHDPI 为基准就更复杂了。同时第一款Android设备（HTC的T-Mobile G1）是属于160dpi的。鉴于以上各种原因， 标准dpi=160

谷歌官方对dp的解释如下：
A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

简单来说，以160dpi的设备为准，该设备上1dp = 1px；如果屏幕密度大，1dip代表的px就多，比如在320dpi的屏幕上，1dip=2px(即1dp代表2个像素)。在app开发时，最好用dp来做界面的布局，以保证适配不同屏幕密度的手机。

dp和px的换算公式：

我的理解，该公式表示px的数值等于dp的数值*（设备dpi/160）
注意，px、dp是单位，但density没单位。

applyDimension的源码如下，可参考：

android的尺寸众多，建议使用分辨率为 720x1280 的尺寸设计。这个尺寸 720x1280中显示完美，在 1080x1920 中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。

app启动图标为48*48dp，对应各dpi设备，图像资源像素如下：

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|48 48px|72 72px|94 96px|144px 144px|

操作栏图标为32*32dp，对应各dpi设备，图像资源像素如下：其中图形区域尺寸是24*24dp，可参考平时ui切图会有部分留白。

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|32 32px|48 48px|64 64px|96px 96px|

通知栏图标为24*24dp，对应各dpi设备，图标像素如下：

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|24 24px|36 36px|48 48px|72px 72px|

某些场景需要用到小图标，大小应当是16*16dp，其中图形区域尺寸12*12dp。

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|16 16px|24 24px|32 32px|48px 48px|

4. iOS和Android的app界面设计规范(750×1334)

目前，很多UI设计师的UI设计稿是先做iPhone6(750×1334)的，目的是向上适配iPhone6Plus，同时向下适配iPhone5和iPhone4的尺寸。这一节课也算是25学堂为大家精心整理的iPhone6界面设计尺寸规范大全。

iOS篇
————————————————————————————————————
界面尺寸

☆ 状态栏(status bar)：就是电量条，其高度为：40px；
☆ 导航栏(navigation)：就是顶部条，其高度为：88px；
☆ 主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px；
☆ 内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px

| 设备|App Store|程序应用|主屏幕|spotlight搜索|标签栏|工具栏和导航栏|
| :-------------:|:-------------:| :-----:|:-----:|:-----:|
|iPhone6 plus（@3x）|1024 1024px|180 180px|144×144px|87×87 px|75 75px|66 66px|
|iPhone6（@2x）|1024 1024px|120 120px|144×144px|58 58px|75 75px|44 44px|
|iPhone5 - 5s - 5c（@2x） |1024 1024px|120 120px|144×144px|58 58px|75 75px |44 44px|
|iPhone4 - 4s（@2x）|1024 1024px|120 120px|144×144px|58 58px|75 75px|44 44px|
|iPad3 - 4 - Air - Air2 - mini2|1024 1024px|180 180px|144×144px|100 100px|50 50px|44 44px|
|iPad1 - 2|1024 1024px|90 90px|72 72px|50 50px|25 25px|22 22px|
|iPad mini |1024 1024px|90 90px|72 72px|50 50px|25 25px|22 22px|
字体
iPhone 上的字体英文为： HelveticaNeue 至于中文，Mac下用的是黑体-简，Win下则为华文黑体，所有字体要用双数字号。
网络用户体验部做过一个小调查， 对于app字体大小的调查结论如下：

5. Android与iOS：应用程序用户界面设计的差异和比较

移动领域的两大风向标--Android和iOS，也是移动应用设计时最大的两个竞争对手。Android与iOS在市场份额、受欢迎程度、使用人口统计方面数据不相上下，在这里，我们对比了Android和iOS之间的简单设计差异，这将帮助我们弄清一个与另一个有何不同。
由于碎片化的原因，安卓系统的应用设计会有细微的差异。

我们先来了解一下Android与iOS UI应用设计在扁平化设计和材质设计方面的对比。

人机界面指南主要基于三个原则。清晰、尊重和深度。简单来说，该方法支持极简主义，使用简洁的元素，注重排版和扁平化色彩。

简而言之，Android Material Design被认为是Flat设计的升级版，带有拟态性（一种流行的设计概念，即让所代表的物品与现实世界中的对应物相似）。

用Google设计副总裁 MatíasDuarte 的话来说，它是–

有了这些基础知识，让我们从7个方面研究两个平台之间的差异。

目录
1. 导航
2. 按钮
3. 图标和屏幕分辨率
4. 字体
5. 控件
6. 卡片
7. 警报

对于iOS应用程序，总是在“后退”按钮旁边提示上一个选项卡的名称。在中间，显示当前选项卡的名称，而在右上角则显示“编辑”或“完成”（控制按钮）。
说到Android的设计规则，应用程序通常在抽屉菜单或后退按钮（可选）之后的左上角显示标题。移至右上方，总是有一个操作项，例如搜索图标（也可以是多个，例如“收藏夹”图标），其后是溢出菜单。

在iOS中，主导航始终显示在底部，功能菜单专门用于存储一次性功能。而在Android中，通常会在功能菜单中看到主要导航，或者以搜索栏，浮动操作按钮等形式在整个界面中存在。

ios界面指南中，没有类似抽屉导航菜单的标准控件。iOS的全局导航被放置在应用屏幕的底部，一般位于最末位的 "更多"标签下找到二级导航。
Android中，二次导航是一个抽屉，一旦按下功能菜单图标，就会从左到右打开，同时产生一个深色的遮罩层。

有四种方法可以在iOS应用中实现“后退”操作：

在某些情况下，Android应用程序中给出了类似后退的操作，您可以通过该操作进入前一个标签。但是，最常见和最简单的方法是使用导航栏中的后退按钮（Android 10中现在是可选的）。

iOS和Android中的按钮风格最主要的设计区别在于，iOS中的按钮遵循扁平化的设计模式，不带阴影、支持标题大小写。Android遵循Material Design，带阴影且字母大写。

另一个比较重要的按钮是Floating action button（FAB行动呼吁按钮）。例如安卓系统中Gmail的compose按钮，iOS系统中社交媒体应用的新建文章按钮。

两种系统都使用8dp的网格来构建屏幕结构，而最常见的边框是16dp。
在开发移动应用程序时，以预定义的尺寸设计图标是非常关键的。这里有一个表，描述了所有的测量。

这些表格一开始可能会让人有点不知所措，但是如果你知道基本尺寸，并且能够使用倍数进行检查和导出，会发现这并不复杂。

多年来，苹果一直是Helvetica Neue字体的粉丝，然而在2015年，苹果开始使用San Francisco，它更节省空间，非常适合手机、台式机和iOS Watch使用。

Android系统，一直使用Roboto作为标准系统字体。在可预见的未来，谷歌也没有计划改变这一深受喜爱的元素。

控件设计包含搜索、CTA按钮、选择控件和标签等元素。每一个都满足了这样或那样的目的，让我们来看看他们的位置。

搜索功能对于两个平台来说都非常重要，苹果最近还在iMessage中加入了 "搜索栏 "。

在苹果中，搜索选项有两种类型--突出和隐藏。通常情况下，搜索图标会显示在上边的选项卡上，而有时需要从上到下拖动屏幕才能显示搜索栏。此外，如果要取消搜索查询，可以按 "取消"，如果要清除，可以用 "X"。

在安卓系统中，没有隐藏的搜索栏，你总能在上层标签中找到一个。如果要取消搜索，只需点击"←"图标即可，如果要清除查询，则和iOS中的一样。

浮动的动作按钮（FAB）在Android中充当主要行动按钮，可以出现在顶部应用栏或一些组件的边缘。而iOS应用中的主要行动按钮总是出现在页面的右上角。

不过也有一些例外，少数iOS会在底部工具栏显示CTA，而Android则在上部工具栏显示。

如果需要显示一些选项，可以在iOS平台上使用选取器控件，选取器一般出现在底部。
对于在Android平台上显示很少的选项，通常使用一个出现在原地的下拉菜单，或者一个出现在中心的模态对话框，使用模态框时应用背景变暗。

据观察，iOS系统并没有一个视觉上类似于 "标签"的控件。它使用的是一个分段的按钮。Android使用了"扁平化设计的tab"来实现同样的效果。

卡片是图片、文字、视频的集合，还包括按钮和评论。
在iOS中，卡片的特点是无阴影、全宽、无圆角。而在安卓系统中，卡片的设计有阴影、沟槽、圆角等功能。

安卓系统的提醒采用的是扁平化的按钮样式，具体尺寸可以在材质设计指南中找到。操作按钮被放置在提醒的右下角。这些 "按钮 "完全以文字为主（全大写），让用户更容易理解。

至于iOS系统的提醒，则是用分割线隔开。它们基本采用句子或标题的形式，在独立的区块中呈现。它们被放置在弹出窗口的中心。

本文涵盖了iOS和Android所有的初步差异，希望对你有所帮助，而设计一个iOS或Android的移动应用，总是有迭代的准则，所以，一定要保持信息的更新，及时调整自己的产品设计。

Q. 为什么iOS和Android上的应用看起来不一样？
品牌和意识形态的不同，已经波及到他们的操作系统的运作方式。两个平台的UI设计已经成为品牌的符号化。

Q. 如何设计一个原生应用？
在设计原生应用时，必须始终遵守iOS UI应用设计指南和Material设计指南。这样才能使应用与它所要针对的平台同步。另外，这些平台有不同的要求，所以你的应用必须满足它们才能在应用商店上发布。

Q. iOS比Android更方便用户使用吗？
这个问题的答案是纯主观的。它是基于用户的个人偏好。有些人可能会觉得iOS更实用，而有些人则在各方面都偏爱Android。

6. 如何使用DroidDraw进行Android界面设计

1、DroidDraw是一个GUI可视化设计器，基于是基于Java Swing的Android界面设计器，用它来编辑android界面，非常直观、方便，为开发者节约很多时间。我们可以用它生成繁杂的layout文件(XML文件)，设计完以后可以导出xml文件，然后复制到我们的工程中使用。

使用方法很简单，首先下载该软件，运行它，然后软件点击响应组件，通过拖拽来调整大小，生成文件保存成为XML，复制到您的Android工程中即可。

2、AnDroidDraw是一个与DroidDraw集成的Android应用程序，它允许你从DroidDraw应用程序下载你的GUIs，也允许你在一个Android设备上预览你的GUIs。

它其实是一个android应用的安装包apk文件，下载下来的文件AnDroidDraw.apk，然后要安装到模拟器上(这里一定要保证Android环境已搭建好，SDK和ADT配置好)，步骤如下：

（1）在cmd下启动模拟器

启动模拟器的命令是命令行中输入emulator @自定义的模拟器名称

如果你也出先这样的问题，请先检查你的系统环境变量是否配置正确。

（2）使用 adb install AnDroidDraw.apk命令把它安装到你的 Android 设备上

（3）安装完此apk文件以后，打开模拟器，就可以看到模拟器上的该应用图标。

（4）安装一个端口转发规则： adb forward tcp:6100

（5）你的 Android 设备上运行 AnDroidDraw

（6）在电脑上运行 DroidDraw ，并且创建一个 GUI ，接下来从 DroidDraw 菜单中选择 "Project"->"Send GUI to Deviec"，就是将设计出来的xml发送给模拟器正在运行的AnDroidDraw程序，如果发送成功会弹出“Upload succeeded”消息框。

（7）Android 屏幕上看到你在DroidDraw创建的 GUI 的的xml

7. 怎样设计android系统的用户界面请简述界面布局方式

1 学习原生软件的界面开发，而且最好还是看一些开源的，无论从设计的角度还是从开发的角度都是极好的。
比如优秀的作品很多，这些不开源学习界面就好，开源的可以看看系统的应用。和系统本身结合的非常好，设计风格和系统也很统一，给用户较好的体验。
2 确定整体产品色彩基调，色彩基调可以从产品功能中提取，也可以从产品LOGO中提取；
3 做出界面原型，包括功能布局、页面交互等元素；
4 在界面原型基础上进行色彩添加，进一步的细节调整;
5 有了好的外形基础后，再就是回归到用户体验。记住用户才是第一位的。交互设计通常靠外形吸引用户，但真正留住用户的是细节上的人性化。让这些极简的设计细节控制用户的生活习惯，最终让用户离不开它们！根据用户使用体验反馈再次修改界面，不断完善。

8. 怎么用android studio设计安卓界面布局

方法/步骤
1
首先看看刚创建完的项目界面，除了菜单栏、工具栏等，没有什么可以编辑的界面

2
通过项目的文件浏览器可以打开所有项目文件，所以文件管理器在整个开发过程中相当重要。
其中用到最多的便是app项，其余大部分是软件自动执行或生成相关文件；
External libraries用来保存外部导入的类库，用到的时候可以进行调用。

3
在app项下面包含了项目创建所需的资源和配置文件：
首先打开layout，在src-》main-》res-》layout下，这是安卓app的界面设计文件，所有的界面都可以通过这里的xml文件生成

4
双击xml文件打开设计界面，关于layout的具体设计以后再讲，这里仅介绍如何打开layout。

5
项目的菜单设计在menu项下的xml文件中定义和设计。

6
字符串文件也是项目中重要的文件，在app开发过程中会用到很多字符串数据，建议大家都在strings.xml中定义好以后再调用，这样在汉化或者转化为他国语言时，只要备份strings.xml文件，然后替换成中文或他国文字就可以了。其实这就是其他国家软件汉化成中文的途径。

7
软件图标的设计也是非常重要的，这就是UI设计的目的所在，所有图片文件都应保存在drawable-xxxx文件下

8
另外一个重要文件就是AndroidManifest.xml,这里定义了项目的打包名称；项目的标题、主题、图标以及所有的活动项，各种访问权限的设置等等都在这里设置。

9
接下来是安卓开发最重要的部分，活动程序的编写部分，所有app都至少包含一个activity，这里用来实现app所需的功能，完成功能代码的编写，这里可以调用其他文件中定义的资源对界面进行访问，对接收器或发生器进行读写等等

10
最后讲讲R文件，R文件在app->build->source->r->debug下的第二个文件夹下，用来存放所有activity、layout、控件等资源的定义，这是软件自动生成的，不需要修改也不允许修改，在编程过程中一般通过R.id.xxx来访问资源。

9. 如何设计android的登录界面

在网上在到一个登录界面感觉挺不错的，给大家分享一下~先看效果图：

这个Demo除了按钮、小猫和Logo是图片素材之外，其余的UI都是通过代码实现的。

?

一、背景

背景蓝色渐变，是通过一个xml文件来设置的。代码如下：

background_login.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:andro>
<gradient
android:startColor="#FFACDAE5"
android:endColor="#FF72CAE1"
android:angle="45"
/>
</shape>

startColor是渐变开始的颜色值，endColor是渐变结束的颜色值，angle是渐变的角度。其中#FFACDAE5中，FF是Alpha值，AC是RGB的R值，DA是RGB的G值，E5是RGB的B值，每个值在00~FF取值，即透明度、红、绿、蓝有0~255的分值，像要设置具体的颜色，可以在PS上的取色器上查看设置。

?

?

二、圆角白框

效果图上面的并不是白框，其实框是白色的，只是设置了透明值，也是靠一个xml文件实现的。

background_login_div.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:andro>
<solid android:color="#55FFFFFF" />
<!-- 设置圆角
注意： bottomRightRadius是左下角而不是右下角 bottomLeftRadius右下角-->
<corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"/>
</shape>

?

三、界面的布局

界面的布局挺简单的，就直接贴代码啦~

login.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:andro
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/background_login">
<!-- padding 内边距 layout_margin 外边距
android:layout_alignParentTop 布局的位置是否处于顶部 -->

<RelativeLayout
android:
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="15dip"
android:layout_margin="15dip"
android:background="@drawable/background_login_div_bg" >
<!-- 账号 -->
<TextView
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="5dp"
android:text="@string/login_label_username"
/>
<EditText
android:
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/login_username_hint"
android:layout_below="@id/login_user_input"
android:singleLine="true"
android:inputType="text"/>
<!-- 密码 text -->
<TextView
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/username_edit"
android:layout_marginTop="3dp"
android:text="@string/login_label_password"
/>
<EditText
android:
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/login_password_input"
android:password="true"
android:singleLine="true"
android:inputType="textPassword" />
<!-- 登录button -->
<Button
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/password_edit"
android:layout_alignRight="@id/password_edit"
android:text="@string/login_label_signin"
android:background="@drawable/blue_button" />
</RelativeLayout>

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView android:
android:text="@string/login_register_link"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:textColor="#888"
android:textColorLink="#FF0066CC" />
<ImageView android:
android:src="@drawable/cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="25dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="25dp" />
<ImageView android:src="@drawable/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/miniTwitter_logo"
android:layout_alignBottom="@id/miniTwitter_logo"
android:paddingBottom="8dp"/>
</RelativeLayout>
</LinearLayout>

10. 移动应用界面设计的尺寸设置及规范

一、android篇

1、android分辨率

Android的多分辨率，一向是设计师和开发者非常头疼的事儿。尽管如此，对于多分辨造成的复杂问题，也是大家要优先解决的。Android支持多种不同的dpi模式：ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi

注意，ppi、dpi 是密度单位，不是度量单位 ：

dpi主要应用于输出，重点是打印设备上；ppi对于设计师应该比较熟悉，photoshop画布的分辨率常设置为72像素/英寸，这个单位其实就是ppi 。尽管概念不同，但是对于移动设备的显示屏，可以看作ppi=dpi 。

ppi的运算方式是：PPI = √（长度像素数² + 宽度像素数²） / 屏幕对角线英寸数。即：长、宽各自平方之和的开方，再除以屏幕对角线的英寸数。

以iphone5为例，其ppi=√（1136px² + 640px²）/4 in=326ppi（视网膜Retina屏）

对于android手机，一个不确切的分法是，720 x 1280 的手机很可能接近 320 dpi （xhdpi模式），480 x 800 的手机很可能接近 240 dpi （hdpi模式），而320 x 480 的手机则很接近 160 dpi（mdpi模式）。

2、单位换算方法

android开发中，文字大小的单位是sp，非文字的尺寸单位用dp，但是我们在设计稿用的单位是px。这些单位如何换算，是设计师、开发者需要了解的关键。

简单理解的话，px（像素）是我们UI设计师在PS里使用的，同时也是手机屏幕上所显示的，dp是开发写layout的时候使用的尺寸单位。

为什么要把sp和dp代替px？ 原因是他们不会因为ppi的变化而变化，在相同物理尺寸和不同ppi下，他们呈现的高度大小是相同。也就是说更接近物理呈现，而px则不行。

根据单位换算方法，可总结出：

当运行在mdpi下时，1dp=1px ：也就是说设计师在PS里定义一个item高48px，开发就会定义该item高48dp ；

当运行在hdpi模式下时，1dp=1.5px ：也就是说设计师在PS里定义一个item高72px，开发就会定义该item高48dp ；

当运行在xhdpi模式下时，1dp=2px ：也就是说设计师在PS里定义一个item高96px，开发就会定义该item高48dp ；

当你的app需要适配多个dpi模式的时候，请参考图1的比例进行换算 。

3、设计稿基本元素的尺寸设置

为了适应多分辨率的手机，理想的方式是为每种分辨率做一套设计稿，包括所用到的icon、设计稿标注等。但在实际开发中，这种方法耗时耗力。所以通常会选择折中的方法。

方法一 ：在标准基础上（比如xhdpi）开始，然后放大或缩小，以适应到其他尺寸。不足之处是，对于更高分辨率的手机，图标被放大后会导致质量不高。

方法二： 以最高分辨率为基准设计，然后缩小适应到所需的小分辨率上。缺点是，图标等若都最大尺寸，加载时速度慢且耗费流量较多，对于小分辨率的用户也不够好。

结合友盟的分辨率占比数据、也为了方便换算到android开发中的尺寸单位， 推荐设计稿的画布尺寸选用 720X1280 ，分辨率仍旧为72ppi（像素/英寸）。

在android规范中对于导航栏、工具栏等的尺寸没有明确的规定。但根据48dp原则，以及一些主流的android应用的截图分析，总结一下尺寸要求：

状态栏高度 ：50 px

导航栏、操作栏高度 ：96 px=48dp x 2

主菜单栏高度 ：96 px

内容区域高度 ：1038 px （1280-50-96-96=1038）

Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，高度也和菜单栏一样为：96 px

4、图标和字体大小（来自官方规范文档）

a、启动图标（home页或app列表页）

整体大小为48 x 48 dp

b、操作栏图标，代表用户在app中可以使用到的最重要的图标

整体大小为32 x 32 dp ，图形实际区域为 24 x 24 dp

c、小图标/场景图标，提供操作或特定项目的状态。

比如gmail app的星型标记、一些内容展开收起用到的向下向上的图标等。整体大小为16 x 16 dp ，图形实际区域为 12 x 12 dp 。

d、通知图标

如果app有通知，要提供一个有新通知时显示在状态栏的通知图标。整体大小为24 x 24 dp ，图形实际区域为 22 x 22 dp 。

注：android规范提供的尺寸单位是dp，若设计稿尺寸设为720 x 1280 ，图标大小需在规范要求的尺寸数字上乘以2。比如操作栏图标32 x 32 dp ，则设计稿上应该是64 x 64 px 。

e、字体大小

Android规范中的要求如下：

前面提到Android开发中的字号单位是sp，而换算关系是 sp*ppi/160 = px 。所以720 x 1280尺寸的设计稿上，字体大小可选择为 24px 、28px 、32px 、36px ，主要根据文字的重要程度来选择，特殊情况下也可能选择更大或更小的字体。

f、其他尺寸要求

通常把48dp作为可触摸的UI元件的标准。

为什么要用48dp呢？一般来说，48dp转化为一个物理尺寸约9毫米。通常建议目标大小为7-10毫米，以方便用户手指能准确并且舒适触摸目标区域 。

如果你设计的元素高和宽至少48dp，你就可以保证：

（1）触摸目标绝不会比建议的最低目标（7mm）小，无论在什么屏幕上显示。

（2）在整体信息密度和触摸目标大小之间取得了一个很好的平衡。

另外，每个UI元素之间的空白通常是8dp 。

二、iOS篇

1、分辨率

iPhone 界面尺寸：

iPad 界面尺寸：1024×768、2048×1536

（以上单位都是像素，至于分辨率一般网页UI和移动UI基本上都只要 72 ppi）

2、单位换算px、pt

这里需要先区分pt、px，pt(磅值)是物理长度单位，指的是72分之一英寸。手机上看来同一大小的字磅值是一样的，但是换算成不同分辨率手机的字号px值不一样。（px=pt*ppi/72）

iPhone在出retina屏(也就是4S)之前的屏幕像素是320x480px，屏幕密度是163ppi，4S的屏幕像素是640x960px，屏幕密度是326ppi，翻了一倍。iPhone5的ppi没有变化，兼容性方面要增加类似首屏画面等程序上的判断。

在iPhone界面上元素的定位、尺寸是通过一个单位point，而非px，屏幕上固定有320x480pt，retina屏两倍的分辨率改变的只是pt和px之间的比例而已，这样就能实现不改变程序，只上传两套图片就兼容两个分辨率。

****在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机尺寸来设计，比较方便预览效果，一般用 640×960 或者 640×1136 的尺寸设计。其中设计稿的画布分辨率设为默认的72ppi（此时1px=1pt ），所以设计师可以统一采用px为单位。
开发拿到设计稿时，将上面标注的以px为单位的字号大小、图像尺寸除以2，就是非retina屏上的pt值，这样在retina屏上也可以根据此pt值换算对应的px大小，以确保不同的分辨率下有合适的效果。****

3、基本元素的尺寸设置

iPhone的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏以及中间的内容区域。

这里取用 640×960 的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸：

状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40 px

导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮，其高度为：88 px

主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98 px

内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的，其高度为：734 px=960-40-88-98

以上尺寸适用于 iPhone 4、4S，iPhone5/5s 的 640×11136 的尺寸，其实就是中间的内容区域高度增加到：910 px，其他尺寸也同上。

4、常用图像、图标大小（来自官方规范文档）

单位：像素

5、字体大小

iOS交互设计规范文档上，对字体大小没有做严格的数值规定，只提供了一些指导原则：

单位：点pt

– 即便用户选择了最小文字大小，文字也不应小于 22 点。作为对照，正文样式在大字号下使用 34 点字体大小作为默认文字大小设置。

– 通常来说，每一档文字大小设置的字体大小和行间距的差异是 2 点。例外情况是两个标题样式，在最小、小和中等设置时都使用相同字体大小、行间距和字间距。

– 在最小的三种文字大小中，字间距相对宽阔；在最大的三种文字大小中，字间距相对紧密。

– 标题和正文样式使用一样的字体大小。为了将其和正文样式区分，标题样式使用加粗效果。

– 导航控制器中的文字使用和大号的正文样式文字大小（明确来说，是 34 点）。

– 文本通常使用常规体和中等大小，而不是用细体和粗体。

网络用户体验做过的一个小调查：

单位：像素px

还有个方法就是找你觉得好的APP应用，手机截图后放进PS自己对比调节字体大小。