android的界面
1. Android新版本,全新界面設計,實用功能都有哪些
可以看出,這次的更新,Android在UI、UX上下了很大的功夫,但是有評論也指出,擬物化的界面神似Android 5.0之前的版本。相信老用戶會有一定的印象,Android 5.0前後的安卓系統簡直天差地別。
不只是外觀上,功能上也有眾多的改變。對於 游戲 黨來說,Android 12自帶了 游戲 模式,可以自定義電源的性能模式和防干擾,而且可以調整幀率,使得 游戲 更加流暢,對於喜歡玩手機 游戲 的用戶來說不失為一項實用的帶扮凳功缺閉能。
在人性化方面,Android 12也新增了緊急求助和隱私保護等功能,讓用戶感受到更多的人文關懷和安全感。現在很多國內機型也已經開始起測試版本,感興趣的小夥伴們可以蠢旅去嘗試一下。不知道這一次的大幅度改版,能否像Android 5.0一樣被用戶所銘記呢?
2. 怎樣設計android系統的用戶界面請簡述界面布局方式
1 學習原生軟體的界面開發,而且最好還是看一些開源的,無論從設計的角度還是從開發的角度都是極好的。
比如優秀的作品很多,這些不開源學習界面就好,開源的可以看看系統的應用。和系統本身結合的非常好,設計風格和系統也很統一,給用戶較好的體驗。
2 確定整體產品色彩基調,色彩基調可以從產品功能中提取,也可以從產品LOGO中提取;
3 做出界面原型,包括功能布局、頁面交互等元素;
4 在界面原型基礎上進行色彩添加,進一步的細節調整;
5 有了好的外形基礎後,再就是回歸到用戶體驗。記住用戶才是第一位的。交互設計通常靠外形吸引用戶,但真正留住用戶的是細節上的人性化。讓這些極簡的設計細節控制用戶的生活習慣,最終讓用戶離不開它們!根據用戶使用體驗反饋再次修改界面,不斷完善。
3. Android 界面排版
Android布局是應用界面開發的重要一環,在Android中,共有五種布局方式,分別是:FrameLayout(框架布局),LinearLayout (線性布局),AbsoluteLayout(絕對布局),RelativeLayout(相對布局),TableLayout(表格布局).
一、FrameLayout
這個布局可以看成是牆腳堆東西,有一個四方的矩形的左上角牆腳,我們放了第一個東西,要再放一個,那就在放在原來放的位置的上面,這樣依次的放,會蓋住原來的東西。這個布局比較簡單,也只能放一點比較簡單的東西。
二、LinearLayout
線性布局,這個東西,從外框上可以理解為一個div,他首先是一個一個從上往下羅列在屏幕上。每一個LinearLayout裡面又可分為垂直布局(android:orientation="vertical")和水平布局(android:orientation="horizontal" )。當垂直布局時,每一行就只有一個元素,多個元素依次垂直往下;水平布局時,只有一行,每一個元素依次向右排列。
linearLayout中有一個重要的屬性 android:layout_weight="1",這個weight在垂直布局時,代錶行距;水平的時候代表列寬;weight值越大就越大。
三、AbsoluteLayout
絕對布局猶如div指定了absolute屬性,用X,Y坐標來指定元素的位置android:layout_x="20px" android:layout_y="12px" 這種布局方式也比較簡單,但是在垂直隨便切換時,往往會出問題,而且多個元素的時候,計算比較麻煩。 AbsoluteLayout 可以讓子元素指定準確的x/y坐標值,並顯示在屏幕上。AbsoluteLayout 沒有頁邊框,允許元素之間互相重疊(盡管不推薦)。他是絕對坐標,所以在實際中不提倡使用。
相對布局可以理解為某一個元素為參照物,來定位的布局方式。主要屬性有:
相對於某一個元素
// 相對於給定ID控制項
android:layout_above 將該控制項的底部置於給定ID的控制項之上;
android:layout_below 將該控制項的底部置於給定ID的控制項之下;
android:layout_toLeftOf 將該控制項的右邊緣與給定ID的控制項左邊緣對齊;
android:layout_toRightOf 將該控制項的左邊緣與給定ID的控制項右邊緣對齊;
android:layout_alignBaseline 將該控制項的baseline與給定ID的baseline對齊;
android:layout_alignTop 將該控制項的頂部邊緣與給定ID的頂部邊緣對齊;
android:layout_alignBottom 將該控制項的底部邊緣與給定ID的底部邊緣對齊;
android:layout_alignLeft 將該控制項的左邊緣與給定ID的左邊緣對齊;
android:layout_alignRight 將該控制項的右邊緣與給定ID的右邊緣對齊;
// 相對於父組件
android:layout_alignParentTop 如果為true,將該控制項的頂部與其父控制項的頂部對齊;
android:layout_alignParentBottom 如果為true,將該控制項的底部與其父控制項的底部對齊;
android:layout_alignParentLeft 如果為true,將該控制項的左部與其父控制項的左部對齊;
android:layout_alignParentRight 如果為true,將該控制項的右部與其父控制項的右部對齊;
// 居中
android:layout_centerHorizontal 如果為true,將該控制項的置於水平居中;
android:layout_centerVertical 如果為true,將該控制項的置於垂直居中;
android:layout_centerInParent 如果為true,將該控制項的置於父控制項的中央;
// 指定移動像素
android:layout_marginTop 上偏移的值;
android:layout_marginBottom 下偏移的值;
android:layout_marginLeft 左偏移的值;
android:layout_marginRight 右偏移的值;
example:
android:layout_below = "@id/***"
android:layout_alignBaseline = "@id/***"
android:layout_alignParentTop = true
android:layout_marginLeft = 「10px」
還可以指定邊距等,具體詳見API
五.TableLayout
表格布局類似Html裡面的Table。每一個TableLayout裡面有表格行TableRow,TableRow裡面可以具體定義每一個元素,設定他的對齊方式 android:gravity="" 。
每一個布局都有自己適合的方式,另外,這五個布局元素可以相互嵌套應用,做出美觀的界面。TableLayout 將子元素的位置分配到行或列中。一個TableLayout 由許多的TableRow 組成,每個TableRow 都會定義一個 row 。TableLayout 容器不會顯示row 、cloumns 或cell 的邊框線。每個 row 擁有0個或多個的cell ;和html中的table查不多少。在實際中也經常使用。
Android的Margin和Padding跟Html的是一樣的。通俗的理解 Padding 為內邊框,Margin 為外邊框
對應的屬性為
android:layout_marginBottom="25dip"
android:layout_marginLeft="10dip"
android:layout_marginTop="10dip"
android:layout_marginRight="10dip"
android:paddingLeft="1dip"
android:paddingTop="1dip"
android:paddingRight="1dip"
android:paddingBottom="1dip"
如果左右上下都是相同的設置則可以直接設置
android:layout_margin="10dip"
android:padding="5dip"
過去,程序員通常以像素為單位設計計算機用戶界面。例如,定義一個寬度為300像素的表單欄位,列之間的間距為5個像素,圖標大小為16×16像素 等。這樣處理的問題在於,如果在一個每英寸點數(dpi)更高的新顯示器上運行該程序,則用戶界面會顯得很小。在有些情況下,用戶界面可能會小到難以看清 內容。
與解析度無關的度量單位可以解決這一問題。Android支持下列所有單位。
px(像素):屏幕上的點。
in(英寸):長度單位。
mm(毫米):長度單位。
pt(磅):1/72英寸。
dp(與密度無關的像素):一種基於屏幕密度的抽象單位。在每英寸160點的顯示器上,1dp = 1px。
dip:與dp相同,多用於android/ophone示例中。
sp(與刻度無關的像素):與dp類似,但是可以根據用戶的字體大小首選項進行縮放。
為了使用戶界面能夠在現在和將來的顯示器類型上正常顯示,建議大家始終使用sp作為文字大小的單位,將dip作為其他元素的單位。當然,也可以考慮使用矢量圖形,而不是用點陣圖.
dp是與密度無關,sp除了與密度無關外,還與scale無關。
如果屏幕密度為160,這時dp和sp和px是一樣的。1dp=1sp=1px,但如果使用px作單位,如果屏幕大小不變(假設還是3.2寸),而屏幕密度變成了320。
那麼原來TextView的寬度設成160px,在密度為320的3.2寸屏幕里看要比在密度為160的3.2寸屏幕上看短了一半。
但如果設置成160dp或160sp的話。系統會自動將width屬性值設置成320px的。
也就是160 * 320 / 160。其中320 / 160可稱為密度比例因子。也就是說,如果使用dp和sp,系統會根據屏幕密度的變化自動進行轉換
4. 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
5. android的界面布局方式有哪些
一、界面布局之線性布局(LinearLayout)
這種布局比較常用,也比較簡單,就是每個元素佔一行,把它按照橫向排放,也就是每個元素佔一列。在布局中都按照垂直或者水平的順序依次排列子元素,每一個子元素都位於前一個元素之後。
二、界面布局之相對布局(RelativeLayout)
相對布局是android界面設計中比較常用和好用的一個布局方式。
三、界面布局之表格布局(TableLayout)
表格布局採用行、列的形式來管理元素組件。TableLayout的行和列不需要聲明,而是採用添加方法控制。
每次在TableLayout中添加一個TableRow,一個TableRow就代表表格中的一行,也同樣是容器,往裡面添加一個子組件就代表增加一列。在表格布局中,列的寬度由最寬的那個單元格決定,整個表格布局寬度取決於父容器的寬度
四、界面布局之絕對布局(AbsoluteLayout)
特點:以坐標的方式來定位在屏幕上的位置,引起缺乏靈活性,在沒有絕對定位的情況下相比其他類型的布局更難維護
五、界面布局之幀布局(FrameLayout)
FrameLayout是五大布局中最簡單的一個布局。在幀布局中,整個界面被當成一塊空白備用區域,所有的子元素都不能被指定放置的位置,它們統統放於這塊區域的左上角,並且後面的子元素直接覆蓋在前面的子元素之上,將前面的子元素部分和全部遮擋。
轉自長沙軟體公司---小房子