【每日一練6】清單/記事類應用交互設計總結(jié)

這幾天分析了幾款記事類型的app曾棕,初衷是想學習一些交互模式陋守,所以在分析的時候沒有明確地表明孰優(yōu)孰劣橘原,更多地是去思考這些模式背后的原因,雖然有可能只是設計師拍腦袋做出來的郁妈。今天稍微做一些總結(jié)浑玛。

拋開前期的流程設計和框架,最后用戶能比較直觀感受到的不外乎三點噩咪,一是應用的層次顾彰,二是信息的展現(xiàn),三是功能的可見性胃碾。層次其實也可以理解為導航涨享,用戶是怎么在應用的所有內(nèi)容之間切換的。信息展示仆百,是用列表厕隧,用卡片,什么需要展現(xiàn)俄周,什么可以暫時隱藏栏账。功能方面跟信息展示是一個意思,只是一個是內(nèi)容栈源,一個是操作挡爵。這三個是我自己為了方便描述分出來的,可能不是很嚴謹甚垦。
下面就從這三個方面來講記事類應用的設計茶鹃。

1涣雕、層級

清單類或者記事類,本身的作用就是幫助用戶整理信息闭翩,所以不可避免的會有多個層級挣郭,根據(jù)產(chǎn)品的定位不同,可以有便簽類疗韵、清單類兑障、記事類等。像清單類的蕉汪,可以有文件夾--清單--任務--子任務流译,記事的像onenote,有筆記本--分區(qū)--頁面三個層級者疤。google keep的層級比較扁平福澡,主要是通過添加便簽和顏色進行區(qū)分。還有的是通過時間來管理驹马,因為任務往往會對應一個時間革砸。

這類應用的特點就是,(1)單個信息量小糯累,信息總量大算利,不大的話還需要應用來協(xié)助管理嗎,(2)內(nèi)容個性化泳姐,難以自動歸類效拭,一千個用戶有一千種形式的記錄。
信息量方面仗岸,不少應用都做得不錯允耿,也各有特點,一會簡單介紹一下扒怖。個性化方面较锡,一個是自定義列表或清單,一個是添加標簽盗痒,顏色蚂蕴,還有就是利用好搜索功能。
下面來看例子俯邓。


從左到右分別是:滴答清單骡楼、奇妙清單、Any.do

三個比較典型的導航的例子稽鞭,第一個是側(cè)邊欄鸟整,使用比較普遍,當然朦蕴,也就顯得比較普通了篮条,好處是進入應用后直接看到任務弟头,缺點就是如果需要在清單之間頻繁切換,體驗可能不是很好涉茧,特別是手勢方面沒有其他優(yōu)化的時候赴恨。第二個可以算是列表式或者內(nèi)容式導航,名稱不重要伴栓,能說明白就行伦连。好處壞處和第一個相反,不能直接看到任務钳垮,但是簡單的點點點比側(cè)邊欄切換好一點惑淳,而且在奇妙清單中,從任務返回列表扔枫,可以通過在屏幕任意地方右滑汛聚,方便得多锹安。第三個比較特別短荐,也是挺有意思的一個設計,算是側(cè)邊欄的變形叹哭,但是不能在左邊緣拉出忍宋,只能通過左上角點擊,效率算不上好风罩,但是切換的動效糠排,還有形式確實讓我眼前一亮,所以列出來做參考超升。

除了這三個入宦,還有onenote典型的多級導航,打開之后默認在筆記本的頁面室琢,然后你需要依次點擊分區(qū)乾闰,頁面,再到記事的內(nèi)容盈滴。印象筆記也是涯肩,不過少了一層分區(qū)。這樣的設計巢钓,對于那些內(nèi)容比較多的用戶來說很受用病苗,不過,可能更適合于pc端症汹。

2硫朦、信息展示

記事類另一個很重要的特點就是現(xiàn)實隱喻,即使現(xiàn)在電子化很方便背镇,各種記錄交流都可以在電腦和手機上完成咬展,但紙質(zhì)的記錄還是挺多的花履,某些情況下,紙質(zhì)的記錄和查看比電子方便得多挚赊。所以在設計應用的時候诡壁,怎么從現(xiàn)實中得到靈感,又怎么體現(xiàn)現(xiàn)實中不具備的優(yōu)點荠割,都是需要考慮的妹卿,信息展示就是其中很重要的一塊。

左上:錘子便簽 左下:Any.do 右上:滴答清單 右下:奇妙清單

上面截圖是四種不同類型的展示形式蔑鹦,其實怎么展示夺克,還需要考慮整個應用的風格是否合適。

展示的形式也會影響到手勢的操作嚎朽,比如上面截圖中的四種形式铺纽,對應的手勢是不同的。錘子便簽的哟忍,偏寫實狡门,往右一拉會出現(xiàn)一個刪除的小紙條;any.do沒有勾選框锅很,是直接手指向右滑動其馏,然后任務就會被劃掉并移到下面;滴答清單和奇妙清單都有勾選框爆安,但是奇妙清單的小卡片形式叛复,用戶可能會更明確這個是可以拖動移除的。

還有一個扔仓,信息的類型有時比較多樣褐奥,可能會有音頻、圖像翘簇、文件撬码,一般的處理方式都是只在記事的詳情中顯示出來,在列表的時候是顯示一個相應的icon缘揪,表示包含了圖片等耍群。印象筆記則是例外,在筆記列表中找筝,會在對應的記事的右邊顯示圖像的縮略圖蹈垢。


3、功能

記事類的應用袖裕,因為層級關(guān)系多曹抬,信息類型多,所以相應的功能的設計也需要好好考慮急鳄。這里我們不討論功能該不該做谤民,只討論應該怎么做堰酿。思路也比較簡單,一是減少其他功能的展現(xiàn)张足,讓用戶專注于文字触创,將干擾減少。二是盡可能將功能都展現(xiàn)出來为牍,提醒用戶可以進行操作哼绑。比如下面這個例子。

左:奇妙清單 右:滴答清單

一種是直接在內(nèi)容中提示用戶碉咆,提示所在的區(qū)域同時也是功能的觸發(fā)區(qū)抖韩,而且也是添加之后的顯示區(qū)域,這樣一來就直觀很多疫铜。另外一種則是將功能都放到菜單里面茂浮,打開之后才能看到,雖然不直觀壳咕,但是界面更加簡潔席揽,某種程度上來說,干擾更小一點囱井。
不知道這兩款軟件設計的時候是怎么考慮的驹尼,但我覺得有一個很重要的因素是數(shù)據(jù)趣避,用戶中庞呕,使用圖片的人數(shù),頻率到底有多少程帕,語音呢住练,文件呢,如果比例較少愁拭,是否值得為了這一部分人犧牲其他用戶的體驗讲逛。另一個問題是,如果藏在菜單中岭埠,用戶會不會有一種思維慣性盏混,覺得這款應用沒有這個功能,等到真正需要的時候惜论,不是去菜單里面找许赃,而是直接使用另外一款明確表示有這個功能的。這個我暫時沒找到答案馆类,如果有想法的請告訴我一聲混聊,謝謝。

另外補充一點乾巧,google keep句喜,滴答预愤,印象筆記,onenote都是將大部分功能隱藏的咳胃,當然植康,形式各不相同。但都不像奇妙清單這樣直接展現(xiàn)出來的展懈。

功能還可以用手勢來觸發(fā)向图,滴答的手勢就挺有意思。滴答清單針對一個任務可以有四種手勢标沪,左右兩個方向榄攀,長滑和短滑,對應的可以觸發(fā)四種不同的操作金句,這對我有不少的啟發(fā)檩赢,新版的還加了一個在完成時間上長按再滑動,可以設置完成進度违寞。不過我去官網(wǎng)翻了一下評論贞瞒,好像用戶不怎么喜歡。

這一篇雖然說是總結(jié)趁曼,但其實還遠遠不夠军浆,只是將我最近分析的一些東西做了歸納,比如導航可以是怎么樣的挡闰,功能可以是怎么設計的乒融,手勢和動效也是很重要的部分,這里沒怎么詳細講摄悯,一來是我自己不熟悉赞季,二來是展示的方法比較麻煩。
還有一個體會就是奢驯,脫離用戶角色申钩,產(chǎn)品定位來講交互設計其實是很虛的,實際使用中情況往往復雜得多瘪阁。

以上撒遣。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市管跺,隨后出現(xiàn)的幾起案子义黎,更是在濱河造成了極大的恐慌,老刑警劉巖伙菜,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件轩缤,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機火的,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進店門壶愤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人馏鹤,你說我怎么就攤上這事征椒。” “怎么了湃累?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵勃救,是天一觀的道長。 經(jīng)常有香客問我治力,道長蒙秒,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任宵统,我火速辦了婚禮晕讲,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘马澈。我一直安慰自己瓢省,他們只是感情好,可當我...
    茶點故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布痊班。 她就那樣靜靜地躺著勤婚,像睡著了一般。 火紅的嫁衣襯著肌膚如雪涤伐。 梳的紋絲不亂的頭發(fā)上馒胆,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天,我揣著相機與錄音废亭,去河邊找鬼国章。 笑死,一個胖子當著我的面吹牛豆村,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播骂删,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼掌动,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了宁玫?” 一聲冷哼從身側(cè)響起粗恢,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎欧瘪,沒想到半個月后眷射,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年妖碉,在試婚紗的時候發(fā)現(xiàn)自己被綠了涌庭。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡欧宜,死狀恐怖坐榆,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情冗茸,我是刑警寧澤席镀,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站夏漱,受9級特大地震影響豪诲,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜挂绰,卻給世界環(huán)境...
    茶點故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一跛溉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧扮授,春花似錦芳室、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至荔仁,卻和暖如春伍宦,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背乏梁。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工次洼, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人遇骑。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓卖毁,卻偏偏與公主長得像,于是被迫代替她去往敵國和親落萎。 傳聞我的和親對象是個殘疾皇子亥啦,可洞房花燭夜當晚...
    茶點故事閱讀 44,781評論 2 354

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