讀IOS9

?一.三大原則: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ò)程中感到愉悅崇众。


(ios10則修改為:內(nèi)容掂僵、留白、色彩顷歌、字體锰蓬、界面元素,如圖)

注意點(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)教沾。

例如:1.在照片管理中按鈕加了邊框,達(dá)到從其它解釋性文本中區(qū)分開(kāi)來(lái)译断。2.時(shí)鐘在秒表和計(jì)時(shí)頁(yè)面中給按鈕增加背景來(lái)強(qiáng)調(diào)開(kāi)始和暫停按鈕,并且使按鈕在易分散注意力的內(nèi)容中更容易點(diǎn)擊授翻。3.應(yīng)用商店中使用有邊界的按鈕,將按鈕和整個(gè)內(nèi)容條區(qū)分開(kāi)來(lái),點(diǎn)擊整條內(nèi)容查看詳細(xì)信息,點(diǎn)擊按鈕進(jìn)行下載安裝。

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)提供的聲音狈孔。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末信认,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子均抽,更是在濱河造成了極大的恐慌嫁赏,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,718評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件油挥,死亡現(xiàn)場(chǎng)離奇詭異潦蝇,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)深寥,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)攘乒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人惋鹅,你說(shuō)我怎么就攤上這事则酝。” “怎么了闰集?”我有些...
    開(kāi)封第一講書(shū)人閱讀 158,207評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵堤魁,是天一觀(guān)的道長(zhǎng)。 經(jīng)常有香客問(wèn)我返十,道長(zhǎng)妥泉,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,755評(píng)論 1 284
  • 正文 為了忘掉前任洞坑,我火速辦了婚禮盲链,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘迟杂。我一直安慰自己刽沾,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,862評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布排拷。 她就那樣靜靜地躺著侧漓,像睡著了一般。 火紅的嫁衣襯著肌膚如雪监氢。 梳的紋絲不亂的頭發(fā)上布蔗,一...
    開(kāi)封第一講書(shū)人閱讀 50,050評(píng)論 1 291
  • 那天藤违,我揣著相機(jī)與錄音,去河邊找鬼纵揍。 笑死顿乒,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的泽谨。 我是一名探鬼主播璧榄,決...
    沈念sama閱讀 39,136評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼吧雹!你這毒婦竟也來(lái)了骨杂?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,882評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤雄卷,失蹤者是張志新(化名)和其女友劉穎搓蚪,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體龙亲,經(jīng)...
    沈念sama閱讀 44,330評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡陕凹,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,651評(píng)論 2 327
  • 正文 我和宋清朗相戀三年悍抑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了鳄炉。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,789評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡搜骡,死狀恐怖拂盯,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情记靡,我是刑警寧澤谈竿,帶...
    沈念sama閱讀 34,477評(píng)論 4 333
  • 正文 年R本政府宣布,位于F島的核電站摸吠,受9級(jí)特大地震影響空凸,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜寸痢,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,135評(píng)論 3 317
  • 文/蒙蒙 一呀洲、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧啼止,春花似錦道逗、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,864評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至巩那,卻和暖如春吏夯,著一層夾襖步出監(jiān)牢的瞬間此蜈,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,099評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工锦亦, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留舶替,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,598評(píng)論 2 362
  • 正文 我出身青樓杠园,卻偏偏與公主長(zhǎng)得像顾瞪,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子抛蚁,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,697評(píng)論 2 351

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,860評(píng)論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)陈醒、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,066評(píng)論 4 62
  • 你給別人的一切瞧甩,都會(huì)回到你身上钉跷! 不論你傷害誰(shuí),就長(zhǎng)遠(yuǎn)來(lái)看肚逸,你都是傷害到你自己爷辙,或許你現(xiàn)在并沒(méi)有覺(jué)知,但它一定會(huì)繞...
    毅自由閱讀 487評(píng)論 0 3
  • 在windows上使用dockerfile-maven-plugin的時(shí)候需要注意一個(gè)巨大的坑朦促。
    ce18f88f876b閱讀 1,508評(píng)論 1 0
  • 第一項(xiàng)作業(yè): 請(qǐng)用20句話(huà)概括你的三觀(guān)膝晾,或者說(shuō)你用于指導(dǎo)自己行為的規(guī)范。 參考:富蘭克林的13條修養(yǎng)要?jiǎng)t 和 曾國(guó)...
    聞舒閱讀 242評(píng)論 2 1