亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

寫給程序猿們的交互設(shè)計(jì)

系統(tǒng) 1729 0

寫給程序猿們的交互設(shè)計(jì)

編者按:看到此文時(shí)恍惚回到自己學(xué)習(xí)網(wǎng)頁的時(shí)候,那時(shí)候只知有編程,不知有設(shè)計(jì)。各個(gè)論壇大部分時(shí)候討論的也是如何用 Frame 實(shí)現(xiàn)頁面的分區(qū),如何做出圓角,以及寫一大段 javascript 代碼或者做個(gè) flash 只為讓頁面看起來更眩一點(diǎn)。后來 css1.0, 2.0 陸續(xù)出現(xiàn),html 4.0 4.1 以及如今的 html 5 也逐漸淘汰掉了表現(xiàn)樣式的標(biāo)簽。視覺傳達(dá)思想開始陸續(xù)進(jìn)入程序猿與產(chǎn)品經(jīng)理的視線,從網(wǎng)頁到現(xiàn)在的 APP,經(jīng)歷過野蠻生長階段后,只有那些功能與視覺傳達(dá)同樣優(yōu)秀的產(chǎn)品才能笑到最后。

2007 年蘋果給業(yè)界帶來了耳目一新的感覺,之后無數(shù) APP 展現(xiàn)了幾乎無限的讓人驚艷的新概念,但是,不是每一個(gè)新奇的想法都能被稱作設(shè)計(jì)。設(shè)計(jì)師需要經(jīng)過嚴(yán)格訓(xùn)練,才能把想法轉(zhuǎn)化為最終的設(shè)計(jì),而在整個(gè)轉(zhuǎn)化過程中,無數(shù)的想法是經(jīng)不起仔細(xì)推敲的。設(shè)計(jì)師更多的時(shí)候在觀察生活,觀察自然,靈感不是隨時(shí)就有,但是一個(gè)經(jīng)過嚴(yán)格訓(xùn)練的設(shè)計(jì)師可以把普通的生活細(xì)節(jié)經(jīng)過加工融入設(shè)計(jì),最終打造出合格甚至優(yōu)秀的產(chǎn)品。

本文作者 Pasquale D'Silva 是 Elepath 的一位交互設(shè)計(jì)師兼產(chǎn)品設(shè)計(jì)師,在本文中,他從交互的角度闡釋了優(yōu)秀的設(shè)計(jì)應(yīng)該具有的一些品質(zhì),或者說,優(yōu)秀的產(chǎn)品該如何實(shí)現(xiàn)與用戶的自然溝通。

  不得不說,有太多程序猿或者美工(注意,是美工,真正的設(shè)計(jì)師不會(huì)這么干)誤把技術(shù)當(dāng)藝術(shù)、把漂亮當(dāng)設(shè)計(jì)了,真正重要的交互部分反而被忽略,你可以看看,一大批的產(chǎn)品都是近乎靜態(tài)的,許多操作詭異至極,諸如你想添加一個(gè)條目到列表里,它就生硬的出現(xiàn)在那;你想刪除,它就直接消失。這樣的產(chǎn)品經(jīng)理,你們到底有沒有考慮過用戶的感受,有沒有考慮過產(chǎn)品的感受,這種完全不合邏輯的東西也虧你們做的出。

  當(dāng)然,還有一部分產(chǎn)品是有交互的,但是,悲哀的是,那些交互完全被用作另一種形式的美化,天才知道那些人在想什么。

  交互真正革命性的意義在于,它把時(shí)間這一魔幻般的屬性帶入靜態(tài)的產(chǎn)品之中,通過對動(dòng)作、速度、顯現(xiàn)等等的定義,讓產(chǎn)品的操作體現(xiàn)出真實(shí)感,使得用戶能自然而然的理解每一個(gè)動(dòng)作的含義。不過這不是那些高中時(shí)候整天泡妞、看不起書呆子的人能理解的。

一些簡單的例子

  這些例子的目的是向各位讀者介紹動(dòng)畫的精髓,告訴各位讀者時(shí)間軸和空間對于動(dòng)畫意義。而動(dòng)畫對于交互的意義不言而喻。

  例:緩沖效果

  以下三個(gè) demo 展示了在最傳統(tǒng)的動(dòng)畫中,如何通過控制關(guān)鍵幀來控制整個(gè)動(dòng)畫的效果。

寫給程序猿們的交互設(shè)計(jì)

寫給程序猿們的交互設(shè)計(jì)

寫給程序猿們的交互設(shè)計(jì)

  在這三段 25 幀的動(dòng)畫中,設(shè)計(jì)師只需要定義第一幀、最后一幀和關(guān)鍵幀(第 13 幀),其余 22 幀由計(jì)算機(jī)自動(dòng)填充,但是,計(jì)算機(jī)沒想像中那么聰明,它只能線性的填充空白幀。優(yōu)秀的動(dòng)畫師和動(dòng)作設(shè)計(jì)師需要花費(fèi)大量時(shí)間來學(xué)會(huì)如何控制計(jì)算機(jī)按照自己設(shè)計(jì)的效果工作。有興趣的讀者可以自己做些實(shí)驗(yàn),本文重點(diǎn)在于闡述概念,所以不著過多筆墨于技術(shù)方面。

另一些稍復(fù)雜的例子:交互動(dòng)畫所能營造的真實(shí)感

  這些例子的目的在于告訴設(shè)計(jì)師們,交互所能代替的一些舊功能以及實(shí)現(xiàn)以前所不能做到的功能。

  例一插入元素

  以下是三個(gè)關(guān)于向列表里添加/刪除元素的 demo,來展示不同的交互動(dòng)畫所產(chǎn)生的效果

寫給程序猿們的交互設(shè)計(jì)

寫給程序猿們的交互設(shè)計(jì)

寫給程序猿們的交互設(shè)計(jì)

  Demo 1 沒有進(jìn)行任何加工,既生硬又粗糙,不能給人以任何自然的感覺。

  Demo 2 添加了一些關(guān)鍵幀使得添加的動(dòng)作順暢了很多,這樣的動(dòng)畫已經(jīng)能給用戶一些暗示了。

  最后一個(gè) demo 是最貼合自然狀態(tài)的,就象我們平時(shí)把一本書插入書架一樣,需要先騰出空間,然后再插入/取出。

  例一最后一個(gè) demo 的設(shè)計(jì)讓人一目了然,因?yàn)檫@和生活中的動(dòng)作完全相似,用戶不需要其他提示就知道這樣的動(dòng)作所代表的含義。這樣的交互動(dòng)作在之前的非觸摸屏上沒有多大用處,但對于如今遍地的 APP 意義重大。

  例二展開/彈出菜單

  同樣是三個(gè) demo,分別展示不同的展開效果所帶來的不一樣的感覺。

寫給程序猿們的交互設(shè)計(jì)

寫給程序猿們的交互設(shè)計(jì)

寫給程序猿們的交互設(shè)計(jì)

  第一個(gè)是最典型的展開樣式,但是不具有體驗(yàn)上的一致性,這個(gè)動(dòng)作在現(xiàn)實(shí)中并不存在,所以沒有辦法讓用戶輕易的明白它的含義。

  再觀察下第二個(gè),這樣的樣式是不是給了你更多的信息?

  最后一個(gè)樣式可以使關(guān)鍵內(nèi)容突出,可以用來表示強(qiáng)調(diào)。

  切記,不要試圖把多種樣式放在一個(gè)產(chǎn)品/功能中,這樣會(huì)導(dǎo)致用戶不明所以的。

  例二后兩個(gè) demo 的設(shè)計(jì)可以代替老式導(dǎo)航欄,用戶可以很容易記得自己的動(dòng)作,從而知道自己所處的位置。

  當(dāng)然,所有的例子都不是萬金油,需要視情況而使用。放在這里的目的只是讓大家明白,干凈利落但是邏輯性強(qiáng)的動(dòng)畫對于改善產(chǎn)品體驗(yàn)的作用。

  想要更多的了解動(dòng)畫在具體產(chǎn)品中的效果,可以體驗(yàn)下? Thinglist ,這是我與 Kyle Bragger 合作為 Elepath 開發(fā)的一款產(chǎn)品。下圖是該 APP 關(guān)于如何加載內(nèi)容的示范。

寫給程序猿們的交互設(shè)計(jì)

動(dòng)作化界面的設(shè)計(jì)原則

  你明白的,我不能把很具體的產(chǎn)品名字些在這,但是,有些產(chǎn)品的確是走極端了,一種是界面極端漂亮但沒有一點(diǎn)交互,另一種是拿交互動(dòng)畫當(dāng)裝飾完全失去交互的本質(zhì)。所以我列出以下幾項(xiàng)原則來定義真正的交互:

  一、 動(dòng)畫干凈利落

  二、 節(jié)奏一致、過渡自然

  有些人的想法讓我很無語,他們從不認(rèn)為可以添加時(shí)間元素到界面中。難道,你們不知道交互能提供更多更有用的信息給用戶么,還是你們覺得這樣做對你們來說太復(fù)雜了?

寫給程序猿們的交互設(shè)計(jì)


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系: 360901061

您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會(huì)非常 感謝您的哦!!!

發(fā)表我的評(píng)論
最新評(píng)論 總共0條評(píng)論
主站蜘蛛池模板: 狠狠躁夜夜躁人人爽天天不 | 亚洲国产高清视频在线观看 | 亚洲视频一二区 | 国产成人精品高清不卡在线 | 国产欧美一区二区三区观看 | 五月天综合久久 | 在线免费观看毛片 | 日本免费的一级绿象 | 国产欧洲亚洲 | 精品国产精品 | 亚洲精品123区在线观看 | 色噜噜狠狠狠狠色综合久一 | 黄色毛片视频免费 | 久久两性 | 尹人久久久香蕉精品 | 国产一区二区精品久久91 | 久久精品国产欧美 | 99热久久精品首页 | 人人干视频在线观看 | 四虎在线精品 | 在线观看精品91老司机 | 亚洲va久久久久综合 | 日韩欧美亚洲一区 | 亚洲偷图色综合色就色 | 亚洲精品久久久久久动漫剧情 | 高清视频一区二区 | 亚洲视屏在线观看 | 久久精品国产精品亚洲精品 | 亚洲国产中文字幕在线观看 | 久久久精品久久久久久久久久久 | 高清久久 | 日韩国产一区二区 | 在线a人片免费观看国产 | 伊人色强在线网 | 91精品国产手机 | 国产真实自拍 | 日本色吧 | 伊在人亚洲香蕉精品播放 | 国产综合婷婷 | 亚洲伊人色一综合网 | 中文字幕视频免费在线观看 |