《觸動人心——設(shè)計優(yōu)秀的IPHONE應(yīng)用》

一句話描述這本書:iPhone應(yīng)用設(shè)計指南

這本書總共330多頁,內(nèi)容很干憎兽,這本書需要快速看撼泛,慢慢體會挠说。以下是以書中章節(jié)為點進行的總結(jié)性摘錄。很長愿题,大家可以先選自己感興趣的部分來看损俭。

書籍章節(jié)概述

雖然是2011年出版,但對于一個交互設(shè)計新人而言潘酗,是很受用的杆兵。整本書介紹了iPhone應(yīng)用在使用過程中的各個關(guān)系點,包括手勢動作仔夺、操作熱區(qū)琐脏、尺寸、控件缸兔、視覺日裙、橫屏、信息互通等惰蜜。初入交互設(shè)計領(lǐng)域昂拂,這本書對于認(rèn)識iOS交互設(shè)計規(guī)范很有幫助。以下按照書籍章節(jié)的順序抛猖,重溫內(nèi)容格侯,拿出來與君共勉。

第一章~第三章 ? ? 移動應(yīng)用手指操作與屏幕尺寸

第一章總概括說明了我們使用手機想要的與感知到的iPhone應(yīng)用的狀況樟结。我們在使用一款應(yīng)用僅僅依靠我們的手指养交,應(yīng)用的表達應(yīng)該是簡單易用的。

第二章iPhone應(yīng)用在產(chǎn)生之前應(yīng)該有幾點是明確的瓢宦,為什么要做手機版碎连?應(yīng)用的主要功能、次要功能是什么驮履,用戶的使用心態(tài)是怎樣的鱼辙,明白應(yīng)用設(shè)計的五要素人物、事件玫镐、時間倒戏、地點、起因恐似。注意應(yīng)用的功能要有主次杜跷,并且不是任何功能都要放在應(yīng)用里的。明白用戶在移動時使用你的應(yīng)用的三種心態(tài):想完成微任務(wù)、了解周遭發(fā)生的事葛闷、打發(fā)無聊的時間憋槐。

【現(xiàn)在手機基本與電腦相當(dāng),人們使用手機不僅僅是在移動狀態(tài)下使用淑趾,但是我們要明白自己的應(yīng)用是在什么場景下使用的】

第三章講述了手指觸摸屏幕決定了屏幕上內(nèi)容的尺寸阳仔。大拇指在屏幕上操作的有效區(qū)域決定了我們要把不常用的按鈕或者防誤觸的按鈕放在拇指常點擊區(qū)域外。在觸屏設(shè)備中扣泊,每個按鈕和控件都要契合近范。標(biāo)準(zhǔn)iPhone控件中,豎屏?xí)r延蟹,虛擬鍵盤的按鈕评矩、標(biāo)準(zhǔn)列表的列表項、屏幕頂部的導(dǎo)航欄等等阱飘,高度都是44像素稚照。44像素被推薦為是一個點擊目標(biāo)可點且易點的最小值。所有點擊目標(biāo)的最小尺寸是44*30像素俯萌。底部標(biāo)簽欄的標(biāo)簽數(shù)量限制是5個。要注意如果要在工具欄或者工具欄旁邊放置點擊目標(biāo)的話上枕,要保證目標(biāo)夠大咐熙,這樣才能防止誤觸。書中舉了計算器設(shè)計的變更歷史辨萍。優(yōu)秀的iPhone應(yīng)用采用了如下的點擊指南:重要信息放頂部棋恼,重要操作放底部(這樣你的操作不會干擾你的視線);盡量讓一屏顯示完锈玉,避免滾動條(減少用戶腦力與體力的消耗)爪飘;盡量減少屏幕上的元素(減少用戶的操作與理解負擔(dān));把高級工具盒操作隱藏拉背,減少邊框界面(為主流用戶設(shè)計)师崎,觸發(fā)點要有清楚的標(biāo)識,可以放在正關(guān)注內(nèi)容的旁邊椅棺。

第四章犁罩、第五章 ? ? 組織布局與標(biāo)準(zhǔn)控件

第四章講確定好了應(yīng)用的功能,首先要做的第一件事確定整體的組織布局與頁面框架两疚。首先是大局層面上的布局設(shè)計床估。明白組成應(yīng)用的多張頁面之間是如何串聯(lián)的,這是設(shè)計者最基本的決策之一诱渤。蘋果的導(dǎo)航模型有三種丐巫,分別是平鋪頁面、標(biāo)簽欄、樹形結(jié)構(gòu)递胧。平鋪結(jié)構(gòu)類似于連續(xù)的N張啟動頁碑韵,在頁面下方有幾個小圓點做導(dǎo)航指示;標(biāo)簽欄就是tab bars谓着,是切換選擇操作的理想方案泼诱;樹形結(jié)構(gòu)就是類似于手風(fēng)琴排列,可各個點擊查看詳情的導(dǎo)航形式赊锚。樹形結(jié)構(gòu)導(dǎo)航的排列方式也可以更換為宮格式的排布方式治筒,典型的例子比如蘋果應(yīng)用“照片”中“相簿”內(nèi)容的呈現(xiàn)方式。

這個應(yīng)用中各個頁面的組織結(jié)果應(yīng)該是讓用戶能預(yù)料到應(yīng)用中的導(dǎo)航路徑舷蒲,最理想的情況下耸袜,這個路徑可能是唯一的。盡量保證每一個頁面只有一個途徑進入牲平,每個頁面中應(yīng)該只做一件事情堤框,完成一項任務(wù)或查看一種內(nèi)容元素。在紙上畫出應(yīng)用的故事板纵柿,幫助確認(rèn)是否選擇了合適的導(dǎo)航模型蜈抓,導(dǎo)航模型是否適于你所在站點的所有頁面。組織好頁面和任務(wù)優(yōu)先級昂儒,了解每個頁面上大概有什么操作沟使,頁面上的工具和內(nèi)容的大致比例。

第五章講頁面框架設(shè)計中需要用到的標(biāo)準(zhǔn)控件渊跋。標(biāo)準(zhǔn)控件的首要好處就是司空見慣腊嗡,用戶不需要再學(xué)習(xí)新的知識就能認(rèn)識并使用頁面上控件之下承載的功能。相似性與一致性會增加設(shè)計的可靠性拾酝。

導(dǎo)航欄:常見的一般是左側(cè)是一個后退按鈕燕少,中間是頁面標(biāo)題,右側(cè)區(qū)域為空白蒿囤。頁面標(biāo)題是在提示用戶客们,告訴他們在應(yīng)用中的位置,幫助用戶保持方向感材诽。盡量別在應(yīng)用的首屏把LOGO放在中間镶摘,用戶啟動你應(yīng)用的時候,他們知道你是誰岳守。右側(cè)區(qū)域任憑喜好添加按鈕或控件凄敢,可以是文字按鈕、自定義圖標(biāo)或是其他湿痢。右上角是拇指操作的偏僻區(qū)域涝缝,在這個區(qū)域里扑庞,可以放上不常用但是有需求的控件,或者是怕用戶誤點擊的控件拒逮。導(dǎo)航欄還有其他的形式:添加提示文字罐氨,點擊隱藏導(dǎo)航欄。盡量保持導(dǎo)航欄干凈滩援。對于工具性的控件則有另外一個地方可以放置——工具欄栅隐。

工具欄:頁面上的工具箱,用來編輯玩徊、操作租悄、分享內(nèi)容,只針對當(dāng)前頁面上的內(nèi)容恩袱,提供管理內(nèi)容的命令泣棋。在工具欄中能用的圖標(biāo)在導(dǎo)航欄中也能用。

搜索欄:特殊的文本輸入框外加一個玻璃放大鏡圖標(biāo)畔塔;旁邊還有一個清楚文本的“取消”按鈕潭辈;還可以有可選的書簽按鈕,用來顯示用戶保存過內(nèi)容或搜索結(jié)果澈吨。點擊搜索欄把敢,鍵盤會自動滑入視圖中×吕保可以在搜索欄內(nèi)添加提示文字技竟。搜索結(jié)果的展示最標(biāo)準(zhǔn)的方式是列表,或者表格視圖展示屈藐。

表格視圖:只有一列,有多行熙尉。表格視圖常見的功能有作為樹狀應(yīng)用分類和內(nèi)容的導(dǎo)航联逻;顯示一張可選項的列表;快速瀏覽检痰、索引一張長列表包归;羅列、分組內(nèi)容詳情铅歼。其中的標(biāo)準(zhǔn)圖標(biāo)有三種公壤,漸進指示器、詳情漸進按鈕椎椰、勾形標(biāo)記(或者使用開關(guān)控件)厦幅。表格視圖還也會把文字輸入框放到單元格中。有時候還會在左側(cè)放上圖片或者圖標(biāo)慨飘。圖標(biāo)的目的是輔助用戶辨識确憨,圖片的目的是為了讓用戶更易于掃描列表項译荞。標(biāo)準(zhǔn)單元格高度也是固定的44px。

表格視圖中專門介紹兩種表格視圖表現(xiàn)時的輔助形式:索引列表和分組列表休弃。索引列表展示分類多吞歼、內(nèi)容冗長的列表非常理想。一般是給兩屏以上的列表添加索引塔猾。典型的是通訊錄按照字母順序索引家浇,可以按照你的想法使用任何標(biāo)題宴胧。分組列表是與屏幕邊緣相離,并用圓角邊框包裹;用來展示設(shè)置項珍手、功能菜單和不同組別的內(nèi)容,它不適合冗長的內(nèi)容框都。每個分組列表可以添加標(biāo)題或頁頭确丢,也可以添加頁腳。頁腳直接顯示在組下方祈匙。

編輯工具:標(biāo)準(zhǔn)配置中忽刽,刪除一個列表項目需要三步,點擊“編輯”-選擇控件(多選狀態(tài)下有復(fù)選框)-點擊“刪除”夺欲。表格視圖還有一種方式是左滑刪除法跪帝,即左滑就能顯示“刪除”按鈕⌒┰模【防御設(shè)計】

四種文本容器:標(biāo)簽伞剑、文本視圖、網(wǎng)頁視圖市埋、文字輸入框黎泣。

編輯文本:文本視圖可編輯,比如備忘錄等缤谎,可進行多行編輯抒倚。

修訂勘誤:iPhone自帶自動糾錯功能;還有自動首字母大寫功能坷澡。

文本輸入框:文本輸入框則只能輸入單行文本托呕。標(biāo)準(zhǔn)文本輸入框可以添加圖片、按鈕或者在輸入框左邊/右邊可以添加文字频敛。取消按鈕用于清除輸入框內(nèi)的文字项郊,當(dāng)輸入框內(nèi)沒有內(nèi)容時,“取消”按鈕就不會出現(xiàn)斟赚,輸入文字后着降,取消按鈕就會出現(xiàn)。一般輸入文本之前拗军,輸入框里會有灰色不顯眼的占位文本鹊碍。常見的文本輸入框有兩種方式厌殉,一是在本頁就地編輯所有文字,另一種是顯示所有值侈咕,然后每項值都新開一張頁面公罕,分別編輯。

鍵盤:iOS中有8中鍵盤耀销,分別是默認(rèn)鍵盤楼眷、數(shù)字和標(biāo)點符號、URL熊尉、郵箱地址罐柳、數(shù)字鍵盤、電話撥號鍵盤狰住、姓名電話鍵盤张吉。除了選擇合適的鍵盤布局外,我們可以為每個輸入框彈出的鍵盤自定義return按鍵標(biāo)簽催植,有幾個標(biāo)準(zhǔn)的按鍵標(biāo)簽是搜索肮蛹、完成、返回创南、發(fā)送……

多選控件:撥選器伦忠、列表、動作選單稿辙。撥選器能同時進行多維度的選擇昆码,可選項應(yīng)該有明顯的順序,按字母排序或按大小排序邻储。列表可以在每個可選項上做標(biāo)記赋咽,進行多選操作。動作選單是從屏幕底部彈上來的吨娜,并列出相關(guān)命令脓匿。動作選單上的按鈕可以顯示用來編輯、操作萌壳、分享當(dāng)前頁面內(nèi)容的現(xiàn)象。動作選單的最下方還有一個取消按鈕日月,這個位置比其他按鈕更容易點擊袱瓮,并能保持出現(xiàn)在相同位置。具有破壞性的操作也應(yīng)特殊對待(一般是刪除按鈕)爱咬,用有警示意義的紅色按鈕尺借,并放在表單的最上面,使其顯眼精拟,遠離拇指熱區(qū)燎斩,減少誤點虱歪。最好動作選單里面的按鈕數(shù)限制在5個以內(nèi),包括“取消”按鈕栅表。

按鈕:按鈕最基本的樣式是圓角矩形按鈕笋鄙,其應(yīng)該包含正常狀態(tài)、按壓狀態(tài)怪瓶、點擊后狀態(tài)萧落、禁用狀態(tài)。

開關(guān):兩個設(shè)置項洗贰,開與關(guān)找岖。

分段控件radio buttons:可以提供多個選項選擇。分段控件是有用的二級導(dǎo)航敛滋。一般有兩個尺寸:一個放在工具欄和標(biāo)簽欄內(nèi)许布,是30px;另一個放在界面上绎晃,是44px蜜唾。

滑動條:方便在最大值和最小值之間調(diào)解,也可用來在長文檔中導(dǎo)航箕昭,快速瀏覽灵妨。一般如音量控制,放大鏡放大倍數(shù)控制落竹。

設(shè)置頁面:蘋果的建議是把所有的設(shè)置都從你的應(yīng)用里面挖出來泌霍,然后統(tǒng)一放到內(nèi)置的“設(shè)置”應(yīng)用中。一般有三類設(shè)置:內(nèi)容設(shè)置述召,賬戶設(shè)置朱转,隱私設(shè)置。

第六章 ? ? 視覺風(fēng)格建立

第六章討論了怎樣樹立視覺風(fēng)格积暖。章節(jié)中主要為圍繞當(dāng)時的擬物化風(fēng)格做了說明藤为,所以具體的設(shè)計中討論了質(zhì)感、燈光等角度的注意事項夺刑,在此不做贅述缅疟。確定自己應(yīng)用的視覺風(fēng)格,首先要確定自己的個性基調(diào)遍愿,并在頁面視覺設(shè)計存淫、圖標(biāo)設(shè)計中運用。使用隱喻手法并注意用好標(biāo)準(zhǔn)控件沼填。

第七章~第十章 ? ? ? ?不易察覺的頁面桅咆、手勢、橫屏坞笙、信息互換

第七章圍繞第一印象很重要岩饼,說明icon荚虚、啟動頁、退出后重啟籍茧、首頁設(shè)計中注意的一些事項版述。應(yīng)用的圖標(biāo)是應(yīng)用的名片,在此硕糊,作者討論了icon設(shè)計要不同院水。應(yīng)用的名字,好記的名字是口口相傳的關(guān)鍵简十。應(yīng)用打開時候的落地頁設(shè)計檬某,主要是緩解用戶感覺啟動緩慢的問題。然后是用戶時常會退出應(yīng)用后會再打開螟蝙,這個時候一般是接著用戶的上次操作繼續(xù)進行恢恼。當(dāng)應(yīng)用重啟時,要盡量讓用戶感覺你是在恢復(fù)暫停胰默。當(dāng)用戶初次來到你應(yīng)用的首頁時场斑,要讓用戶知道你的應(yīng)用怎樣使用,從哪里開始牵署。首頁設(shè)計的幾個通用原則:不說工程師說的話漏隐,考慮設(shè)計成主面板,多做“速覽測試”奴迅。

第八章介紹了手勢的發(fā)現(xiàn)及使用青责。手勢來源于經(jīng)驗,最基本的點擊就像是鼠標(biāo)點擊一樣取具。應(yīng)用使用手勢發(fā)現(xiàn)中脖隶,可以去觀察大家是怎樣使用你的應(yīng)用的,再觀察其相應(yīng)的手勢暇检,包括嘗試后沒有成功的手勢产阱,還有周而復(fù)始耗時的操作。如果使用了新手勢块仆,那也要為這個新手勢所實現(xiàn)的功能提供備選方案构蹬。可以去擴充手勢悔据,幫助用戶發(fā)現(xiàn)自定義手勢庄敛。可以在手勢操作上增加難度蜜暑,或者使用點擊組合铐姚,以防止意外誤點擊的發(fā)生策肝。給每一次的點擊和操作提供視覺反饋肛捍,或者加上一點聲效隐绵。

第九章主要介紹了從豎屏到橫屏轉(zhuǎn)換的注意事項以及橫屏設(shè)計中尺寸的問題。橫屏更容易創(chuàng)造沉浸式體驗拙毫。大家轉(zhuǎn)到橫屏的原因依许,一般是容易閱讀和容易打字。首先要考慮的點是你的應(yīng)用值不值得做成橫屏缀蹄。接著峭跳,橫屏?xí)r候頁面內(nèi)容應(yīng)當(dāng)如何做恰當(dāng)?shù)淖兓R话阋曨l缺前、游戲有必要設(shè)置橫屏蛀醉。在編程橫屏?xí)r,導(dǎo)航欄與工具欄的高度會變成32px衅码,其圖標(biāo)大小應(yīng)該是20*20拯刁。注意從豎屏轉(zhuǎn)成橫屏?xí)r候的動畫效果以及轉(zhuǎn)換后頁面內(nèi)容的位置要讓用戶能找到。要做就把所有頁面都做有橫屏逝段。

第十章主要介紹了警示垛玻、打斷與更新時候告知用戶的形式,如警告奶躯、消息推送帚桩、主屏幕標(biāo)記、等待時候等嘹黔,要注意其中的禮貌性問題账嚎。 警告使用的場景:應(yīng)用不能進行下去時,或出現(xiàn)問題時参淹,通過在警告框中添加按鈕提供其他方案醉锄;或者需要用戶授權(quán)時。在頁面上給用戶提供反饋的入口浙值。消息推送要計劃好什么時候該推送什么通知恳不,什么時候不該發(fā)出。推送的消息开呐,要提供詳細的內(nèi)容控制烟勋,確保有安靜的時候,推送聲音可選筐付。主屏幕標(biāo)記下的內(nèi)容應(yīng)該不妨礙用戶的正常使用卵惦。短時間等待使用菊花轉(zhuǎn),它可以在狀態(tài)欄上瓦戚,可以在頁面上沮尿,長時間等待時需要使用進度條或者其他分散注意力的方式,比如娛樂項目、預(yù)載內(nèi)容等畜疾。

第十一章講了應(yīng)用與應(yīng)用之間的信息互通與切換的策略赴邻。一般,iPhone自帶的應(yīng)用通訊錄啡捶、照片和日歷是共享的姥敛,其他應(yīng)用有權(quán)限讀取、添加瞎暑、編輯彤敛。把控制權(quán)叫個其他應(yīng)用,就像是登錄時了赌,我們會用第三方賬號進行登錄墨榄。我們的應(yīng)用是用戶手中工具的一部分。我們可以在網(wǎng)頁視圖勿她、地圖視圖渠概、郵件撰寫視圖中包含有其他應(yīng)用中的鏈接或者什么。注意不要過多地在應(yīng)用中來回切換嫂拴,不要在任務(wù)進行到一半的時候讓用戶去其他應(yīng)用播揪。

整本書就是這樣子,用了很多輔助案例說明不同場景筒狠、控件的使用戰(zhàn)略猪狈。在讀完整本書后,我去看了看iOS官方的規(guī)范說明辩恼,全英文雇庙,所以粗覽了一下。我對于標(biāo)準(zhǔn)控件及其使用的認(rèn)識拓寬了很多灶伊,對空間的認(rèn)識是一名交互設(shè)計師最基本的知識了吧疆前。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市聘萨,隨后出現(xiàn)的幾起案子竹椒,更是在濱河造成了極大的恐慌,老刑警劉巖米辐,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件胸完,死亡現(xiàn)場離奇詭異,居然都是意外死亡翘贮,警方通過查閱死者的電腦和手機赊窥,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來狸页,“玉大人锨能,你說我怎么就攤上這事。” “怎么了址遇?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵叔收,是天一觀的道長。 經(jīng)常有香客問我傲隶,道長,這世上最難降的妖魔是什么窃页? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任跺株,我火速辦了婚禮,結(jié)果婚禮上脖卖,老公的妹妹穿的比我還像新娘乒省。我一直安慰自己,他們只是感情好畦木,可當(dāng)我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布袖扛。 她就那樣靜靜地躺著,像睡著了一般十籍。 火紅的嫁衣襯著肌膚如雪蛆封。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天勾栗,我揣著相機與錄音惨篱,去河邊找鬼。 笑死围俘,一個胖子當(dāng)著我的面吹牛砸讳,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播界牡,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼簿寂,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了宿亡?” 一聲冷哼從身側(cè)響起常遂,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎挽荠,沒想到半個月后烈钞,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡坤按,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年毯欣,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片臭脓。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡酗钞,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情砚作,我是刑警寧澤窘奏,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站葫录,受9級特大地震影響着裹,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜米同,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一骇扇、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧面粮,春花似錦少孝、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至柴底,卻和暖如春婿脸,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背柄驻。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工盖淡, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人凿歼。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓褪迟,卻偏偏與公主長得像,于是被迫代替她去往敵國和親答憔。 傳聞我的和親對象是個殘疾皇子味赃,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,877評論 2 345

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