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

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

拋開前期的流程設計和框架,最后用戶能比較直觀感受到的不外乎三點,一是應用的層次,二是信息的展現,三是功能的可見性。層次其實也可以理解為導航,用戶是怎么在應用的所有內容之間切換的。信息展示,是用列表,用卡片,什么需要展現,什么可以暫時隱藏。功能方面跟信息展示是一個意思,只是一個是內容,一個是操作。這三個是我自己為了方便描述分出來的,可能不是很嚴謹。
下面就從這三個方面來講記事類應用的設計。

1、層級

清單類或者記事類,本身的作用就是幫助用戶整理信息,所以不可避免的會有多個層級,根據產品的定位不同,可以有便簽類、清單類、記事類等。像清單類的,可以有文件夾--清單--任務--子任務,記事的像onenote,有筆記本--分區--頁面三個層級。google keep的層級比較扁平,主要是通過添加便簽和顏色進行區分。還有的是通過時間來管理,因為任務往往會對應一個時間。

這類應用的特點就是,(1)單個信息量小,信息總量大,不大的話還需要應用來協助管理嗎,(2)內容個性化,難以自動歸類,一千個用戶有一千種形式的記錄。
信息量方面,不少應用都做得不錯,也各有特點,一會簡單介紹一下。個性化方面,一個是自定義列表或清單,一個是添加標簽,顏色,還有就是利用好搜索功能。
下面來看例子。


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

三個比較典型的導航的例子,第一個是側邊欄,使用比較普遍,當然,也就顯得比較普通了,好處是進入應用后直接看到任務,缺點就是如果需要在清單之間頻繁切換,體驗可能不是很好,特別是手勢方面沒有其他優化的時候。第二個可以算是列表式或者內容式導航,名稱不重要,能說明白就行。好處壞處和第一個相反,不能直接看到任務,但是簡單的點點點比側邊欄切換好一點,而且在奇妙清單中,從任務返回列表,可以通過在屏幕任意地方右滑,方便得多。第三個比較特別,也是挺有意思的一個設計,算是側邊欄的變形,但是不能在左邊緣拉出,只能通過左上角點擊,效率算不上好,但是切換的動效,還有形式確實讓我眼前一亮,所以列出來做參考。

除了這三個,還有onenote典型的多級導航,打開之后默認在筆記本的頁面,然后你需要依次點擊分區,頁面,再到記事的內容。印象筆記也是,不過少了一層分區。這樣的設計,對于那些內容比較多的用戶來說很受用,不過,可能更適合于pc端。

2、信息展示

記事類另一個很重要的特點就是現實隱喻,即使現在電子化很方便,各種記錄交流都可以在電腦和手機上完成,但紙質的記錄還是挺多的,某些情況下,紙質的記錄和查看比電子方便得多。所以在設計應用的時候,怎么從現實中得到靈感,又怎么體現現實中不具備的優點,都是需要考慮的,信息展示就是其中很重要的一塊。

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

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

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

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


3、功能

記事類的應用,因為層級關系多,信息類型多,所以相應的功能的設計也需要好好考慮。這里我們不討論功能該不該做,只討論應該怎么做。思路也比較簡單,一是減少其他功能的展現,讓用戶專注于文字,將干擾減少。二是盡可能將功能都展現出來,提醒用戶可以進行操作。比如下面這個例子。

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

一種是直接在內容中提示用戶,提示所在的區域同時也是功能的觸發區,而且也是添加之后的顯示區域,這樣一來就直觀很多。另外一種則是將功能都放到菜單里面,打開之后才能看到,雖然不直觀,但是界面更加簡潔,某種程度上來說,干擾更小一點。
不知道這兩款軟件設計的時候是怎么考慮的,但我覺得有一個很重要的因素是數據,用戶中,使用圖片的人數,頻率到底有多少,語音呢,文件呢,如果比例較少,是否值得為了這一部分人犧牲其他用戶的體驗。另一個問題是,如果藏在菜單中,用戶會不會有一種思維慣性,覺得這款應用沒有這個功能,等到真正需要的時候,不是去菜單里面找,而是直接使用另外一款明確表示有這個功能的。這個我暫時沒找到答案,如果有想法的請告訴我一聲,謝謝。

另外補充一點,google keep,滴答,印象筆記,onenote都是將大部分功能隱藏的,當然,形式各不相同。但都不像奇妙清單這樣直接展現出來的。

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

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

以上。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,182評論 6 543
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,489評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,290評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,776評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,510評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,866評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,860評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,036評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,585評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,331評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,536評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,058評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,754評論 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,154評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,469評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,273評論 3 399
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,505評論 2 379

推薦閱讀更多精彩內容