閱讀底層庫(kù)本篇文章介紹 ios開(kāi)發(fā)，利用4種UI元素告訴你逊彭，怎樣實(shí)現(xiàn)優(yōu)化建議及可用性問(wèn)題咸灿，在給大家分享這個(gè)操作之前，小編推薦大家加一下這個(gè)群:680565220侮叮！大家遇到啥問(wèn)題都會(huì)在里面交流避矢！而且免費(fèi)分享十年開(kāi)發(fā)經(jīng)驗(yàn)牛人經(jīng)驗(yàn)分享課一整套！是個(gè)非常好的學(xué)習(xí)交流地方囊榜！也有程序員大神給大家熱心解答各種問(wèn)題审胸！很快滿(mǎn)員了。欲進(jìn)從速哦卸勺！等大家加入學(xué)習(xí)交流基地哦關(guān)于ios順序而言
那些大的軟件公司砂沛，譬如Apple、微軟孔庭、Google等等尺上，通常會(huì)為第三方app設(shè)計(jì)師們提供一系列設(shè)計(jì)指南。這樣做的目的在于：
一方面圆到，設(shè)計(jì)師和開(kāi)發(fā)者可以比較輕松的上手打造在質(zhì)量方面至少符合“基礎(chǔ)標(biāo)準(zhǔn)”的產(chǎn)品怎抛，而無(wú)需重新思考和驗(yàn)證全新的設(shè)計(jì)模式及UI元素。
另一方面芽淡，如果某一平臺(tái)當(dāng)中的所有產(chǎn)品都遵從統(tǒng)一的設(shè)計(jì)規(guī)則马绝，那么用戶(hù)也將受益于界面外觀與互動(dòng)方式的一致性。
遵守設(shè)計(jì)指南挣菲，這幾乎是一條鐵打的規(guī)矩富稻。但是在實(shí)際當(dāng)中掷邦，“官方標(biāo)準(zhǔn)”未必能很好的適用于各種情況。我們不清楚為什么有些元素會(huì)出現(xiàn)在設(shè)計(jì)指南當(dāng)中椭赋，也許是因?yàn)楣俜剿龅臏y(cè)試不夠徹底抚岗，或者說(shuō)這些元素和模式是用來(lái)解決某一類(lèi)設(shè)計(jì)問(wèn)題的最基礎(chǔ)最具適用性的解決方案。
本文當(dāng)中提到的4種UI元素都是Apple慣于在自家app中使用的哪怔，其中的一些也出現(xiàn)在了官方的設(shè)計(jì)規(guī)范當(dāng)中宣蔚；自然，不計(jì)其數(shù)的設(shè)計(jì)師也會(huì)跟從這些用法认境。而另一方面胚委，我們(Nielsen Norman Group)在一次又一次的可用性測(cè)試當(dāng)中也真真實(shí)實(shí)的發(fā)現(xiàn)了這些元素所導(dǎo)致的可用性問(wèn)題。
說(shuō)不定Apple的諸神會(huì)用雷劈我們叉信，但我們?nèi)匀唤ㄗh各位設(shè)計(jì)師在使用這些UI元素時(shí)多加考慮亩冬，或嘗試優(yōu)化/替代方案，因?yàn)檫@些元素在可用性測(cè)試當(dāng)中的表現(xiàn)確實(shí)存在問(wèn)題：
頁(yè)碼指示符(小圓點(diǎn))
導(dǎo)航欄里的完成按鈕
加號(hào)(+)圖標(biāo)
拖拽圖標(biāo)
1.頁(yè)碼指示符(小圓點(diǎn))
iOS的頁(yè)碼指示符硼身，在形式上就是橫排的圓點(diǎn)硅急，用來(lái)表示一系列可以通過(guò)橫滑瀏覽的分頁(yè)視圖。其中鸠姨，代表當(dāng)前視圖的圓點(diǎn)處于高亮狀態(tài)铜秆，其他的則是灰暗的半透明狀態(tài)。
iOS系統(tǒng)首屏讶迁，頁(yè)碼指示符用來(lái)表示頁(yè)面總數(shù)以及當(dāng)前所在位置连茧。我們時(shí)常見(jiàn)到這種通過(guò)系統(tǒng)首屏來(lái)演示頁(yè)碼指示符使用方式的范例，實(shí)際上巍糯，頁(yè)碼指示符能完美適用的界面環(huán)境并不多啸驯，而系統(tǒng)首屏正是其中之一，因?yàn)橛脩?hù)明確的知道自己的手機(jī)里裝有很多app以至于第一屏無(wú)法完整呈現(xiàn)祟峦，需要通過(guò)橫向滑動(dòng)查看更多罚斗。
很多app或網(wǎng)頁(yè)都會(huì)使用這種元素來(lái)暗示用戶(hù)可以通過(guò)橫向滑動(dòng)來(lái)查看同級(jí)的其他頁(yè)面，也有一些是將其用在界面中特定的區(qū)域來(lái)暗示其中存在更多內(nèi)容宅楞。不能否認(rèn)针姿，這種形式的頁(yè)碼指示符在app和移動(dòng)Web的界面設(shè)計(jì)當(dāng)中都很流行，但是要知道厌衙，它同時(shí)也是用戶(hù)最容易忽略掉的界面元素之一距淫。在我們所做的一系列可用性測(cè)試當(dāng)中，用戶(hù)經(jīng)常難以發(fā)現(xiàn)這些在尺寸上過(guò)于微小的圓點(diǎn)婶希，進(jìn)而錯(cuò)失了那些可以通過(guò)橫滑來(lái)查看到的內(nèi)容或功能入口榕暇。所以，我們認(rèn)為圓點(diǎn)形式的頁(yè)碼指示符至少不能被用作關(guān)鍵功能和內(nèi)容的唯一導(dǎo)航方式。
雖然iOS允許你將這些圓點(diǎn)渲染成其他顏色彤枢，但想要使如此微小的元素一目了然的突顯在界面當(dāng)中還是非常困難的狰晚，除非你能確保將其置于高對(duì)比度的純色背景上。很多產(chǎn)品會(huì)將圓點(diǎn)們放置在五顏六色的banner圖上缴啡，使這些本就難以被留意到元素不知不覺(jué)的融入到背景當(dāng)中壁晒，進(jìn)一步降低了可發(fā)現(xiàn)性。如果一定要這樣做盟猖，那么必須確保圓點(diǎn)和背景色之間始終具有較高的對(duì)比度讨衣，最好是使用純色背景。
iOS的Zappos式镐，在第一張底圖上，頁(yè)碼指示符已經(jīng)很弱了固蚤，而在右側(cè)第二張底圖上娘汞，幾乎完全消失了。
有一部分產(chǎn)品則在iOS的基礎(chǔ)上進(jìn)一步自由發(fā)揮夕玩，將圓點(diǎn)改為方形或其他形狀你弦，布局上也更加隨意。不妨設(shè)想燎孟，即便用戶(hù)已經(jīng)習(xí)慣了iOS的小圓點(diǎn)模式禽作，現(xiàn)在他們就算發(fā)現(xiàn)了界面中的這些小元素，還要猜想這些方塊會(huì)不會(huì)就是代表著以前的那些小圓點(diǎn) – 可發(fā)現(xiàn)性沒(méi)有顯著提升揩页，同時(shí)還造成了認(rèn)知上的困難旷偿。如果要使用頁(yè)碼指示符，盡可能使用用戶(hù)已經(jīng)熟悉的圓點(diǎn)模式爆侣，并將其居中的置于對(duì)應(yīng)內(nèi)容的下方萍程。
Android中的Fab，借鑒了iOS模式的小圓點(diǎn)兔仰，但將其置于了內(nèi)容的右側(cè)茫负，相比于居中的位置，更難被發(fā)現(xiàn)乎赴。
即便用戶(hù)能夠注意到頁(yè)碼指示符忍法，這里還有一些潛在問(wèn)題，譬如小圓點(diǎn)們可以讓用戶(hù)知道有多少同類(lèi)型的信息視圖以及當(dāng)前所處位置榕吼，但無(wú)法提供任何與內(nèi)容本身相關(guān)的信息饿序。此外，用戶(hù)對(duì)互動(dòng)的控制權(quán)也非常弱友题，必須按照次序逐一瀏覽嗤堰，無(wú)法直接跳轉(zhuǎn)。所以，如果在你的需求當(dāng)中這些體驗(yàn)要素比較重要踢匣，那么小圓點(diǎn)恐怕不是你的最佳選擇告匠。
鑒于小圓點(diǎn)頁(yè)碼指示符所存在的一些可用性問(wèn)題，我們建議：
首先考慮你的內(nèi)容是否適宜通過(guò)橫滑的方式依次瀏覽离唬，還是可以通過(guò)更復(fù)雜同時(shí)也更靈活的其他導(dǎo)航方式進(jìn)行架構(gòu)后专。
對(duì)于橫滑瀏覽的內(nèi)容，盡量采用右邊緣露出一部分內(nèi)容的方式來(lái)加強(qiáng)對(duì)于“更多”的暗示输莺，而不要單純依靠頁(yè)碼指示符戚哎。
2.導(dǎo)航欄里的完成按鈕
iOS中很多代表“完成”操作的按鈕時(shí)常被置于導(dǎo)航欄當(dāng)中右側(cè)的位置，包括表單界面的提交按鈕也是如此嫂用。如今這種模式也開(kāi)始潛移默化的影響到一些Android平臺(tái)里的app型凳。
根據(jù)我們的可用性測(cè)試所得出的結(jié)論，不說(shuō)跨平臺(tái)的影響力嘱函，單就iOS本身甘畅，我們也不建議將“完成”性質(zhì)的按鈕放在這里，原因很簡(jiǎn)單往弓，將最終操作放置在界面頂部疏唾，有悖于自上而下的信息流向。用戶(hù)在填寫(xiě)表單或編輯內(nèi)容時(shí)函似，交互行為通常是由上至下的槐脏，當(dāng)他們即將完成的時(shí)候，也會(huì)預(yù)期在結(jié)尾處看到結(jié)束處理的操作撇寞。多數(shù)情況下顿天，當(dāng)人們無(wú)法在結(jié)尾處找到這樣的功能時(shí)，便會(huì)產(chǎn)生迷惑并開(kāi)始四處尋找重抖。
在下面的案例當(dāng)中(左側(cè)是Pinkberry露氮，右側(cè)是Nordstorm)，用戶(hù)填寫(xiě)完表單之后需要點(diǎn)擊登錄或下單按鈕钟沛。這樣的布局就是我們所說(shuō)的有悖于自上而下信息流向的形式畔规，用戶(hù)的全部注意力都隨著表單而逐漸下移，最終發(fā)現(xiàn)在結(jié)尾的地方?jīng)]有任何完成操作恨统，剩下的就是茫然無(wú)措叁扫。要知道，即使是在手機(jī)這樣的小屏設(shè)備上畜埋，四處尋找某種UI元素也是需要耗費(fèi)很多額外的注意力成本的莫绣；將完成按鈕直接放置在內(nèi)容底部是最符合直覺(jué)的做法。
當(dāng)然悠鞍，從另外一個(gè)方面講对室，將完成按鈕置于導(dǎo)航欄當(dāng)中的模式也有其自身的優(yōu)勢(shì)：因?yàn)閷?dǎo)航欄是固定在頂部的，所以用戶(hù)在編輯內(nèi)容時(shí)可以隨時(shí)點(diǎn)擊到，而且當(dāng)內(nèi)容區(qū)域較長(zhǎng)時(shí)掩宜，放置在頂部的按鈕也不會(huì)被鍵盤(pán)所遮擋蔫骂。如果用戶(hù)確實(shí)無(wú)需完成全部?jī)?nèi)容的填寫(xiě)便可以進(jìn)行完成操作，那么你可以考慮將完成按鈕固定在底部牺汤，并會(huì)隨著鍵盤(pán)的起落而相應(yīng)的移動(dòng)辽旋。這種方式的缺點(diǎn)是會(huì)占用一定的縱向空間，但優(yōu)點(diǎn)也是很明顯的：即符合直覺(jué)檐迟，又隨時(shí)保持可見(jiàn)补胚，同時(shí)相比于頂部右端的位置來(lái)說(shuō)，更易單手點(diǎn)擊操作追迟。
鑒于導(dǎo)航欄里的完成按鈕所存在的一些可用性問(wèn)題溶其，我們建議：將按鈕置于內(nèi)容底部；如果內(nèi)容較長(zhǎng)敦间，可以嘗試將按鈕位置固定握联，并使其不會(huì)被鍵盤(pán)遮擋，以便用戶(hù)可以隨時(shí)點(diǎn)擊每瞒。
3.加號(hào)(+)圖標(biāo)
見(jiàn)過(guò)的app越多，你越會(huì)發(fā)現(xiàn)纯露，在不同的環(huán)境當(dāng)中剿骨，加號(hào)圖標(biāo)往往會(huì)代表各種不同的功能。當(dāng)加號(hào)位于導(dǎo)航欄當(dāng)中時(shí)埠褪，通常表示“新建”功能浓利；如果被放在列表單元當(dāng)中，要么是表示將這條內(nèi)容添加到某種分組當(dāng)中钞速，要么是用來(lái)展開(kāi)詳情贷掖。無(wú)論是在同一個(gè)app的不同界面，還是在不同的app之間渴语，同一元素承載著不同的功能含義苹威，這對(duì)于用戶(hù)的認(rèn)知與記憶都是一種負(fù)擔(dān)。
加號(hào)圖標(biāo)的可用性在很大程度上取決于它在界面當(dāng)中所處的位置驾凶。當(dāng)位于導(dǎo)航欄時(shí)牙甫，加號(hào)通常能夠表達(dá)準(zhǔn)確的含義，即創(chuàng)建一條與主要內(nèi)容相同性質(zhì)的新內(nèi)容调违。然而窟哺，當(dāng)加號(hào)出現(xiàn)在主要內(nèi)容當(dāng)中時(shí)，多種含義的可能就會(huì)給用戶(hù)帶來(lái)迷惑技肩。
舉個(gè)例子且轨，Any.do曾經(jīng)的一個(gè)版本當(dāng)中，會(huì)在待辦事項(xiàng)分組標(biāo)題右側(cè)放置加號(hào)圖標(biāo)。在這個(gè)環(huán)境下旋奢，你不知道點(diǎn)擊這個(gè)圖標(biāo)是會(huì)展開(kāi)其中的全部事項(xiàng)泳挥，還是會(huì)在這個(gè)分組中創(chuàng)建新事項(xiàng)。在最近的一個(gè)版本中黄绩，他們將加號(hào)放在了界面右上角羡洁，明確的用于創(chuàng)建新事項(xiàng)。
無(wú)論是Web還是移動(dòng)app爽丹，位于界面內(nèi)容當(dāng)中的加號(hào)圖標(biāo)通常用來(lái)表示該內(nèi)容可以擴(kuò)展查看更多信息筑煮，有時(shí)還會(huì)搭配箭頭圖標(biāo)同時(shí)使用。通過(guò)加號(hào)來(lái)觸發(fā)其他類(lèi)型的功能很可能破壞用戶(hù)所習(xí)慣的預(yù)期粤蝎。例如真仲，在LinkedIn的app當(dāng)中，取決于所在位置的不同初澎，嵌套在圓環(huán)當(dāng)中的加號(hào)圖標(biāo)代表著關(guān)注或是加入某小組的功能秸应。在我們的可用性測(cè)試當(dāng)中，很多用戶(hù)抱著查看詳情的預(yù)期去點(diǎn)擊該按鈕碑宴，卻發(fā)現(xiàn)自己關(guān)注了對(duì)方動(dòng)態(tài)软啼，進(jìn)而感到莫名其妙。
取決于產(chǎn)品類(lèi)型及目標(biāo)用戶(hù)行為習(xí)慣的不同延柠，你的app當(dāng)中的加號(hào)圖標(biāo)可能最適于表達(dá)某個(gè)特定的功能含義祸挪。無(wú)論怎樣，要盡量避免在app當(dāng)中隨處使用贞间，因?yàn)槿Q于所處位置的不同贿条，用戶(hù)確實(shí)很容易將其理解為不同的含義，或是抱著一直以來(lái)習(xí)慣的認(rèn)知進(jìn)行操作而導(dǎo)致與預(yù)期不符的結(jié)果增热。
鑒于加號(hào)圖標(biāo)所存在的一些可用性問(wèn)題整以，我們建議：
導(dǎo)航欄是一個(gè)相對(duì)安全的位置，而在其他位置使用加號(hào)按鈕則需通過(guò)可用性測(cè)試來(lái)確保用戶(hù)能正確的理解你想表達(dá)的功能含義峻仇。
要徹底避免加號(hào)圖標(biāo)帶來(lái)的潛在問(wèn)題公黑，不妨徹底避免使用它，取而代之的础浮，通過(guò)箭頭來(lái)代表詳情擴(kuò)展帆调，通過(guò)簡(jiǎn)單明確的文字按鈕來(lái)清晰準(zhǔn)確的傳達(dá)其他功能含義。
4.拖拽圖標(biāo)
和移動(dòng)設(shè)備上的很多其他圖標(biāo)一樣豆同，拖拽圖標(biāo)也并不能很直觀的體現(xiàn)出背后的含義番刊。我們發(fā)現(xiàn)很多用戶(hù)其實(shí)并不明白這個(gè)圖標(biāo)代表著所在元素是可以被拖拽移動(dòng)的，而且縱向排列的三條橫線也很容易讓人誤以為是某種菜單圖標(biāo)影锈。實(shí)際上芹务，這種形象隱喻的是可拖拽物體上的防滑條紋蝉绷，好像你把手指放在上面就可以拖動(dòng)整個(gè)對(duì)象而不至于打滑。通常枣抱，用戶(hù)需要長(zhǎng)按這個(gè)圖標(biāo)熔吗，使對(duì)象整體進(jìn)入某種激活狀態(tài)，然后拖拽到合適的位置佳晶。
在可用性測(cè)試當(dāng)中桅狠，我們發(fā)現(xiàn)，用戶(hù)更傾向于點(diǎn)按對(duì)象本身進(jìn)行拖拽轿秧，而不是去按住一個(gè)含義模棱兩可的小圖標(biāo)中跌。相比于列表單元這樣的對(duì)象，圖標(biāo)在尺寸上太小了菇篡，如果要求用戶(hù)必須通過(guò)按住它來(lái)拖動(dòng)整個(gè)單元漩符，那么交互成本的增加就是必然的。此外驱还，用戶(hù)也會(huì)認(rèn)為一個(gè)單元整體只會(huì)觸發(fā)一種行為嗜暴，也就是無(wú)論拖拽小圖標(biāo)還是單元本身，都可以使其被拖動(dòng)议蟆。
Yahoo! Finace使用了標(biāo)準(zhǔn)的iOS拖拽圖標(biāo)闷沥，用戶(hù)長(zhǎng)按該圖標(biāo)可以使單元進(jìn)入可拖動(dòng)狀態(tài)。雖然列表單元本身是目標(biāo)更大咐容、更易操作狐赡、更符合直覺(jué)的對(duì)象，但用戶(hù)卻無(wú)法通過(guò)長(zhǎng)按單元本身來(lái)達(dá)到觸發(fā)拖拽的目標(biāo)疟丙。
此外，我們還是要強(qiáng)調(diào)一下拖拽圖標(biāo)與我們所熟悉的漢堡包菜單圖標(biāo)真的過(guò)于相似了：
外形相同或過(guò)于相似的對(duì)象鸟雏，所觸發(fā)的事件是截然不同的享郊，這種情況會(huì)使人迷惑不安。雖然行業(yè)中關(guān)于漢堡包圖標(biāo)的爭(zhēng)論愈發(fā)激烈孝鹊，但越來(lái)越多的用戶(hù)已經(jīng)開(kāi)始習(xí)慣了“點(diǎn)擊三根線的圖標(biāo)展開(kāi)導(dǎo)航菜單”的模式炊琉。當(dāng)他們發(fā)現(xiàn)行為結(jié)果和他們所習(xí)慣的、所預(yù)期的東西不一致時(shí)又活，就會(huì)產(chǎn)生挫敗與迷茫苔咪。
鑒于拖拽圖標(biāo)所存在的一些可用性問(wèn)題，我們建議：
至少允許用戶(hù)長(zhǎng)按目標(biāo)單元整體也能實(shí)現(xiàn)拖拽的目標(biāo)柳骄，而不要只將交互區(qū)域限制在拖拽圖標(biāo)上团赏。
另一方面，對(duì)于漢堡包菜單圖標(biāo)耐薯，可以嘗試更清晰明確的表達(dá)方式舔清，例如在三根線前面增加三個(gè)點(diǎn)丝里，或是同時(shí)放出“菜單”標(biāo)題在圖標(biāo)旁邊。
小結(jié)
背離“官方的”体谒、“常見(jiàn)的”設(shè)計(jì)模式杯聚，總會(huì)讓人覺(jué)得不安，況且與大家的模式保持一致也能幫助用戶(hù)降低學(xué)習(xí)成本抒痒。但是幌绍，無(wú)論你決定遵從怎樣的設(shè)計(jì)規(guī)范，我們都建議你通過(guò)必要的可用性測(cè)試來(lái)驗(yàn)證這些模式是否真的適用于自家產(chǎn)品及目標(biāo)用戶(hù)故响。至少傀广，在我們自己的研究過(guò)程當(dāng)中，我們見(jiàn)到了很多用戶(hù)在本文提到的4個(gè)常見(jiàn)模式上遇到了足夠引發(fā)我們進(jìn)行思考的可用性問(wèn)題被去。
