iOS和Android兩個(gè)不同的平臺(tái),肯定是有很多區(qū)別的,下面就從交互的角度,談?wù)剠^(qū)別。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶,將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:國(guó)際域名空間、網(wǎng)頁(yè)空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、白河網(wǎng)站維護(hù)、網(wǎng)站推廣。
以前就讀過(guò)IOS和Android的規(guī)范,但是覺(jué)得沒(méi)啥大用處,因?yàn)楝F(xiàn)在APP為了保持一致性,通常在IOS和Android上的設(shè)計(jì)是一樣的,而且一些小公司只設(shè)計(jì)IOS的交互原型,因?yàn)橹灰狪OS上能用,安卓上肯定沒(méi)問(wèn)題,前段時(shí)間,和一個(gè)人聊,問(wèn)我它倆的區(qū)別,當(dāng)時(shí)一臉懵逼,不知從何說(shuō)起。畢竟是兩個(gè)不同的平臺(tái),肯定是有很多區(qū)別的,下面就從交互的角度,談?wù)剠^(qū)別。
一、全局導(dǎo)航
IOS:通常放在底部,方便用戶點(diǎn)擊
Android:通常放在上面,下面有物理按鍵,防止誤操作。
解析:因?yàn)锳ndroid比IOS多了物理按鍵,為了防止誤操作,所以只能將全局導(dǎo)航放在上面,但是隨著屏幕越來(lái)越大,上面是手指無(wú)法觸及的區(qū)域,所以切換起來(lái)相對(duì)成本較高。
二、二級(jí)導(dǎo)航
IOS:通常放返回、上一級(jí)標(biāo)題、標(biāo)題(居中),操作通常只有一個(gè)
Android:通常返回控件、logo、下拉菜單、重要操作、更多操作
解析:IOS顯示了上一級(jí)的名稱(chēng),讓用戶點(diǎn)擊返回后,心里有預(yù)期,Android放了APP的logo,增加了品牌性,但是就使用來(lái)講,用戶不知道點(diǎn)擊會(huì)回到哪,下拉菜單和更多操作都需要點(diǎn)擊才能顯示,增加了操作步驟。
三、工具欄
IOS:通常放在最下面,方便操作
Android:放在導(dǎo)航欄里,將重要操作放在外面,其他放在更多里。
解析:IOS將操作都放在底部,區(qū)域更大,操作更方便。Android將操作放在了頂部,顯得很擁擠,并且還收起了一部分,需要用戶查找,但是卻節(jié)省了空間,讓內(nèi)容顯示區(qū)更大。
四、提示框
IOS:出現(xiàn)在屏幕中間,可以帶圖標(biāo),可以不帶,可以是靜態(tài)的,也可以是動(dòng)態(tài)的。
Android:不可以帶圖標(biāo),不能是動(dòng)態(tài)的,最多只可以帶一個(gè)操作按鈕,最多只能出現(xiàn)一個(gè)提示,不能和低端的懸浮按鈕重合。
解析:IOS的設(shè)計(jì)理念是盡量不打擾用戶,只要用戶能看見(jiàn)變化,輕易不會(huì)出現(xiàn)提示,只有一些用戶無(wú)法感知時(shí),才會(huì)出現(xiàn)提示框,所以可以是動(dòng)態(tài)的,像調(diào)節(jié)音量。Android的提示要比IOS重一些,因?yàn)樗梢詭б粋€(gè)按鈕。
五、警示框
IOS:標(biāo)題和按鈕是必須的,可以有內(nèi)容和輸入
Android:主要有四種:用途、內(nèi)容、事件、表現(xiàn)。
1、用途包含了標(biāo)題,內(nèi)容和事件。
六、手勢(shì)定義
IOS的手勢(shì)規(guī)定有8種,如下:
解析:IOS只有8種手勢(shì),Android有14種,但是很多都不常用,個(gè)人感覺(jué)IOS的8種已經(jīng)完全夠用了,定義那么多種,用戶的學(xué)習(xí)成本就會(huì)提高,而且Android的有些手勢(shì)并沒(méi)有定義可以做什么,所以給出這么多手勢(shì)也沒(méi)有用。
結(jié)語(yǔ)
本文對(duì)IOS和Android的規(guī)范進(jìn)行了對(duì)比,Android的規(guī)范那是相當(dāng)詳細(xì),但是IOS的只給出了設(shè)計(jì)原則,所以,一些是我自己總結(jié)的,可能對(duì)比的還不夠全面,歡迎大家一起討論。
眾所周知,安卓系統(tǒng)是開(kāi)源的,國(guó)內(nèi)又有超多的手機(jī)廠商,小米、魅族、華為、oppo、三星等,每一個(gè)品牌有屬于自己的UI設(shè)計(jì)規(guī)范,但是我們主要分析UI界面尺寸規(guī)范。
1、字體
安卓系統(tǒng)中文采用的是思源黑體,英文字體為robot字體。
只使用偶數(shù)單位 24 pt,28 pt,36 pt等字體大小
2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思?
講圖標(biāo)之前先來(lái)分析一下一排英文的意思:
mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小,依次數(shù)值越大,其分辨率越高。常用的是xxhdpi和xxxhdpi。
dp是安卓系統(tǒng)專(zhuān)用的長(zhǎng)度單位,設(shè)備獨(dú)立像素的意思。不同設(shè)備有不同的顯示效果,這個(gè)和設(shè)備硬件有關(guān)。多為圖標(biāo)使用,文字則用sp(放大像素),主要用于字體顯示best for textsize。
px是像素的意思, 不同設(shè)備顯示效果相同。
安卓各屏幕密度關(guān)系如下:
3、圖標(biāo)
不同手機(jī)品牌的圖標(biāo)的標(biāo)志是不一樣的,對(duì)應(yīng)不同大小屏幕的尺寸如下:
系統(tǒng)圖標(biāo)的尺寸:
快捷圖標(biāo)的尺寸:
應(yīng)用圖標(biāo)的尺寸:
4、應(yīng)用欄的尺寸
從左到右依次是:① 應(yīng)用欄高度:56dp;應(yīng)用欄左右內(nèi)邊距為16dp;應(yīng)用欄圖標(biāo)上下左內(nèi)邊距為16dp;應(yīng)用欄標(biāo)題左內(nèi)邊距為72dp;應(yīng)用欄標(biāo)題下邊距:20dp;
②應(yīng)用欄高度為128dp;
③操作欄高度為56dp;標(biāo)題欄高度:80dp;標(biāo)題欄底部?jī)?nèi)邊距:8dp;描述區(qū)域高度:72dp;描述區(qū)底部?jī)?nèi)邊距:16dp。
5、列表高度
垂直邊框、水平外邊距、邊框左右外邊距各16dp;帶有圖標(biāo)或者頭像的內(nèi)容有72dp的左邊距。
垂直邊距
①狀態(tài)欄:24dp;②工具欄:56dp;③子標(biāo)題:48dp;④列表項(xiàng):72dp
垂直邊框、水平外邊距、邊框左右外邊距各16dp;帶有圖標(biāo)或者頭像的內(nèi)容有72dp的左邊距。
垂直邊距
①狀態(tài)欄:24dp;②工具欄:56dp;③標(biāo)題和列表項(xiàng):48dp;④子標(biāo)題:48dp;⑤內(nèi)容區(qū)域間距離為8dp
6、切圖
上周我們講到iPhone 6與iPhone 6 Plus約是1.5的關(guān)系,而xhdpi的Android手機(jī)屏幕與xxdpi的屏幕剛好是1.5倍的關(guān)系,所以iPhone 6 Plus和xxhdip也可以共用一套切圖,掌握好尺寸關(guān)系,能讓工作變得簡(jiǎn)單很多。
7、界面適配
安卓多屏幕支持的基礎(chǔ)是它能夠管理應(yīng)用程序的布局和位圖可繪制對(duì)象的渲染以適當(dāng)?shù)姆绞綄?duì)當(dāng)前屏幕配置的能力。該系統(tǒng)處理的大部分工作由布局縮放以適合屏幕尺寸/密度和縮放位圖可繪制在屏幕密度正確呈現(xiàn)您的應(yīng)用程序在每個(gè)屏幕的配置,來(lái)優(yōu)化用戶界面設(shè)計(jì),帶來(lái)更良好的用戶體驗(yàn)。
如何做到安卓界面適配呢?大家一定要很清楚的了解分辨率、屏幕大小、密度的關(guān)系;明白實(shí)際密度和系統(tǒng)密度的關(guān)系,dp、sp、px的區(qū)別;明白dp與px的轉(zhuǎn)換。這里不做過(guò)多闡述,后期寫(xiě)一篇具體的~
安卓的界面規(guī)范就講到這里,要明白設(shè)計(jì)界面規(guī)范的意義是確保設(shè)計(jì)的統(tǒng)一性與合理性,規(guī)范維護(hù)的是項(xiàng)目的統(tǒng)一,為了項(xiàng)目利益最大化,高效化。所以作為UI設(shè)計(jì)師的我們,如果一點(diǎn)設(shè)計(jì)規(guī)范不遵守,全靠自己想當(dāng)然,那就別發(fā)給前端人員啦,他也看不懂。
Android模塊化設(shè)計(jì)方案系列文章:
1、 Android模塊化設(shè)計(jì)方案模型圖
2、 Android模塊化設(shè)計(jì)方案之接口API化
3、 Android模塊化設(shè)計(jì)方案之使用代理模式解耦
本篇是Android模塊化設(shè)計(jì)方案的第三篇,也是對(duì) 第一篇 中ThridLibs Proxy模塊進(jìn)行說(shuō)明。
很多人覺(jué)得對(duì)那些優(yōu)秀的第三方依賴(lài)庫(kù)再次封裝是一件多余的事情,因?yàn)檫@些庫(kù)可能出自大神/大廠,或有非常高的star并且使用起來(lái)十分穩(wěn)定,可以在項(xiàng)目中直接拿來(lái)使用。當(dāng)然每個(gè)開(kāi)發(fā)者都有自己的態(tài)度,我也只是根據(jù)以往的經(jīng)驗(yàn),表達(dá)一下自己的看法。
作為從了解四大組件就不愁找不到工作的互聯(lián)網(wǎng)大時(shí)代中一路走來(lái)的Android老鳥(niǎo),經(jīng)歷了網(wǎng)路請(qǐng)求框架從HttpConnection到Volley再到OkHttp,也經(jīng)歷了圖片加載框架從UniversalImageLoader到Picasso再到Gilde,技術(shù)的迭代隨時(shí)都會(huì)發(fā)生。讓項(xiàng)目架構(gòu)具有良好的擴(kuò)展性是在設(shè)計(jì)之初就需要考慮的東西。
那么接下來(lái)我用一個(gè)簡(jiǎn)單的demo來(lái)演示一下如何使用代理模式對(duì)第三方框架進(jìn)行解耦。
現(xiàn)在我們有一個(gè)名為 thirdlib 的模塊,為我們提供圖片加載功能。
第一步:我們創(chuàng)建了一個(gè)新的模塊 thridlibproxy ,并且該模塊依賴(lài)于 thirdlib ,我們?cè)谠撃K中創(chuàng)建包私有的接口ImageLoaderInterface,這個(gè)接口中把thirdlib模塊中提供的功能抽象為接口:
第二步:創(chuàng)建包私有的接口的實(shí)現(xiàn)類(lèi)ImageLoaderOneImpl,類(lèi)中圖片加載的業(yè)務(wù)邏輯是通過(guò)調(diào)用 thirdlib 中的ImageLoader類(lèi)實(shí)現(xiàn)的:
第三步:我們提供一個(gè)供外部調(diào)用的ImageLoaderOneImpl接口代理類(lèi)ImageLoaderProxy:
最后我們就可以通過(guò)ImageLoaderProxy中提供的loadImage方法進(jìn)行圖片的加載了。
看到這里有些盆友就會(huì)問(wèn)了,在第二步的時(shí)候,我們就完成了 thirdlib 的封裝工作,為什么還要有第三步?還有我寫(xiě)一個(gè)單例類(lèi)直接對(duì) thirdlib 進(jìn)行封裝不就行了,為什么還要抽象出接口?
原因很簡(jiǎn)單,為的就是盡可能的滿足軟件設(shè)計(jì)七大原則中的第一個(gè): 開(kāi)閉原則 。
一個(gè)好的軟件設(shè)計(jì),需要對(duì)拓展開(kāi)放,對(duì)修改關(guān)閉。我們?cè)谠O(shè)計(jì)之初就要想到,在更換圖片加載框架之后如何最大程度上滿足開(kāi)閉原則。
如果直接對(duì) thirdlib 進(jìn)行封裝,是面向類(lèi)的開(kāi)發(fā)而不是面向接口。如果此時(shí)更換圖片加載類(lèi)庫(kù),那必然會(huì)對(duì)封裝出來(lái)的類(lèi)進(jìn)行大量的修改,把原來(lái)的實(shí)現(xiàn)替換為新的實(shí)現(xiàn)。
使用代理模式的好處就是,我新創(chuàng)建一個(gè)被代理的類(lèi)ImageLoaderTwoImpl:
然后只需要對(duì)第三步中的被代理類(lèi)進(jìn)行替換就行了。
在想要達(dá)到相同效果的時(shí)候,最大程度的滿足了開(kāi)閉原則。
我們業(yè)務(wù)層模塊也和第三方庫(kù)實(shí)現(xiàn)了完全的解耦,我不需要知道 thridlibproxy 是如何幫我完成圖片加載工作的,但是只要調(diào)用它提供的方法就完事兒的,這也符合軟件設(shè)計(jì)七大原則中的: 最少知道原則 。
關(guān)于為何以及怎么通過(guò)代理調(diào)用第三方依賴(lài)庫(kù),到這里就介紹完畢了,趕快動(dòng)手試試吧~
我只想說(shuō): 原則是死的,人是活的????
如果覺(jué)得有收獲的話,歡迎點(diǎn)贊評(píng)論以及關(guān)注~
2. 軟件設(shè)計(jì)模式的分類(lèi)
2.1. 創(chuàng)建型
創(chuàng)建對(duì)象時(shí),不再由我們直接實(shí)例化對(duì)象;而是根據(jù)特定場(chǎng)景,由程序來(lái)確定創(chuàng)建對(duì)象的方式,從而保證更大的性能、更好的架構(gòu)優(yōu)勢(shì)。創(chuàng)建型模式主要有簡(jiǎn)單工廠模式(并不是23種設(shè)計(jì)模式之一)、工廠方法、抽象工廠模式、單例模式、生成器模式和原型模式。
2.2. 結(jié)構(gòu)型
用于幫助將多個(gè)對(duì)象組織成更大的結(jié)構(gòu)。結(jié)構(gòu)型模式主要有適配器模式adapter、橋接模式bridge、組合器模式component、裝飾器模式decorator、門(mén)面模式、亨元模式flyweight和代理模式proxy。
2.3. 行為型
用于幫助系統(tǒng)間各對(duì)象的通信,以及如何控制復(fù)雜系統(tǒng)中流程。行為型模式主要有命令模式command、解釋器模式、迭代器模式、中介者模式、備忘錄模式、觀察者模式、狀態(tài)模式state、策略模式、模板模式和訪問(wèn)者模式。
3. 常見(jiàn)設(shè)計(jì)模式介紹
3.1. 單例模式(singleton)
有些時(shí)候,允許自由創(chuàng)建某個(gè)類(lèi)的實(shí)例沒(méi)有意義,還可能造成系統(tǒng)性能下降。如果一個(gè)類(lèi)始終只能創(chuàng)建一個(gè)實(shí)例,則這個(gè)類(lèi)被稱(chēng)為單例類(lèi),這種模式就被稱(chēng)為單例模式。
一般建議單例模式的方法命名為:getInstance(),這個(gè)方法的返回類(lèi)型肯定是單例類(lèi)的類(lèi)型了。getInstance方法可以有參數(shù),這些參數(shù)可能是創(chuàng)建類(lèi)實(shí)例所需要的參數(shù),當(dāng)然,大多數(shù)情況下是不需要的
設(shè)計(jì)模式總共是23種,常用的有下面幾種 :
1 單例模式,application 就是單例 可以存儲(chǔ)一些數(shù)據(jù)例如記錄activity的啟動(dòng)數(shù)量 ;
2 觀察者模式: button的onClickListener ,監(jiān)聽(tīng)button的響應(yīng);
3 適配器模式 :例如recyclerView 的adapter ;
4 命令模式: 例如開(kāi)源庫(kù)eventBus ,把數(shù)據(jù)封裝好 發(fā)送出去,然后接收; 等等等等,很多
RelativeLayout xmlns:android=""
xmlns:app=""
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