一個(gè)工具的設(shè)計(jì)討論(一)-方片收集

前言

設(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é)制条篷、純粹。

APP啟動(dòng)頁

主界面

主界面

沒有顯示狀態(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)

方片收集官方網(wǎng)站:funp.in

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末束析,一起剝皮案震驚了整個(gè)濱河市艳馒,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌员寇,老刑警劉巖弄慰,帶你破解...
    沈念sama閱讀 218,386評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異蝶锋,居然都是意外死亡陆爽,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門扳缕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來慌闭,“玉大人,你說我怎么就攤上這事躯舔÷刻蓿” “怎么了?”我有些...
    開封第一講書人閱讀 164,704評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵粥庄,是天一觀的道長丧失。 經(jīng)常有香客問我,道長飒赃,這世上最難降的妖魔是什么利花? 我笑而不...
    開封第一講書人閱讀 58,702評(píng)論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮载佳,結(jié)果婚禮上炒事,老公的妹妹穿的比我還像新娘。我一直安慰自己蔫慧,他們只是感情好挠乳,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,716評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般睡扬。 火紅的嫁衣襯著肌膚如雪盟蚣。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,573評(píng)論 1 305
  • 那天卖怜,我揣著相機(jī)與錄音屎开,去河邊找鬼。 笑死马靠,一個(gè)胖子當(dāng)著我的面吹牛奄抽,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播甩鳄,決...
    沈念sama閱讀 40,314評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼逞度,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了妙啃?” 一聲冷哼從身側(cè)響起档泽,我...
    開封第一講書人閱讀 39,230評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎揖赴,沒想到半個(gè)月后馆匿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體撒遣,經(jīng)...
    沈念sama閱讀 45,680評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,873評(píng)論 3 336
  • 正文 我和宋清朗相戀三年振坚,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了羊娃。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,991評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡钩杰,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情羽历,我是刑警寧澤,帶...
    沈念sama閱讀 35,706評(píng)論 5 346
  • 正文 年R本政府宣布淡喜,位于F島的核電站秕磷,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏炼团。R本人自食惡果不足惜澎嚣,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,329評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望瘟芝。 院中可真熱鬧易桃,春花似錦、人聲如沸锌俱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至造寝,卻和暖如春磕洪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背诫龙。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評(píng)論 1 270
  • 我被黑心中介騙來泰國打工析显, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人签赃。 一個(gè)月前我還...
    沈念sama閱讀 48,158評(píng)論 3 370
  • 正文 我出身青樓谷异,卻偏偏與公主長得像,于是被迫代替她去往敵國和親姊舵。 傳聞我的和親對(duì)象是個(gè)殘疾皇子晰绎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,941評(píng)論 2 355

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

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,139評(píng)論 25 707
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 46,761評(píng)論 22 665
  • 姓名:巢環(huán)環(huán) 公司:寧波大發(fā)化纖有限公司 期數(shù):第264期六項(xiàng)精進(jìn) 組名:努力一組 【日精進(jìn)打卡第13天】共13天...
    巢環(huán)環(huán)閱讀 131評(píng)論 0 0
  • php usleep() 函數(shù)延遲代碼執(zhí)行若干微秒。 unpack() 函數(shù)從二進(jìn)制字符串對(duì)數(shù)據(jù)進(jìn)行解包括丁。 uni...
    思?jí)鬚HP閱讀 1,984評(píng)論 1 24
  • 昨天帶孩子出去玩荞下,在商場(chǎng)里有個(gè)小游樂場(chǎng),女兒看到里面有很多小朋友也想進(jìn)去史飞,可是自己又不敢去尖昏,最后我陪著她進(jìn)去,她喜...
    素素如水閱讀 129評(píng)論 0 0