DAY 34

Material design 包含內(nèi)容豐富莫鸭,對動效這一塊有興趣吏祸,下個月打算學(xué)AE揭糕,研究動效竞端,這一篇會學(xué)習(xí) ios 10 用戶界面指南屎即。

iOS 10 人機界面指南 部分?

清晰(Clarity):縱觀整個系統(tǒng),任何尺寸的文字都清晰易讀,圖標(biāo)精確易懂技俐,恰當(dāng)且微妙的修飾乘陪,聚焦于功能,一切設(shè)計由功能而驅(qū)動雕擂。留白啡邑、顏色、字體井赌、圖形以及其它界面元素能夠巧妙地突出重點內(nèi)容并且表達(dá)可交互性谣拣。

遵從(Deference):流暢的動效和清爽美觀的界面有助于用戶理解內(nèi)容并與之交互,而不會干擾用戶族展。當(dāng)前內(nèi)容占據(jù)整屏?xí)r森缠,半透明和模糊處理能夠暗示其它更多的內(nèi)容。減少使用邊框仪缸、漸變和陰影讓界面盡可能地輕量化贵涵,從而突出內(nèi)容。

深度(Depth):清楚的視覺層和生動的動效表達(dá)了層次結(jié)構(gòu)恰画,賦予了活力宾茂,并有助于理解。

2.1 3D 觸摸(3D Touch)

3D Touch 為觸碰式交互增加了一個維度拴还。在支持3D Touch 的設(shè)備上跨晴,用戶通過對觸摸屏施加不同的力度來實現(xiàn)更多的功能,譬如觸發(fā)菜單片林、顯示更多的內(nèi)容或是播放動畫端盆。用戶無需學(xué)習(xí)新的手勢來使用3D Touch。當(dāng)他們輕壓屏幕并且獲得應(yīng)答的時候就能立即發(fā)現(xiàn)這一新的交互維度费封。

2.1.1 主屏幕交互(Home Screen Interaction)

在支持3D Touch的設(shè)備的主屏按壓應(yīng)用圖標(biāo)會觸發(fā)相應(yīng)的操作視圖焕妙。該視圖讓你能夠快速地執(zhí)行常用的應(yīng)用任務(wù)和預(yù)覽有趣的信息,譬如日歷應(yīng)用弓摘,它能夠提供創(chuàng)建新事件的快捷操作焚鹊,同時顯示日程表上的下一個事件。

2.1.2 輕壓(Peek)和重壓(Pop)

輕壓允許用戶使用3D Touch在當(dāng)前環(huán)境上預(yù)覽一個臨時視圖內(nèi)的對象韧献,譬如一個頁面末患、鏈接或者文件。要想在支持該功能的設(shè)備上實現(xiàn)預(yù)覽锤窑,只需用手指對應(yīng)用施加一點壓力璧针,而抬起手指就能退出預(yù)覽。要想打開對象來瀏覽更多的內(nèi)容果复,請更重地按壓屏幕直到對象放大到填滿屏幕陈莽。在一些輕壓視圖上渤昌,你可以通過上滑來顯示相應(yīng)的操作按鈕虽抄。譬如走搁,在Safari打開了某個鏈接的輕壓視圖時,你可以通過上滑展開相應(yīng)的操作按鈕——打開鏈接迈窟,添加至閱讀列表和復(fù)制鏈接私植。


不要讓同一項具備輕壓和編輯菜單(Edit menu)兩個功能。當(dāng)一個項目同時啟用兩個功能時车酣,不但會讓用戶感到困惑曲稼,也會讓系統(tǒng)難以判斷用戶目的。

適當(dāng)時提供操作按鈕湖员。不是每個一輕壓都需要操作按鈕贫悄,但這是一個為常用任務(wù)提供快捷操作的好方式。如果你的應(yīng)用已經(jīng)為項目提供了自定義的點擊并長按(touch-and-hold)動作娘摔,那么最好在輕壓里包含同樣的操作窄坦。

避免為打開被輕壓的項目提供操作按鈕。用戶一般都通過更重的按壓來打開他們輕壓的項目凳寺。所以鸭津,沒有必要再提供一個明顯的打開按鈕。

不要讓輕壓成為唯一的執(zhí)行項目操作的操作肠缨。并不是所有設(shè)備都支持輕壓和重壓逆趋,甚至有的用戶會關(guān)閉3D觸摸功能。你的應(yīng)用為這些情況考慮其它觸發(fā)項目操作的方式晒奕。譬如闻书,你的應(yīng)用可以將輕壓的快捷操作映射到一個視圖中,該視圖會在點擊和長按時出現(xiàn)脑慧。

2.6 反饋(Feedback)

反饋讓用戶知道應(yīng)用現(xiàn)在在做什么惠窄,發(fā)現(xiàn)下一步他們應(yīng)該做什么,并且理解操作的結(jié)果漾橙。

悄悄地在你的界面中加入狀態(tài)或其它類型的反饋杆融。理想中,用戶能夠在不采取任何操作或是被打擾的情況下得到重要的信息霜运。比如脾歇,當(dāng)用戶在郵件應(yīng)用中查看郵時,狀態(tài)信息被巧妙顯示在工具欄上淘捡。這個信息不會和屏幕上的主要內(nèi)容搶風(fēng)頭藕各,但是用戶在任何時候快速一瞥就能查看。

避免不必要的警告焦除。警告是一種有威力的反饋機制激况,所以它應(yīng)該只被用于傳遞重要的并且最好是需要操作的信息。如果用戶看到太多包含無關(guān)緊要信息的警告框,他們很快就會學(xué)會忽略之后的警告乌逐。了解更多幫助竭讳,請參閱Alerts

2.7 文件處理(File Handling)

用戶在創(chuàng)建浙踢、查看和操作文件時無需思考文件系統(tǒng)绢慢。如果你的應(yīng)用需要運行文件時,盡可能地淡化文件處理洛波。

讓用戶相信除非主動取消或刪除胰舆,文件會隨時被保存。總而言之蹬挤,不要讓用戶去即時保存文件缚窿。反之,在文件被打開焰扳、關(guān)閉滨攻,或是跳轉(zhuǎn)至其它應(yīng)用時,應(yīng)該自動定時地替用戶保存文件蓝翰。但在某些情況光绕,比如正在編輯一個已被創(chuàng)建的文件時,保存和取消的選項也是有意義的畜份,因為它們幫助確認(rèn)何時編輯的內(nèi)容應(yīng)該被保存诞帐。

不要提供創(chuàng)建本地文件的選項。用戶總是希望他們?nèi)康奈募寄茉谌魏卧O(shè)備上讀取爆雹。如果可能停蕉,你的應(yīng)用應(yīng)該支持文件云儲存,比如通過與iCloud類似的服務(wù)钙态。

設(shè)計一個直觀并且圖像化的文件瀏覽界面慧起。理想情況下,使用用戶熟悉的系統(tǒng)文檔選擇器來瀏覽文件册倒。如果你想設(shè)計一個自定義的文件瀏覽器蚓挤,請確保它是直觀且高效的。最好的文件瀏覽器應(yīng)該是高度圖像化的驻子,提供了文檔的視覺再現(xiàn)灿意。要想加快導(dǎo)航速度,減少手勢的使用崇呵,并且考慮提供一個添加新文件的按鈕缤剧,這樣用戶就無需再到其它地方去創(chuàng)建新文檔。

讓用戶在你的應(yīng)用內(nèi)就能預(yù)覽文件域慷。

2.9 手勢(Gestures)

用戶通過在觸摸屏上使用手勢來與iOS設(shè)備交互荒辕。這些手勢表現(xiàn)了一種親密的人與內(nèi)容之間的聯(lián)系汗销,并且加強了對屏幕上對象直接的操作感。用戶普遍地希望一下的標(biāo)準(zhǔn)手勢能夠在操作系統(tǒng)和每一個應(yīng)用內(nèi)保持一致抵窒。

輕擊(Tap):激活一個控件或者選擇一個對象弛针。

拖曳(Drag):讓一個元素從一邊移動到另一邊,或者在屏幕內(nèi)拖動元素估脆。

滑動(Flick):快速滾動或是平移

輕掃(Swipe):單指以返回上一頁,呼出分屏視圖控制器(split view controller)中的隱藏視圖座云,滑出列表行中的刪除按鈕疙赠,或在輕壓中呼出操作列表。在iPad中四指操作用來在應(yīng)用間切換朦拖。

雙擊(Double tap):放大并居中內(nèi)容或圖片圃阳,或者縮小已放大過的。

捏合(Pinch):向外張開時放大璧帝,向內(nèi)捏合時縮小捍岳。

長按(Touch and hold):在可編輯或者可選文本中操作,顯示放大視圖用以光標(biāo)定位睬隶。在某些與集合視圖類似的視圖中操作锣夹,進(jìn)入對象可編輯的狀態(tài)。

搖晃(Shake):撤銷或重做

2.10 加載(Loading)

當(dāng)內(nèi)容在加載時苏潜,一片空白靜止的屏幕好像應(yīng)用被凍住了银萍,讓人感到困惑和失望,而且很可能讓用戶離開你的應(yīng)用恤左。

明確加載的狀態(tài)贴唇。至少,展示一個活動旋轉(zhuǎn)器(activity spinner)來表明有任務(wù)在進(jìn)行中飞袋。更勝一籌的是戳气,顯示明確的進(jìn)度,這樣用戶就能知道他們還需等待多久巧鸭。

通過教育或娛樂用戶來填充加載的時間瓶您。嘗試展示游戲訣竅、令人愉悅的視頻序列或者有趣的占位圖纲仍。

自定義加載畫面览闰。盡管標(biāo)準(zhǔn)的活動指示器還不錯,但他們有時會感覺是脫離上下文環(huán)境的巷折。嘗試設(shè)計符合你的應(yīng)用或游戲的自定義動畫和元素压鉴,以實現(xiàn)一個更沉浸式的體驗。

盡快顯示內(nèi)容锻拘。不要讓用戶在看到屏幕畫面前去等待內(nèi)容的加載油吭。立馬顯示屏幕畫面击蹲,然后通過占位符、圖片或者動畫明確告知用戶哪個范圍的內(nèi)容還未顯示婉宰。當(dāng)內(nèi)容加載成功之后再把占位元素替代掉歌豺。可能時心包,比如當(dāng)動畫在播放時或是用戶在某個層級或菜單導(dǎo)航時类咧,在后臺預(yù)加載接下來要出現(xiàn)的內(nèi)容。

分層導(dǎo)航:在每屏都做一次選擇蟹腾,直到你到達(dá)目標(biāo)位置痕惋。要想到達(dá)另外的目標(biāo)位置,你必須原路返回一些層級或是從頭開始重新選擇娃殖。原生應(yīng)用設(shè)置(Settings)和郵件(Mail)就是采用這種導(dǎo)航結(jié)構(gòu)值戳。

扁平導(dǎo)航:在不同的內(nèi)容類別間切換。原生應(yīng)用音樂(Music)和App Store就是采用這種導(dǎo)航結(jié)構(gòu)炉爆。

內(nèi)容驅(qū)動或是體驗驅(qū)動式導(dǎo)航:在內(nèi)容中自由地轉(zhuǎn)換堕虹,或是內(nèi)容定義導(dǎo)航。游戲芬首、閱讀以及其它沉浸式應(yīng)用一般都采用這種導(dǎo)航結(jié)構(gòu)赴捞。

有的應(yīng)用結(jié)合了多種導(dǎo)航形式。比如郁稍,采用了扁平導(dǎo)航的應(yīng)用也可能在每個類別之內(nèi)使用層級導(dǎo)航螟炫。

總是提供清晰的路徑。用戶應(yīng)該一直知道他在應(yīng)用的什么位置以及如何去往下一個目標(biāo)位置艺晴。除了要有清楚的導(dǎo)航形式昼钻,還應(yīng)該確保對象間的路徑是合理的、符合預(yù)期的并且容追溯的封寞。一般來說然评,為用戶提供到達(dá)某一屏的唯一路徑。如果他們需要在非常多的情景下看到某一屏幕的內(nèi)容狈究,那么考慮采用操作列表碗淌、警告框、浮出層或是模態(tài)視圖的形式展示這些內(nèi)容抖锥。

設(shè)計一個能夠快速簡單地訪問內(nèi)容的信息結(jié)構(gòu)亿眠。合理地組織你的信息結(jié)構(gòu),保證它只用最少次數(shù)的點擊磅废、橫掃和屏幕間跳轉(zhuǎn)就能訪問相應(yīng)的內(nèi)容纳像。

使用觸摸手勢來制造流暢感。讓用戶能輕松地在界面內(nèi)跳轉(zhuǎn)拯勉,而感受不到阻力竟趾。比如憔购,你可以讓用戶在屏幕邊界右滑,而返回到上一屏岔帽。

使用標(biāo)準(zhǔn)的導(dǎo)航組件玫鸟。可能時,使用標(biāo)準(zhǔn)的導(dǎo)航控件比如頁面控件犀勒、標(biāo)簽欄屎飘、分段控件、表格視圖贾费、集合視圖和拆分視圖钦购。用戶已經(jīng)熟悉了這些控件,他們很自然地就知道如何玩轉(zhuǎn)你的應(yīng)用铸本。

使用導(dǎo)航欄訪問分層內(nèi)容肮雨。導(dǎo)航欄內(nèi)的標(biāo)題欄能夠說明當(dāng)前的層級位置遵堵,使用返回按鈕能夠輕易地回到上一個位置箱玷。

使用標(biāo)簽欄來展示內(nèi)容或功能相似的類別。標(biāo)簽欄讓用戶能夠快速簡單地在類別中切換自如陌宿,而不受當(dāng)前位置的限制锡足。

使用多頁面展示同類型的內(nèi)容時請使用頁面控件。頁面控件能夠清楚地表示總頁數(shù)壳坪,以及當(dāng)前頁的位置舶得。天氣(Weather)應(yīng)用就使用了頁面控件來表示不同地理位置的天氣頁面。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末爽蝴,一起剝皮案震驚了整個濱河市沐批,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蝎亚,老刑警劉巖九孩,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異发框,居然都是意外死亡躺彬,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門梅惯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來宪拥,“玉大人,你說我怎么就攤上這事铣减∷” “怎么了?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵葫哗,是天一觀的道長犁河。 經(jīng)常有香客問我鳖枕,道長,這世上最難降的妖魔是什么桨螺? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任宾符,我火速辦了婚禮,結(jié)果婚禮上灭翔,老公的妹妹穿的比我還像新娘魏烫。我一直安慰自己,他們只是感情好肝箱,可當(dāng)我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布哄褒。 她就那樣靜靜地躺著,像睡著了一般煌张。 火紅的嫁衣襯著肌膚如雪呐赡。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天骏融,我揣著相機與錄音链嘀,去河邊找鬼。 笑死档玻,一個胖子當(dāng)著我的面吹牛怀泊,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播误趴,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼霹琼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了凉当?” 一聲冷哼從身側(cè)響起枣申,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎看杭,沒想到半個月后忠藤,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡泊窘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年熄驼,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片烘豹。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡瓜贾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出携悯,到底是詐尸還是另有隱情祭芦,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布憔鬼,位于F島的核電站龟劲,受9級特大地震影響胃夏,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜昌跌,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一仰禀、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蚕愤,春花似錦答恶、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至裕坊,卻和暖如春包竹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背籍凝。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工周瞎, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人静浴。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓堰氓,卻偏偏與公主長得像挤渐,于是被迫代替她去往敵國和親苹享。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,543評論 2 349