① 能同時用於 Android 和 iOS的APP UI設計怎麼做
遵循這些步驟,你的 App 就能同時在 iOS 和 Android 保持完美!
1. 總體的樣式
從 iOS7 以後,Apple 就一直在採用扁平化的設計模式,去除了所有不必要的紋理和陰影等效果——和早些年間的版本完全不同。Google 的新 MD 設計規范有了一些更加細節的規定,通過一種叫「紙片」的方法來創造更多的層級關系。
2. 實體按鈕
Android 有一個返回按鈕,點擊它可以返回上一個屏幕。
iPhone 上則沒有這樣一個按鈕,所以需要有一種方式能夠讓用戶回到先前的屏幕。通常的解決方案是在屏幕的左上角放置一個返回鍵。
3. 通用元素
兩種平台之間的確存在著一些通用的元素,比如說狀態欄和標題欄,它們會出現在每一屏的頂部。你不應當改變導航欄的高度,如果你想讓 App 看起來更加原生的話。所以,我推薦你在設計的第一頁就定義好標題欄的樣式,然後在其他的屏幕上使用一個佔位的方框來替代,這樣能省下不少時間,但是你應當向程序員說明標題欄在不同的屏幕上都是一樣的樣式。
不同平台上的導航欄有一定的差別。在 Android 上文本是左對齊的,然而 iOS 上是居中對齊的。在 iOS 上,很多企業都用它們的 logo 來替換首頁標題欄中的文字,但是在 Android 設備上這不是一個好的主意。狀態欄(顯示你的網路、電量和時間信息)是系統組件,你不需要考慮設計它,只要確保它們不會對他人造成誤解就好了。
4. 導航
或許iOS 和 Android 平台之間最大的區別就在於他們的導航樣式了。Android 上最主要的導航方式是抽屜菜單,Android 用戶們通常在這個菜單內進行跳轉。而且在整個 App 中,這種體驗是一貫的。Apple 的導航樣式更傾向於 tab bar,它位於屏幕的底部,並且以一種很簡單的方式實現上部內容的切換。當你設計 App 的結構的時候,你可以為不同的平台設計不同的導航樣式。
5. 要不要用卡片式
在 UI 設計中,卡片正逐漸成為一種主要的 UI 設計樣式,它們可以應付多種情況,而且給用戶提供了一種能夠呈現有效內容的便捷方式。視覺上,卡片非常適應於 Android 的 Material Design(它事實上源自於紙張的靈感)。使用陰影和卡片之間的合理間距能夠創建一種自然的外觀。
在 iOS 上,使用卡片設計需要更加的小心謹慎,盡管一些大型的 App,諸如 Facebook 和 pinterest 的確使用了一種略微偏離 iOS 視覺規范的設計風格。Instagram 使用了一種完全扁平化的設計風格,盡管從結構的觀點上看,用戶的每一條推送都能被視為是一張卡片,instagram 的設計很值得你去花時間揣摩,它是如何遵循 iOS 視覺規范的。如果你要在 iOS 平台上應用陰影,你最好小心謹慎,盡量使得這些陰影不是那麼的明顯。
6. 排版
iOS 系統上的默認字體是 Helvetica Neue,在 Android 上則是 Roboto。盡管這兩種字體在外觀上有顯著的差異,但是這兩個字體的尺寸卻是近乎相同的。如果你想要在設計的時候節省時間,那麼用一款字體就可以,但是要和開發人員溝通在不同的平台上使用對應的字體。而在設計重要的布局結構和使用大號字體時,我建議你還是同時用這兩種字體測試效果。
如果你想要精益求精,那麼你就要對不同平台上的設計規范更加註意。比如如下幾條:
Android 的 MD 設計需要用到更多的空格來進行布局
在 MD 中字體大小的變化會更加多樣
在 iOS 上,字體沒那麼多大小差異,但是在字體重量上(Font weight)有更多的變化,同樣允許你創建主次結構
兩個平台都使用比較細的字體來現實正文內容,然而,在下面的例子中,Android 使用了輕(Lighr)和常規(Regular)字體,而 iOS 使用了粗體(Bold)和常規字體
這是一個非常簡單的例子,向你展示了排版方面的一些細微的不同可以導致印象上的巨大差異——你能很快分辨你是在用 Android 手機還是在用 iPhone!
7. 網格和觸摸元件
iOS(@1x 下 44px)和 Android(1:1 比率下 48p)都有對可觸摸元件的設計規范。MD 規范同樣建議對所有元素使用 8dp 網格對齊。
在最近的項目上,我發現遵守 Android 的這些設計規范會更加安全,因為大一些的 48px 的按鈕在兩個平台上都表現良好,而且 MD 的規范更加全面,還經常更新。不管怎麼說,你都應該在設計中使用網格,但是我們發現定義更加明確的 Android 網格會更好用一些。
② 如何修改android標題欄界面
方法一、在你的那張Activity中onCreate方法中加上下面代碼:
?
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
setContentView(R.layout.main); //軟體activity的布局
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.titlebar); //titlebar為自己標題欄的布局
但是新的問題又來了,這樣是無法深層的定製標題欄的,比如原有的高度和背景都沒有發生變化,那有沒有好的方法呢?答案是有的、
方法二:
因此先定義一個style,若修改背景請修改android:windowTitleBackgroundStyle
若修改標題欄高度,請修改android:windowTitleSize
例子:
?
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="schemas.android.com/apk/res/android">
<style name="CustomWindowTitleBackground">
<item name="android:background">#565656</item>
</style>
<style name="test" parent="android:Theme">
<item name="android:windowTitleSize">50dp</item>
<item name="android:windowTitleBackgroundStyle">@style/CustomWindowTitleBackground</item>
</style>
</resources>
在程序的android_manifest.xml中對應activity中添加屬性android:theme = "@style/test" 就可以了
?
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="schemas.android.com/apk/res/android"
package="com.guardian"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="@drawable/icon" android:label="@string/app_name" >
<activity android:name=".Test"
android:label="@string/app_name"
android:theme = "@style/test" //就在這里
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-sdk android:minSdkVersion="4" />
</manifest>