uiapp設計方案(UI設計方案)
移動App產(chǎn)品 UI設計需要注意哪些細節(jié)?
l、一致,一致,還是一致
你能做的最重要的事情就是保證用戶界面運作的一致性。對于列表框來說,如果雙擊其中的項,使得某些事件發(fā)生,那么雙擊任何其它列表框中的項,都應該有同樣的事件發(fā)生。所有窗口按鈕的位置要一致,標簽和訊息的措辭要一致,顏色方案要一致。用戶界面的—致性使得在用戶對于界面運作建立起精確的心理模型,從而降低培訓和支持成本。
2、建立標準并遵循之
在應用軟件中保持一致的唯一途徑就是建立設計標準并加以遵循。最好的辦法是采取一套行業(yè)標準,對自身特殊的需要加以補充。已有的行業(yè)標準,如IBM標準(1993)與Microsoft標準(1995),通??蓾M足95%到99%的需要。采用行業(yè)標準,只需利用已有的成果,也使你的應用軟件看起來或感覺上更象用戶已購買或建立的其它應用軟件。應當在定義基礎構(gòu)造階段就建立用戶界面設計標準。
3、闡明規(guī)則
用戶要知道怎么使用你為他們開發(fā)的軟件。軟件運作的一致性表明,規(guī)則你只需解釋一遍。這比一步步詳細講解如何使用應用軟件每個特性要容易得多。
4、同時支持生手和熟手
圖書館目錄符號對圖書館系統(tǒng)的一般用戶來說,也許就夠用了,但對熟手用戶,如圖書管理員,很可能就沒有那么有效了。圖書管理員是受過專門訓練,能夠使用復雜的查詢系統(tǒng)找到信息,因此,應當考慮建立一套查詢界面以滿足他們的獨特需要。
5、界面間切換很重要
如果從一個屏幕轉(zhuǎn)換到另一屏幕很困難,用戶會很快灰心并放棄。當屏幕流程與用戶想完成的工作流程相符,此軟件對用戶才有意義。由于不同用戶工作方式不同,應用軟件需要有足夠的靈活以支持他們不同的方式。在建模階段,界面流程圖可用來模擬屏幕之間的流程。
6、界面上的布局很重要
在西方,人們是自左而右,從上而下閱讀,基于人們的習慣,屏幕的組織也應當是自左而右,從上而下。屏幕小部件的布局也應以用戶熟悉的方式進行。
7、訊息和標簽措辭要適當
屏幕上顯示的文本是用戶主要的信息源。如果文本措辭很糟,用戶的理解就會很糟。要使用完整的措辭和句子,而不要用縮寫和代碼,使文本易于理解。訊息措辭要積極,顯示用戶處于控制之中,并提示如何正確使用軟件。如,下面哪一條訊息更吸引人: “你輸入了錯誤信息”還是”帳號應為8位數(shù)”?此外,訊息措辭要一致,在屏幕上顯示的位置要一致。盡管這樣的訊息”須輸入名字”和”應輸入帳號”分別來說措辭上沒問題,放在一起就不一致了。根據(jù)第一條訊息的措辭,第二條訊息更好的措辭應當是”須輸入帳號”,這就使得兩條訊息措辭一致了。
8、了解小部件
為恰當?shù)娜蝿帐褂们‘數(shù)男〔考?,首先可以幫助增強應用軟件的一致性,可能使得應用軟件很容易?gòu)造。學會如何正確使用小部件的唯一途徑是閱讀和理解你們所采用的用戶界面標準及準則。
9、對其它軟件不盲從
除非你知道一個應用軟件是遵循了你們的用戶界面標準和準則,否則你絕不能認定它做的都是對的。盡管看看人家怎么做,從中獲得些主意是不錯的想法,但在懂得怎樣區(qū)分用戶界面設計的好壞之前,你得留神。太多的開發(fā)者錯誤地模仿其它應用軟件的用戶界面,而那些界面卻設計得很糟,最好將界面設計的美工外包項目請專業(yè)的設計外包公司來完成。
10、顏色使用要適當 使用顏色要謹慎。
如果使用了,也要使用指示符。問題就在于有些用戶可能是色盲一一如果在屏幕上使用了顏色來突出顯示某些東西,假若想讓色盲的用戶注意到,那么需要做些另外的工作來突出它,如在其旁邊顯示一個符號。顏色的使用也得一致,以使整個應用軟件有同樣的觀感。此外,在不同平臺上,色彩的表現(xiàn)不盡人意一一在一個系統(tǒng)上看上去很好,在另一個系統(tǒng)上常??瓷先ズ茉?。展示會上我們經(jīng)常聽到展示者這樣說: “在我家中的機器上看上去可是很好的呀?!?/p>
11、遵循對比原則
打算在應用軟件中使用顏色,要確保屏幕的可讀性。最好的方法是遵循對比原則:在淺色背景上使用深色文字,在深色背景上使用淺色文字。藍色文字以白色為背景很容易讀,但以紅色為背景很難辨認。問題出在藍色與紅色之間沒有足夠反差,而藍色與白色之間則反差很大。
12、字體使用要適當
如何制作app軟件?
先建立開發(fā)環(huán)境,再找外包公司。
Android開發(fā)涉及到的技術點非常龐雜。
主要知識點如下:
1.開發(fā)環(huán)境,AndroidStudio、eclipse.如何搭建Android開發(fā)環(huán)境可以去百度。
2.數(shù)據(jù)結(jié)構(gòu),App的某些功能涉及到做算法,所以要有一定的數(shù)學基礎
3.AndroidSDK,會API接口開發(fā),包括自行開發(fā)API的能力和調(diào)用第三發(fā)API的經(jīng)驗。
4.熟悉tcp、IP,socket等網(wǎng)絡協(xié)議
5.如果涉及到服務器,你還需要了解webservice相關知識和相應的開發(fā)語言,常用有PHP、JSP、ASP.Net.
6.除了這些功能基礎,App開發(fā)還涉及到UI設計、框架、性能優(yōu)化、調(diào)試適配等。
開發(fā)iOS系統(tǒng)App需要Objective-C主流編程語言,開發(fā)者一般用蘋果公司的iOSSDK搭建開發(fā)環(huán)境,iOSSDK是開發(fā)iOS應用程序中不可少的軟件開發(fā)包,提供了從創(chuàng)建程序,到編譯、調(diào)試、運行、測試等多種開發(fā)過程中需要等工具。學習iOS開發(fā)可以去看蘋果官方文檔,這是最權(quán)威的ios教程。
能同時用于 Android 和 iOS的APP UI設計怎么做
遵循這些步驟,你的 App 就能同時在 iOS 和 Android 保持完美!
1. 總體的樣式
從 iOS7 以后,Apple 就一直在采用扁平化的設計模式,去除了所有不必要的紋理和陰影等效果——和早些年間的版本完全不同。Google 的新 MD 設計規(guī)范有了一些更加細節(jié)的規(guī)定,通過一種叫“紙片”的方法來創(chuàng)造更多的層級關系。
2. 實體按鈕
Android 有一個返回按鈕,點擊它可以返回上一個屏幕。
iPhone 上則沒有這樣一個按鈕,所以需要有一種方式能夠讓用戶回到先前的屏幕。通常的解決方案是在屏幕的左上角放置一個返回鍵。
3. 通用元素
兩種平臺之間的確存在著一些通用的元素,比如說狀態(tài)欄和標題欄,它們會出現(xiàn)在每一屏的頂部。你不應當改變導航欄的高度,如果你想讓 App 看起來更加原生的話。所以,我推薦你在設計的第一頁就定義好標題欄的樣式,然后在其他的屏幕上使用一個占位的方框來替代,這樣能省下不少時間,但是你應當向程序員說明標題欄在不同的屏幕上都是一樣的樣式。
不同平臺上的導航欄有一定的差別。在 Android 上文本是左對齊的,然而 iOS 上是居中對齊的。在 iOS 上,很多企業(yè)都用它們的 logo 來替換首頁標題欄中的文字,但是在 Android 設備上這不是一個好的主意。狀態(tài)欄(顯示你的網(wǎng)絡、電量和時間信息)是系統(tǒng)組件,你不需要考慮設計它,只要確保它們不會對他人造成誤解就好了。
4. 導航
或許iOS 和 Android 平臺之間最大的區(qū)別就在于他們的導航樣式了。Android 上最主要的導航方式是抽屜菜單,Android 用戶們通常在這個菜單內(nèi)進行跳轉(zhuǎn)。而且在整個 App 中,這種體驗是一貫的。Apple 的導航樣式更傾向于 tab bar,它位于屏幕的底部,并且以一種很簡單的方式實現(xiàn)上部內(nèi)容的切換。當你設計 App 的結(jié)構(gòu)的時候,你可以為不同的平臺設計不同的導航樣式。
5. 要不要用卡片式
在 UI 設計中,卡片正逐漸成為一種主要的 UI 設計樣式,它們可以應付多種情況,而且給用戶提供了一種能夠呈現(xiàn)有效內(nèi)容的便捷方式。視覺上,卡片非常適應于 Android 的 Material Design(它事實上源自于紙張的靈感)。使用陰影和卡片之間的合理間距能夠創(chuàng)建一種自然的外觀。
在 iOS 上,使用卡片設計需要更加的小心謹慎,盡管一些大型的 App,諸如 Facebook 和 pinterest 的確使用了一種略微偏離 iOS 視覺規(guī)范的設計風格。Instagram 使用了一種完全扁平化的設計風格,盡管從結(jié)構(gòu)的觀點上看,用戶的每一條推送都能被視為是一張卡片,instagram 的設計很值得你去花時間揣摩,它是如何遵循 iOS 視覺規(guī)范的。如果你要在 iOS 平臺上應用陰影,你最好小心謹慎,盡量使得這些陰影不是那么的明顯。
6. 排版
iOS 系統(tǒng)上的默認字體是 Helvetica Neue,在 Android 上則是 Roboto。盡管這兩種字體在外觀上有顯著的差異,但是這兩個字體的尺寸卻是近乎相同的。如果你想要在設計的時候節(jié)省時間,那么用一款字體就可以,但是要和開發(fā)人員溝通在不同的平臺上使用對應的字體。而在設計重要的布局結(jié)構(gòu)和使用大號字體時,我建議你還是同時用這兩種字體測試效果。
如果你想要精益求精,那么你就要對不同平臺上的設計規(guī)范更加注意。比如如下幾條:
Android 的 MD 設計需要用到更多的空格來進行布局
在 MD 中字體大小的變化會更加多樣
在 iOS 上,字體沒那么多大小差異,但是在字體重量上(Font weight)有更多的變化,同樣允許你創(chuàng)建主次結(jié)構(gòu)
兩個平臺都使用比較細的字體來現(xiàn)實正文內(nèi)容,然而,在下面的例子中,Android 使用了輕(Lighr)和常規(guī)(Regular)字體,而 iOS 使用了粗體(Bold)和常規(guī)字體
這是一個非常簡單的例子,向你展示了排版方面的一些細微的不同可以導致印象上的巨大差異——你能很快分辨你是在用 Android 手機還是在用 iPhone!
7. 網(wǎng)格和觸摸元件
iOS(@1x 下 44px)和 Android(1:1 比率下 48p)都有對可觸摸元件的設計規(guī)范。MD 規(guī)范同樣建議對所有元素使用 8dp 網(wǎng)格對齊。
在最近的項目上,我發(fā)現(xiàn)遵守 Android 的這些設計規(guī)范會更加安全,因為大一些的 48px 的按鈕在兩個平臺上都表現(xiàn)良好,而且 MD 的規(guī)范更加全面,還經(jīng)常更新。不管怎么說,你都應該在設計中使用網(wǎng)格,但是我們發(fā)現(xiàn)定義更加明確的 Android 網(wǎng)格會更好用一些。