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自己對比調節字體大小。