?一.三大原則:1.Deference(遵從)2.Clarity (清晰) ?3.Depth (深度)
1.Deference:UI應(yīng)該有助于用戶(hù)更好地理解內(nèi)容并與之交互,且不會(huì)分散用戶(hù)對(duì)內(nèi)容本身的注意力潦嘶。
2.Clarity:各種尺寸的文字清晰易讀;圖標(biāo)應(yīng)該精確醒目,去除多余的修飾,突出重點(diǎn),以功能驅(qū)動(dòng)設(shè)計(jì)。
3.Depth:視覺(jué)的層次感和生動(dòng)的交互動(dòng)畫(huà)會(huì)賦予UI新的活力,有助于用戶(hù)更好地理解并讓用戶(hù)在使用過(guò)程中感到愉悅崇众。
注意點(diǎn):使用無(wú)邊框的按鈕眯漩。默認(rèn)情況下,所有的欄(bar)上的按鈕都是無(wú)邊框的芹扭。在內(nèi)容區(qū)域,通過(guò)文案、顏色以及操作指引標(biāo)題來(lái)表明該無(wú)邊框按鈕的可交互性赦抖。當(dāng)它被激活時(shí),按鈕可以顯示較窄的邊框或淺色背景作為操作響應(yīng)冯勉。
1.1.用深度層次來(lái)進(jìn)行交流
1.3D觸控:輕壓(Peek)、重壓(Pop),以及快捷操作(Quick Actions)能讓用戶(hù)在不離開(kāi)當(dāng)前界面的情景下預(yù)覽其他重要內(nèi)容摹芙。
2.半透明背景浮層:這樣文件夾就能清楚地把內(nèi)容和屏幕上其他內(nèi)容區(qū)分開(kāi)來(lái)灼狰。
3.備忘錄:用不同的層級(jí)來(lái)展示內(nèi)容條目。用戶(hù)在使用備忘錄里的某個(gè)條目時(shí),其他條目會(huì)被集中收起在屏幕下方浮禾。
4.日歷年月日的轉(zhuǎn)場(chǎng)動(dòng)畫(huà):給用戶(hù)一種層級(jí)的縱深感交胚。
二.IOS 應(yīng)用解析
常用的點(diǎn)按類(lèi)的控件大小:44x44
1.盡可能地盈电,避免讓用戶(hù)做過(guò)多地設(shè)置蝴簇。聚焦在80%目標(biāo)用戶(hù)的需求上。這樣絕大部分用戶(hù)就無(wú)需設(shè)置各種選項(xiàng),因?yàn)槟愕膽?yīng)用已經(jīng)默認(rèn)處于他們想要的狀態(tài)匆帚。如果有些功能僅有少部分用戶(hù)想要,或者是大部分用戶(hù)只需要使用一次,那就別管它了熬词。
2.盡可能用其他方式獲取更多的用戶(hù)信息。如果你能得到用戶(hù)在內(nèi)置應(yīng)用或硬件設(shè)置中提供的信息,直接從系統(tǒng)中獲取,不要讓用戶(hù)再次輸入吸重。
3.盡可能讓用戶(hù)晚一點(diǎn)再登錄互拾。最理想的狀態(tài)是,用戶(hù)在無(wú)需登錄的情況下就能盡量多地瀏覽內(nèi)容并使用部分功能。例如淘寶在購(gòu)買(mǎi)的時(shí)候才會(huì)要求登錄嚎幸。(如果你的應(yīng)用必須先登錄后使用,那么你應(yīng)該在登錄頁(yè)面有一些簡(jiǎn)短的文字,來(lái))描述為什么必須先登錄,以及這樣做會(huì)給用戶(hù)帶來(lái)什么好處颜矿。
4.謹(jǐn)慎使用新手引導(dǎo)。文字要少嫉晶,可以使用動(dòng)畫(huà)來(lái)描敘執(zhí)行一個(gè)簡(jiǎn)單的任務(wù)骑疆。盡可能避免展示應(yīng)用截圖,因?yàn)榻貓D不可交互的,用戶(hù)可能會(huì)混淆截圖和應(yīng)用的實(shí)際界面田篇。能夠讓用戶(hù)很容易地取消或者跳過(guò)新手引導(dǎo)。例如只看第一次箍铭。啟動(dòng)頁(yè)給個(gè)跳過(guò)的功能泊柬。
三.模態(tài)情境
模態(tài)是一個(gè)承載某些連貫操作或內(nèi)容的優(yōu)缺點(diǎn)并存的模式。它可以給用戶(hù)提供一種不脫離主任務(wù)的方式去完成一個(gè)任務(wù)或者獲得信息,但是也會(huì)臨時(shí)性的阻止用戶(hù)對(duì)應(yīng)用的其他部分進(jìn)行交互操作诈火。
以下情境可以考慮使用模態(tài):1.必須引起用戶(hù)關(guān)注的時(shí)候兽赁。2.一個(gè)獨(dú)立的任務(wù)需要完成或者很明確需要被放棄,為了避免在模棱兩可的狀態(tài)下遺漏用戶(hù)信息的時(shí)候。
四.交互性與反饋
1.在內(nèi)容區(qū)域,必要時(shí)可以給按鈕添加邊界或背景柄瑰。位于欄(Bar)、動(dòng)作列表(ActionSheet)和警告框(Alert)中的按鈕可以不需要邊界,因?yàn)橛脩?hù)知道在這種區(qū)域中大多數(shù)選項(xiàng)是可交互的剪况。但是在內(nèi)容區(qū)域,有必要使用邊界或背景將按鈕從其他內(nèi)容中區(qū)分出來(lái)教沾。
2.反饋有助于理解孙咪。盡可能將狀態(tài)或其他的反饋信息整合到UI中堪唐。用戶(hù)不進(jìn)行操作或不跳出當(dāng)前內(nèi)容就能獲得需要的信息是最好的。例如,郵箱將當(dāng)前的狀態(tài)顯示在不影響當(dāng)前內(nèi)容的工具上翎蹈。
3.避免顯示不必要的提醒對(duì)話(huà)框淮菠。對(duì)話(huà)框是很強(qiáng)的反饋機(jī)制,只有在傳遞非常重要,且可操作的信息時(shí)才需要使用它。
4.能選擇的就不要打字輸入荤堪。例如,使用選擇器或者表格代替純文本,因?yàn)榇蟛糠钟脩?hù)覺(jué)得從列表中進(jìn)行選擇要比打字容易的多合陵。
五.顏色與字體
在iOS系統(tǒng)中,顏色會(huì)用于表明交互,傳遞活性以及提供視覺(jué)連續(xù)性。內(nèi)置的應(yīng)用程序選擇使用那些看起來(lái)更具個(gè)性的澄阳、純粹拥知、干凈的顏色,并輔以或亮或暗的背景組合。
注意:1.考慮選擇一種基準(zhǔn)色顏色來(lái)表征交互性與狀態(tài)碎赢。(內(nèi)置的應(yīng)用里的基準(zhǔn)色包括比如備忘錄中的黃色,和日歷中的紅色等等低剔。)2.避免給可交互和不可交互的元素使用相同的顏色。色彩是表明UI元素交互屬性的方式之一肮塞。如果可交互和不可交互的元素使用相同的顏色,用戶(hù)將會(huì)難以判斷哪些區(qū)域是可點(diǎn)的襟齿。
六.應(yīng)用圖標(biāo)
1.應(yīng)用圖標(biāo)是整個(gè)應(yīng)用品牌的重要組成部分。將圖標(biāo)設(shè)計(jì)當(dāng)成一個(gè)講述應(yīng)用背后的故事,以及與用戶(hù)建立情感連接的機(jī)會(huì)枕赵。2.最好的應(yīng)用圖標(biāo)是獨(dú)特的,整潔的,打動(dòng)人心的,讓人印象深刻的蕊唐。
七.隱喻
1.移動(dòng)分層視圖來(lái)顯示被遮擋的內(nèi)容。 2.拖曳烁设、輕掃和滑動(dòng)游戲中的對(duì)象替梨。3.點(diǎn)擊開(kāi)關(guān),滑動(dòng)滑塊,轉(zhuǎn)動(dòng)選擇器钓试。4.輕掃來(lái)翻閱書(shū)本或雜志。
八.通知
橫幅(Banner)副瀑;警告框(Alert)弓熏;小氣泡(Badge);聲音(Sound)
其中:小氣泡(badge)是一個(gè)顯示未讀通知數(shù)量的紅色小圓(小氣泡顯示在應(yīng)用圖標(biāo)的右上角)糠睡。小氣泡的大小和顏色不能做修改挽鞠。
橫幅、警告框和小氣泡這三種通知都可以使用自定義或系統(tǒng)提供的聲音狈孔。