2 設(shè)計(jì)策略
2.1 設(shè)計(jì)準(zhǔn)則
2.1.1 美學(xué)完整性
美學(xué)完整性不是用來衡量app的設(shè)計(jì)是否美觀,也不是用來描述app的風(fēng)格奉瘤;美學(xué)完整性代表了app的外觀和交互是否能與功能很好的融合并且傳達(dá)條理清晰的信息。
用戶關(guān)心的是app是否能提供它所承諾的功能藕赞,但這也會受到app的外觀以及交互很大的影響卖局,這種影響有時(shí)是潛意識層面的。比如批销,一個(gè)幫助用戶完成一系列任務(wù)的app均芽,可以通過使用微小且不引人注目的裝飾元素单鹿、標(biāo)準(zhǔn)控件和可預(yù)知的交互來使用戶專注于主要任務(wù)。這種app清晰地向用戶傳達(dá)它的目的性和一致性劲妙,得到了用戶的信任。如果一個(gè)app使用干擾的涛舍、多余的或者隨意的UI來呈現(xiàn)任務(wù)唆途,向用戶傳達(dá)混亂的信息,用戶就會質(zhì)疑app的可靠性和可信性肛搬。
另一方面,在提供沉浸式體驗(yàn)的app比如游戲中蛤奢,用戶想要的是能夠吸引他們的外觀啤贩,這樣的外觀能給用戶帶來樂趣和刺激并且能鼓勵(lì)用戶進(jìn)行探索。用戶并不想在游戲里完成一系列程式化的任務(wù)痹屹,他們期望的是外觀和交互能夠與游戲目的相結(jié)合的游戲枉氮。
2.1.2 一致性
一致性能夠使用戶將對UI已有的認(rèn)知從app的一個(gè)部分轉(zhuǎn)移到另一個(gè)部分,或者從一個(gè)app到另一個(gè)app楼肪。具有一致性的app并不是拷貝別的app惹悄,也不是使用一成不變的設(shè)計(jì)風(fēng)格,而是專注于使用戶感到舒適的標(biāo)準(zhǔn)和范例暂殖,為用戶提供內(nèi)部一致的體驗(yàn)爷速。
思考以下幾個(gè)問題來判斷一個(gè)iOS app是否遵循一致性的原則:
- app是否與iOS標(biāo)準(zhǔn)一致?是否正確使用系統(tǒng)提供的控件莉给、視圖和圖標(biāo)?是否以用戶期望的方式整合設(shè)備的特性颓遏?
- app內(nèi)部是否一致?文本是否使用一致的術(shù)語和樣式滤灯?同樣的圖標(biāo)是否始終代表同樣的意思曼玩?當(dāng)用戶在不同的位置執(zhí)行相同的操作,用戶是否可以預(yù)見結(jié)果豫尽?自定義UI元素的外觀和行為是否相同顷帖?
- app與之前的版本是否一致?條款和含義是否保持不變榴嗅?基本的概念和主要的功能本質(zhì)上是否改變陶舞?
2.1.3 直接操作
當(dāng)用戶直接操作,而不是通過使用分離的控件來操控屏幕上的對象時(shí)论咏,用戶更能專注于任務(wù)颁井,且更易理解操作對應(yīng)的結(jié)果蠢护。
使用多點(diǎn)觸控,用戶可以通過捏合手勢直接放大或縮小圖片或文本內(nèi)容眉抬。在游戲中懈凹,玩家可以直接與屏幕上的對象進(jìn)行交互。比如库北,在游戲中用戶可以通過轉(zhuǎn)動來打開密碼鎖。
在iOS app中寒瓦,以下情況用戶可以進(jìn)行直接操作:
- 旋轉(zhuǎn)或者移動設(shè)備來影響屏幕上的對象
- 使用手勢來操控屏幕上的對象
- 即時(shí)的操作反饋和可視化的結(jié)果
2.1.4 反饋
反饋為了告知用戶操作的結(jié)果,更新任務(wù)的進(jìn)程垃你。
iOS內(nèi)置app以可感知的反饋來響應(yīng)用戶每一個(gè)操作喂很。當(dāng)用戶點(diǎn)擊時(shí),列表項(xiàng)和控件會高亮顯示官还,對于會持續(xù)一段時(shí)間操作毒坛,空間會顯示執(zhí)行過程。
微小的動畫可以給用戶有意義的反饋屯伞,有助于闡明用戶操作的結(jié)果豪直。比如,列表會以動畫的形式表現(xiàn)新項(xiàng)目增加的過程末融,從視覺上幫助用戶追蹤變化暇韧。
音效也可以給用戶有益的反饋,但不應(yīng)作為唯一的反饋方式懈玻,因?yàn)橛脩舨灰欢苈牭玫健?/p>
2.1.5 隱喻
當(dāng)app中虛擬的對象和交互隱喻用戶所熟悉的使用體驗(yàn)涂乌,不管這些體驗(yàn)來自于真實(shí)世界還是數(shù)字世界,用戶就能很快掌握如何來使用app湾盒。
app可以使用隱喻來暗示使用方法或體驗(yàn),但是這種隱喻不能超過其基于的對象或行為本身的限制毅人。
因?yàn)橛脩羰且晕锢硇问脚c屏幕進(jìn)行交互的,所以iOS app在設(shè)計(jì)隱喻方面有很大的余地:
- 移動分層視圖來顯示下方的內(nèi)容
- 在游戲中拖拽赵刑、輕掃或者滑動對象
- 點(diǎn)擊開關(guān)场刑、滑動滑塊和轉(zhuǎn)動選擇器
- 輕掃書本或雜志來翻頁
2.1.6 用戶控制
用戶-而不是app-應(yīng)該發(fā)起和控制操作。app可以建議用戶一系列的操作或者警示用戶危險(xiǎn)的操作后果铐懊,但是app不應(yīng)該取代用戶來做決策瞎疼。優(yōu)秀的app能夠在為用戶提供需要的功能以及幫助用戶規(guī)避不好的結(jié)果之間取得平衡。
當(dāng)交互和控件是用戶所熟悉和可預(yù)見的茅茂,用戶會覺得更能控制app太抓。同樣,當(dāng)app的操作簡單直接碴倾,用戶會更易理解和記憶掉丽。
在一個(gè)操作開始執(zhí)行之前,用戶會希望有足夠的機(jī)會來取消它僧须,也會希望在執(zhí)行一個(gè)不可逆操作前能夠進(jìn)行確認(rèn)皆辽。最后芥挣,用戶會希望停止一個(gè)在執(zhí)行中的操作耻台。
2.2 從概念到產(chǎn)品
2.2.1 定義你的app
app的定義聲明是對app主要功能和目標(biāo)用戶的簡單具體的描述。
盡早創(chuàng)建app定義聲明有助于你將想法和功能清單轉(zhuǎn)換成用戶想要的條理清晰的產(chǎn)品蹋砚。在開發(fā)過程中,使用定義聲明有助于你判斷是否需要某項(xiàng)功能或者交互坝咐。通過以下步驟來創(chuàng)建一個(gè)可靠的app定義聲明。
- 列出所有你認(rèn)為用戶會喜歡的功能
可以直接頭腦風(fēng)暴秧饮。這一步盗尸,你要嘗試找出所有與你產(chǎn)品核心想法相關(guān)的任務(wù)帽撑。不要擔(dān)心列表會太長,因?yàn)榻酉聛砟銜M(jìn)行刪減亏拉。
假設(shè)你最初的想法是開發(fā)一個(gè)幫助用戶購買雜貨的app。你會在思考這項(xiàng)活動時(shí)弱贼,產(chǎn)生一系列相關(guān)的任務(wù)磷蛹,這就是用戶可能會感興趣的潛在的功能。比如:
- 創(chuàng)建列表
- 獲取食譜
- 比價(jià)
- 商店定位
- 食譜注釋
- 優(yōu)惠券的獲取和使用
- 查看烹飪示例
- 瀏覽不同的菜肴
- 查找配料替代品
- 確定你的目標(biāo)用戶
現(xiàn)在你需要找出你的app用戶與其他iOS用戶有哪些區(qū)別庇勃。在你的核心想法環(huán)境下,什么對于用戶是最重要的槽驶?在雜貨購物的例子中责嚷,你需要考慮你的用戶:
- 通常在家烹飪還是偏好現(xiàn)成的食物
- 是忠實(shí)的優(yōu)惠券用戶還是認(rèn)為優(yōu)惠券可有可無
- 享受尋找特別的食材還是偏好基本的食材
- 嚴(yán)格按照食譜還是把食譜當(dāng)做靈感來源
- 少量多次的購買還是一次購買大量食材
- 會為不同目的準(zhǔn)備不同的進(jìn)行中的列表還是只希望在回家的路上記起一些要買的東西
- 堅(jiān)持特定的品牌還是會因?yàn)榉奖愣x擇替代品
- 通常每次購物都買相似的東西還是按照菜譜購買
在仔細(xì)考慮以上問題后,確定3個(gè)最能代表你的目標(biāo)用戶的特質(zhì):喜愛按照食譜進(jìn)行嘗試掂铐、常常很匆忙并且通常都比較節(jié)儉罕拂。
- 根據(jù)目標(biāo)用戶定義過濾功能清單
如果確定目標(biāo)用戶特性之后,你最終確定了幾個(gè)app的主要功能全陨,恭喜你走上正確的道路:優(yōu)秀的iOS app會聚焦幫助用戶搞定他們所要完成的任務(wù)爆班。
比如,思考在步驟1中你創(chuàng)建的長長的功能清單辱姨。盡管它們都是很有用的功能,但并非所有都是你在步驟2中定義的目標(biāo)用戶所歡迎的枢舶。
當(dāng)你在你目標(biāo)用戶的使用場景下檢查功能清單時(shí),你決定app應(yīng)該專注于3個(gè)主要的功能:創(chuàng)建清單躏尉、獲取和使用優(yōu)惠券以及查找食譜醇份。
這時(shí)你就可以制作app的定義聲明了僚纷,詳細(xì)地總結(jié)app做什么以及為誰做怖竭。一個(gè)好的雜貨購物app的定義聲明應(yīng)該是:
“一個(gè)為熱愛烹飪且節(jié)儉的用戶創(chuàng)建購物清單的工具”
- 不要止步于此
在整個(gè)開發(fā)過程中痊臭,都應(yīng)使用app定義聲明來確定功能广匙、控件和措辭鸦致。比如:
當(dāng)你考慮是否增加一個(gè)新功能時(shí) 分唾,問問自己這個(gè)功能對于app的核心目的和目標(biāo)用戶是否是必不可少的绽乔。如果不是折砸,那就把它放在一邊睦授。比如睹逃,當(dāng)你確定你的用戶對于新奇大膽的烹飪很感興趣沉填,那強(qiáng)調(diào)盒裝蛋糕和現(xiàn)成的食物可能并不是一個(gè)很好的選擇翼闹。
當(dāng)你考慮UI的外觀和交互時(shí) 猎荠,問問自己你的目標(biāo)用戶喜歡簡單高效的風(fēng)格還是有明顯主題 的風(fēng)格关摇。以用戶使用你app的目的來指導(dǎo)UI的設(shè)計(jì)输虱,比如用戶想要完成一系列的任務(wù)宪睹、快速獲得解答亭病、鉆研復(fù)雜的內(nèi)容嘶居、或者娛樂邮屁。舉個(gè)例子樱报,盡管你的雜貨購物清單app要簡單易用迹蛤,但你的目標(biāo)用戶可能會想要這樣一個(gè)有主題的UI,可以顯示大量精美的配料和菜肴的圖片嚷量。
當(dāng)你考慮措辭時(shí) 蝶溶,盡可能匹配目標(biāo)用戶在這個(gè)領(lǐng)域的專業(yè)程度梨州。比如暴匠,盡管用戶并不是專業(yè)的廚師每窖,你也應(yīng)該相信他們想要看到準(zhǔn)確的食材和技巧術(shù)語窒典。
2.2.2 為任務(wù)定制UI
最優(yōu)秀的app能夠在定制化的UI瀑志、清晰的目標(biāo)和良好的易用性之間取得平衡后室。為了在你的app中達(dá)到這樣的平衡岸霹,確保要在設(shè)計(jì)過程的早期就考慮UI定制贡避。品牌刮吧、獨(dú)創(chuàng)性和可銷售性經(jīng)常會影響UI定制的決策杀捻,出于對這一點(diǎn)的考慮致讥,專注于通過UI定制化來影響用戶體驗(yàn)是非常困難的。
從考慮app的任務(wù)開始:用戶執(zhí)行任務(wù)的頻率如何港柜?他們所處的環(huán)境通常是怎么樣的?
比如涌韩,想象這樣一個(gè)計(jì)算器app贸辈,它的設(shè)計(jì)復(fù)雜且具有藝術(shù)感肠槽,使用極富想象力的布局來顯示熟悉的計(jì)算元素秸仙。這種仔細(xì)呈現(xiàn)的富有藝術(shù)感的設(shè)計(jì)和富有想象力的布局不會妨礙用戶理解如何點(diǎn)擊按鈕和瀏覽結(jié)果寂纪。但是對于那些只想快速完成任務(wù)的來說捞蛋,這種新奇的使用體驗(yàn)和漂亮的定制UI反而成為了一種阻礙。
相反搬设,看看GarageBand拿穴。GarageBand可以不顯示漂亮默色、逼真的樂器來幫助用戶制作音樂腿宰,但是這樣會使用戶會缺少代入感和樂趣。在GarageBand中规肴,定制的UI不僅向用戶展示了如何使用app拖刃,而且使得制作音樂這個(gè)核心任務(wù)變得很簡單央碟。
當(dāng)你思考定制UI如何增強(qiáng)或是減弱用戶對app核心任務(wù)的注意力時(shí)亿虽,你需要牢記以下幾條準(zhǔn)則洛勉。
出于一定的緣由進(jìn)行UI定制收毫。 理想情況下,UI定制應(yīng)該有助于簡化用戶的任務(wù)输拇、提升用戶體驗(yàn)淳附。你需要盡可能以你的app核心任務(wù)來驅(qū)動UI定制的決策奴曙。
盡可能減少用戶的認(rèn)知負(fù)擔(dān)草讶。 用戶已經(jīng)熟悉標(biāo)準(zhǔn)UI元素的外觀和交互坤溃,所以用戶不需要停下來思考如何來使用它們薪介。當(dāng)用戶看到與標(biāo)準(zhǔn)元素完全不同的元素時(shí)汁政,他們就會失去已有經(jīng)驗(yàn)的優(yōu)勢勺鸦。除非你的特別的元素可以簡化任務(wù)换途,否則用戶會反感于被迫學(xué)習(xí)新的不通用的程序军拟。
確保內(nèi)部統(tǒng)一忠蝗。 UI的定制化程度越高阁最,app內(nèi)自定義元素的外觀和交互的統(tǒng)一就越為重要姜盈。如果用戶花費(fèi)時(shí)間來學(xué)習(xí)如何使用你創(chuàng)建的不熟悉的控件馏颂,他們會希望這些習(xí)得的知識在app內(nèi)是通用的救拉。
時(shí)刻遵從內(nèi)容。 因?yàn)橛脩魧τ跇?biāo)準(zhǔn)元素很熟悉派昧,所以它們不會影響用戶對于內(nèi)容的注意力蒂萎。如果你要定制UI淮椰,注意確保不要讓UI影響用戶關(guān)心的內(nèi)容。比如烈疚,你的app允許用戶觀看視頻,你可能會設(shè)計(jì)一個(gè)自定義的重播控件灯抛。當(dāng)用戶開始觀看視頻時(shí)控件淡出对嚼,點(diǎn)擊屏幕后再次出現(xiàn),這相對于使用自定義控件還是標(biāo)準(zhǔn)控件來的更為重要靡砌。
重新設(shè)計(jì)標(biāo)準(zhǔn)控件前要三思通殃。 如果你不只想自定義標(biāo)準(zhǔn)控件,請確保你重新設(shè)計(jì)的控件能夠提供與標(biāo)準(zhǔn)控件同樣多的信息曲聂。比如句葵,如果你創(chuàng)建了一個(gè)無法提示具有相反狀態(tài)的開關(guān)控件,用戶可能不會意識到這是一個(gè)有兩種狀態(tài)的控件轻专。
確保徹底測試自定義UI元素请垛。 在測試過程中漫拭,仔細(xì)觀察用戶是否能預(yù)測你的元素的作用以及是否易于交互采驻。比如,如果你創(chuàng)建了一個(gè)可點(diǎn)擊區(qū)域小于44×44點(diǎn)的控件痘系,用戶想要激活它時(shí)就會遇到困難汰翠。或者,如果你創(chuàng)建了一個(gè)視圖會以不同的方式響應(yīng)點(diǎn)擊和輕掃操作抄课,請確保這個(gè)視圖提供的功能值得用戶與之交互時(shí)額外的關(guān)注跟磨。
2.2.3 原型和迭代
在投入重要資源來實(shí)現(xiàn)你的設(shè)計(jì)之前哎榴,為用戶測試創(chuàng)建原型是一個(gè)很好的注意尚蝌。即使只有幾個(gè)同事幫你測試原型,你也會受益于他們對于app功能和體驗(yàn)的新鮮的觀點(diǎn)姿鸿。
在最開始設(shè)計(jì)的時(shí)候句狼,你可以使用紙質(zhì)原型或者線框圖來擬定主要視圖和控件鲜锚,規(guī)劃屏幕之間的跳轉(zhuǎn)。你能從測試線框圖中獲取一些有用的反饋骏令,但是簡單的線框圖也有可能誤導(dǎo)用戶榔袋。因?yàn)橛脩艉茈y想象當(dāng)線框圖填充真實(shí)的內(nèi)容后,用戶體驗(yàn)會有怎樣的改變吏够。
如果你能創(chuàng)建一個(gè)能在設(shè)備上運(yùn)行的原型,你會獲得更多有價(jià)值的反饋售睹。當(dāng)用戶能夠在設(shè)備上與你的原型進(jìn)行交互時(shí)昌妹,更容易發(fā)現(xiàn)那里的功能不是他們所預(yù)期的飞崖,或者哪里的用戶體驗(yàn)過于復(fù)雜蚜厉。
創(chuàng)建可靠原型最簡單的方式是通過基于故事板的Xcode模板來創(chuàng)建一個(gè)基礎(chǔ)app术瓮,然后用合適的占位內(nèi)容來填充它。(故事板文件可以囊括整個(gè)app的UI辜伟,包括不同屏幕之間的切換导狡。)接下來,將原型安裝到設(shè)備上枚赡,這樣你的測試者就能獲得接近真實(shí)的使用體驗(yàn)。
你不需要在app原型中填充太多的內(nèi)容卢肃,也不必讓每個(gè)控件都可以使用,你只需要提供足夠的環(huán)境來營造接近真實(shí)的使用體驗(yàn)。目的是在典型的用戶體驗(yàn)和邊緣情況之間取得平衡竣贪。比如,你的app可能需要處理很長的項(xiàng)目清單爷耀,你就不應(yīng)該創(chuàng)建一個(gè)只顯示幾條列表項(xiàng)的原型跑杭。而在測試用戶交互時(shí)德谅,如果測試者能通過點(diǎn)擊屏幕上的某一區(qū)域然后跳轉(zhuǎn)到下一個(gè)邏輯視圖或者執(zhí)行主要任務(wù),他們會提供更有建設(shè)性的反饋椭盏。
當(dāng)你基于Xcode的app模型來創(chuàng)建原型時(shí),你可以使用很多免費(fèi)的功能蚯舱,并且相對來說更容易根據(jù)反饋來調(diào)整設(shè)計(jì)。在你確定設(shè)計(jì)然后投入資源來實(shí)現(xiàn)之前兄裂,你需要反復(fù)測試你的原型。查看Xcode Overview匾南,開始學(xué)習(xí)Xcode蛔外。
2.3 案例學(xué)習(xí):從桌面到iOS
2.3.1 iPad版Keynote
桌面版的Keynote是一個(gè)創(chuàng)建世界級幻燈片報(bào)告的強(qiáng)大而又靈活的app豹爹。用戶喜愛Keynote將易用性與對細(xì)微顆粒度的細(xì)節(jié)的控制性結(jié)合的方式,比如動畫和文本屬性艾君。
iPad版Keynote汲取了桌面版Keynote的核心功能腻贰,通過以下設(shè)計(jì)提升了它在iPad上的用戶體驗(yàn):
- 專注于用戶的內(nèi)容
- 在不減少功能的前提下降低復(fù)雜度
- 提供有用且令人愉悅的快捷操作
- 繼承桌面版用戶體驗(yàn)的特性
- 通過傳神的動畫來反饋和交流
Keynote用戶能夠立刻明白如何使用iPad版的Keynote伴奥,因?yàn)樗ㄟ^iPad本地范例來實(shí)現(xiàn)用戶可預(yù)測的功能洲炊。新用戶能夠簡單地學(xué)會如何使用iPad版Keynote,因?yàn)橛脩艨梢砸院唵巫匀坏姆绞絹碇苯涌刂扑麄兊膬?nèi)容狂巢。
Keynote從桌面到iPad的轉(zhuǎn)化是基于從細(xì)節(jié)到整體的大量的修改和重新設(shè)計(jì)的。以下是一些最明顯的修改:
線性的工具欄斩个。 工具欄上只有少量的元素,但給予了用戶所有創(chuàng)建內(nèi)容所需的功能和工具的統(tǒng)一入口腔呜。
簡化的膝但、優(yōu)先響應(yīng)用戶焦點(diǎn)的檢查器丑孩。 iPad版的Keynote檢查器自動包含了用戶需要用來調(diào)整所選對象的工具和屬性。通常仗岖,用戶可以在第一檢查器視圖中完成所有他們需要的修改操作。如果用戶需要調(diào)整一些不常修改的屬性檩电,可以調(diào)出其他檢查器視圖。
豐富的預(yù)設(shè)樣式集卓箫。 用戶可以很簡單的使用預(yù)設(shè)樣式來改變圖表的外觀和質(zhì)感遭铺。除了色彩方案甫题,包括預(yù)設(shè)的屬性比如表格的標(biāo)題和坐標(biāo)軸區(qū)分標(biāo)識,每個(gè)集合都設(shè)計(jì)的與整個(gè)主題相適應(yīng)炎码。
直接操作內(nèi)容,以有意義的動畫豐富內(nèi)容。 在iPad上的Keynote中凹炸,用戶拖拽滑塊來移動到新的位置啤它,扭動對象來使之旋轉(zhuǎn),點(diǎn)擊圖片來選中它。iPad版Keynote通過響應(yīng)動畫來進(jìn)一步增強(qiáng)用戶對于直接操控的印象誊爹。比如瓢捉,當(dāng)用戶移動幻燈片的時(shí)候搂漠,幻燈片會像脈搏一樣跳動,當(dāng)被移動到一個(gè)新位置時(shí),周圍的幻燈片會向外擴(kuò)散來騰出空間拣度。
2.3.2 iPhone版郵件應(yīng)用
郵件應(yīng)用是OS X中好用且廣受好評的常用應(yīng)用之一。它也是一個(gè)非常強(qiáng)大的應(yīng)用,可以幫助用戶創(chuàng)建宿接、接收、分類和存儲郵件,追蹤活動和事件碑幅,創(chuàng)建備忘和邀請。桌面版郵件應(yīng)用以多窗口的形式來提供這些強(qiáng)大的功能裹赴。
iPhone版的郵件應(yīng)用專注于桌面版郵件應(yīng)用的核心功能,幫助用戶接收雷猪、創(chuàng)建射沟、發(fā)送和組織信息嚷辅。iPhone版郵件應(yīng)用濃縮了功能扁位,通過定制適應(yīng)移動端體驗(yàn)的UI,從以下幾點(diǎn)提升了用戶體驗(yàn):
- 通過線性的外觀來將用戶的內(nèi)容前置并集中化
- 為不同的任務(wù)設(shè)計(jì)不同的視圖
- 可以輕松理解的符合認(rèn)知的信息結(jié)構(gòu)
- 可以在用戶需要的時(shí)候提供強(qiáng)大編輯和組織功能的工具
- 傳達(dá)動作泼掠、提供反饋的細(xì)微但極具表現(xiàn)力的動畫
iPhone版郵件應(yīng)用并不是一個(gè)比桌面版郵件應(yīng)用更好的app括改;而是專為移動設(shè)備用戶重新設(shè)計(jì)的郵件應(yīng)用吝梅。iPhone版郵件應(yīng)用專注于桌面版的核心功能对粪,通過吸引人的簡介界面顯示,為移動設(shè)備用戶提供了郵件應(yīng)用的核心體驗(yàn)茫死。
為了適應(yīng)移動設(shè)備上的體驗(yàn)屡久,iPhone版郵件應(yīng)用在幾處關(guān)鍵地方進(jìn)行了UI創(chuàng)新。
清晰、高度集中的頁面版姑。 每個(gè)頁面都顯示了郵件應(yīng)用體驗(yàn)的一個(gè)方面:賬戶列表宪肖、郵箱列表娜遵、郵件列表、郵件視圖和編輯視圖。在一個(gè)頁面內(nèi),用戶通過滾動來查看所有內(nèi)容。
簡單慰于、可預(yù)知的導(dǎo)航. 在任何頁面休里,通過點(diǎn)擊可以從綜合的頁面進(jìn)入到詳情頁面,比如從賬戶列表進(jìn)入郵件頁面拭嫁。每個(gè)頁面顯示的標(biāo)題能告知用戶所處的位置毡咏,以及顯示一個(gè)返回按鈕來讓用戶方便地回溯到之前的步驟。
簡單堵泽、易點(diǎn)擊的控件。 因?yàn)樵谌魏苇h(huán)境下編輯郵件和查看新郵件都是用戶會執(zhí)行的主要操作,所以iPhone版郵件應(yīng)用確保了用戶在很多頁面都能方便地執(zhí)行這些操作。當(dāng)用戶在瀏覽一封郵件時(shí),用戶可以回復(fù)、移動和刪除郵件,因?yàn)檫@些操作的對象都是該郵件薪韩。
對于不同任務(wù)不同類型的反饋岭洲。 當(dāng)用戶刪除一封郵件,它以動畫的形式移入垃圾箱圖標(biāo)。當(dāng)用戶發(fā)送一封郵件,可以直觀的看到發(fā)送的過程挤巡;當(dāng)發(fā)送完成后矿卑,用戶可以聽到特別的音效。通過查看郵件列表工具欄上的細(xì)小的文字,用戶可以很方便地知道郵箱上次的更新的時(shí)間。
2.3.3 iOS中的網(wǎng)頁內(nèi)容
在iOS設(shè)備中蟋座,Safari瀏覽器提供了卓越的移動網(wǎng)頁瀏覽體驗(yàn)券膀。用戶喜愛Safari清晰的文字和銳利的圖片舒帮,喜愛Safari能夠適應(yīng)用戶旋轉(zhuǎn)設(shè)備译红、捏合或者點(diǎn)擊屏幕。
基于標(biāo)準(zhǔn)設(shè)計(jì)的網(wǎng)站能在iOS設(shè)備上很好地顯示。特別是那些可以識別設(shè)備且不使用插件的網(wǎng)站,幾乎不用做任何調(diào)整就能適應(yīng)iPhone和iPad。
除此之外,成功的網(wǎng)站具有以下特點(diǎn):
- 如果頁面寬度需要匹配設(shè)備的寬度,那就為設(shè)備設(shè)置合適的視窗。
- 避免使用固定的CSS配置,這樣當(dāng)用戶放大或縮小頁面時(shí)专控,內(nèi)容就不會被移出屏幕
- 使用基于觸控的UI,而不是桌面端基于點(diǎn)擊的交互
有時(shí)嗅剖,額外的修改也是合理的。比如赏胚,在iOS中典勇,網(wǎng)頁應(yīng)用通常會設(shè)置合適的視窗大小般码,并且隱藏Safari的UI。查看Safari Web Content Guide中Configuring the Viewport 和Configuring Web Applications,了解如何進(jìn)行這樣的修改扭粱。
網(wǎng)站也可以通過其他的方式來適配桌面網(wǎng)頁到iOS中的Safari:
適應(yīng)iOS中Safari的鍵盤套才。 當(dāng)鍵盤和格式輔助出現(xiàn)時(shí),iPhone上的Safari會在URL地址欄的下方和鍵盤與格式輔助的上方顯示你的網(wǎng)頁。
適應(yīng)iOS中Safari的彈出菜單巴柿。 在桌面版的Safari中,就像別的OS X應(yīng)用那樣,彈出菜單包含了大量的選項(xiàng)身害;必要時(shí)丙猬,為了在彈出菜單中顯示所有的選項(xiàng)茧球,可以超出窗口的邊界损痰。在iOS中的Safari,彈出菜單使用系統(tǒng)元素顯示就乓,以此提供更好的用戶體驗(yàn)。比如念脯,在iPhone中废登,彈出菜單以選擇器的形式顯示堡距,用戶可以在列表中選擇選項(xiàng)。(查看Picker届巩,了解更多相關(guān)信息方咆。)