前言
設(shè)計(jì)師要找各種素材者冤,比較流行的都是去各種設(shè)計(jì)社區(qū)肤视、資源網(wǎng)站。比如behance涉枫、pinterest邢滑、dribble……
設(shè)計(jì)師不僅要看很多素材愿汰,好的素材還要收藏困后、整理、保存衬廷。所以一個(gè)好的收集工具還是需要的摇予,對(duì)我而言還沒有完美的收集工具。pinterest吗跋、behance侧戴、dribble收集圖片很好,但畢竟是國外的跌宛,偶爾訪問不了酗宋、訪問速度慢也是很正常的事情,畢竟沒有被墻就已經(jīng)很萬幸了疆拘。
方片收集
最近發(fā)現(xiàn)的一款收集工具蜕猫,類似于pinterest,可以通過安裝瀏覽器插件哎迄、iOS APP回右、Android APP隆圆,從瀏覽器、手機(jī)APP中進(jìn)行文字翔烁、圖片渺氧、視頻的收集。由于剛推出不久租漂,功能還在慢慢完善阶女。值得設(shè)計(jì)師嘗試颊糜。
這是國內(nèi)團(tuán)隊(duì)用心設(shè)計(jì)開發(fā)的工具哩治,支持一下國產(chǎn)。不要整天用一堆英文工具來裝逼了(說英語衬鱼,村口的老大媽來聽不懂业筏,不如學(xué)門方言),好好使用中文工具才是以用戶為中心的設(shè)計(jì)師鸟赫。
廢話不多說蒜胖,看一下這個(gè)工具的設(shè)計(jì)。大家有興趣可以使用一下這個(gè)工具抛蚤,幫助這個(gè)工具一起完善(官方鏈接在頂部和底部台谢,或者點(diǎn)擊圖片也可以打開鏈接)。
APP(iOS)
啟動(dòng)頁
啟動(dòng)頁采用一個(gè)加號(hào)按鈕岁经,與APP內(nèi)的加號(hào)按鈕一致朋沮,這樣的設(shè)計(jì)保持了啟動(dòng)頁簡單、把重要功能預(yù)先展示給用戶缀壤、產(chǎn)生加載的快捷感樊拓。這樣的設(shè)計(jì)在其他的APP(instergram)上也采用過,不是什么獨(dú)創(chuàng)的方式塘慕,但是能看出設(shè)計(jì)的用心和考慮筋夏。
從頁面本身的簡潔上就能看出整個(gè)APP的設(shè)計(jì)追求簡潔的用戶體驗(yàn),開場(chǎng)的設(shè)計(jì)就預(yù)示了整個(gè)APP的功能和風(fēng)格图呢,并且很節(jié)制条篷、純粹。
主界面
沒有顯示狀態(tài)欄蛤织,沒有標(biāo)題欄(工具欄)赴叹。
頂欄使用搜索欄,搜索欄沒有使用iOS默認(rèn)的搜索框樣式瞳筏,而是采用了自行設(shè)計(jì)的式樣稚瘾。
底欄放置了三個(gè)按鈕,對(duì)應(yīng)為應(yīng)用設(shè)置姚炕、添加記錄摊欠、歷史剪貼板丢烘。使用透明度懸浮于內(nèi)容之上,沒有使用標(biāo)簽欄進(jìn)行導(dǎo)航些椒。
應(yīng)用設(shè)置和歷史剪貼板都使用的懸浮窗播瞳,使用縮放動(dòng)畫,兩個(gè)窗口都只能通過窗口的關(guān)閉按鈕進(jìn)行關(guān)閉回到主界面免糕。所以這兩個(gè)按鈕并不是實(shí)現(xiàn)頁面的切換赢乓,而是呼出主界面上的懸浮窗口。
最近新版本加入了分類功能(后續(xù)有詳細(xì)的使用分析)石窑,沒有使用懸浮窗牌芋。而是使用側(cè)滑邊欄,使用左劃和右劃手勢(shì)進(jìn)行展開和關(guān)閉松逊。
問題:
1:當(dāng)我們?cè)谡務(wù)撃J教善ā⒁?guī)范的時(shí)候,想到了要使用標(biāo)簽欄经宏、工具欄犀暑。但是方片收集并沒有使用這些模式規(guī)范,而是使用一種自由設(shè)計(jì)的方式烁兰。底欄的三個(gè)按鈕對(duì)應(yīng)了三個(gè)重要的操作耐亏,并且由于不是一般意義上頁面導(dǎo)航切換,使用標(biāo)簽欄也不適合沪斟。也許隨著方片收集以后功能層級(jí)和頁面的增多广辰,還是會(huì)采用標(biāo)簽欄來進(jìn)行導(dǎo)航,但是現(xiàn)在的功能和頁面币喧,使用三個(gè)分隔對(duì)齊的按鈕也不錯(cuò)轨域。
2:三個(gè)按鈕懸浮于內(nèi)容之上,理論上這樣對(duì)瀏覽內(nèi)容造成了一定的影響杀餐,或許可以使用自動(dòng)隱藏避免影響干发。但是在實(shí)際的使用中并不會(huì)對(duì)瀏覽形成障礙,因?yàn)檫@三個(gè)按鈕使用了透明效果史翘、顏色使用灰度枉长、并且采用獨(dú)立分隔形式,雖然不是完整隱藏琼讽,但是對(duì)瀏覽的影像基本可以忽略必峰。使用類似Safari這樣的自動(dòng)隱藏和浮現(xiàn)還是使用方片這樣的效果存在細(xì)微的差別,實(shí)際體驗(yàn)好都沒問題钻蹬。
3:切換與疊加的問題『鹨希現(xiàn)在都說盡量避免使用模態(tài)窗口,在iOS中基本只有彈出警告和重要提示(鬧鐘)才會(huì)使用彈出窗口(控制中心、通知中心使用上拉下拉窗)肝匆。在系統(tǒng)應(yīng)用的和系統(tǒng)設(shè)置中基本沒有粒蜈,而是用深入式的頁面切換∑旃可以說iOS中使用頁面切換而避免使用頁面疊加枯怖,或者說扁平化的設(shè)計(jì)是盡量保證在面前的是一個(gè)單層的頁面,而不是從再這個(gè)單層頁面上彈出能曾、浮出另一個(gè)層的頁面度硝。即使要顯示額外的內(nèi)容(菜單)也是使用嵌入式或滑出懸浮窗,而不是懸浮式小窗口的寿冕。但是在Android中蕊程,基本上那三個(gè)小圓點(diǎn),下意識(shí)就認(rèn)為是要彈出懸浮窗了蚂斤。
一定要避免彈出懸浮窗嗎存捺?微信(iOS)就在添加按鈕使用了懸浮窗,體驗(yàn)不好嗎曙蒸?所以理論上的糾結(jié)還是要看實(shí)際的效果,讓用戶簡單岗钩、準(zhǔn)確的完成任務(wù)即可纽窟。至于設(shè)計(jì)的模式方法,還是看效果兼吓。
在方片收集中從歷史剪貼板中直接拖入內(nèi)容即可新建記錄臂港,所以浮動(dòng)也是一種不錯(cuò)的解決方法。但使用嵌入層或者切換到新頁面视搏,也不是說不能實(shí)現(xiàn)從剪貼板中快速的新建記錄审孽。我個(gè)人也覺得使用嵌入層或新頁面是一種更好的方式,并且不使用拖動(dòng)手勢(shì)(老生常談要避免在智能手機(jī)上使用拖動(dòng)浑娜,誰愛在智能手機(jī)上拖來拖去嗎佑力?游戲除外)。在一個(gè)新頁面中能夠更完整的瀏覽歷史剪貼板筋遭,并且沒有主頁面內(nèi)容的干擾打颤。通過剪貼板新建新紀(jì)錄時(shí)也可以進(jìn)行更多的設(shè)置,當(dāng)然也會(huì)增加步驟漓滔。我這樣的設(shè)計(jì)傾向于慢编饺、完整、準(zhǔn)確的操作响驴,而方片收集追求的是快捷透且、方便。所以這又回到一個(gè)關(guān)于效率與準(zhǔn)確性的矛盾之中豁鲤。
4:一致性的問題秽誊。應(yīng)用設(shè)置和剪貼板使用懸浮窗罕邀,而分類目錄使用滑動(dòng)側(cè)欄。并且懸浮窗只能使用關(guān)閉按鈕進(jìn)行關(guān)閉养距,側(cè)欄使用手勢(shì)展開和關(guān)閉诉探。看上去棍厌,同樣是在一個(gè)頁面上顯示內(nèi)容而使用兩種不同的方式破壞了體驗(yàn)的一致性肾胯,所以我個(gè)人傾向這三個(gè)建立在主頁面上的頁面使用同樣的交互方式。和現(xiàn)在的方式有多大的區(qū)別嗎耘纱?沒有敬肚,只不過滿足一下我對(duì)于一致性的強(qiáng)迫癥吧。
(待續(xù))
新建記錄界面
分類功能使用體驗(yàn)
瀏覽器端收集體驗(yàn)
瀏覽器端編輯體驗(yàn)