首頁

一個(gè) npm 包的坎坷“續(xù)命”之生

seo達(dá)人

如果說 npm 的大新聞,莫過于之前的 left-pad 撤包事件,event-stream 投毒事件,Ant Design 彩蛋事件。使得很多前端開發(fā)者又開始重新思考 npm 生態(tài)時(shí)候真的存在問題?



今天我們文章的主角是 memwatch,一個(gè)用來幫助我們檢查 Node.js 是否存在內(nèi)存泄漏的庫,和這個(gè)庫傳奇的一生。



2012 年 02 月 06 日,一位 Mozilla 的工程師 lloyd 創(chuàng)建了這個(gè)庫,并寫了一篇博文“Is My NodeJS Program Leaking?”(我的 Node.js 程序是否存在內(nèi)存泄漏?)。這個(gè)包最初被命名為 gcstats,代碼上傳到了 github。



6 月 27 日,npm 包改名為 memwatch,發(fā)布 0.1.1 版。



7 月 4 日,lloyd 為這個(gè)庫添加了開源許可協(xié)議:WTFPL,發(fā)布 0.1.2 版。很多人對這個(gè)開源許可協(xié)議可能比較陌生,WTFPL 的全稱是 Do What The Fuck You Want To Public License,中文譯名:你他媽的想干嘛就干嘛公共許可證。也許就是這份協(xié)議開啟了 memwatch 庫不尋常的一生。



2013 年 3 月 14 日,作者 lloyd 提交了最后一次代碼,發(fā)布了 0.2.2 版本。支持的 Node.js 版本為 0.6.0。隨后這個(gè)庫再也沒有更新過。



從作者的博文和推文可以看到,作者在 2014 年離開了 Mozilla。而從作者的 github 動(dòng)態(tài)更可以看出,作者應(yīng)該是轉(zhuǎn)入了 golang 陣營。



2014 年 6 月 28 日,作者的一位前同事 deepak1556 fork 了這個(gè)庫,增加了對 Node.js 0.11 的支持,并發(fā)起了合并請求。但是作者并沒有回復(fù),也沒有合并此次請求。此時(shí)距離原作者放棄這個(gè)庫也已經(jīng)過去一年多了。



2015 年 2 月 7 日,marcominetti 又 fork 了 deepak1556 的庫,增加了對 Node.js 0.12 的支持,并向原庫發(fā)起了合并請求,同樣沒有得到作者的任何回復(fù)。于是 marcominetti 決定自立門戶,于是將 memwatch 改名為 memwatch-next 發(fā)布到了 npm。



2017 年 1 月 27 日,如同前兩位維護(hù)者一樣,marcominetti 也最終放棄了繼續(xù)更新這個(gè)庫。到此時(shí),此庫支持的 Node.js 版本為 4、5、6。



2018 年 5 月 6 日,eduardbcom 又 fork 了 marcominetti 的庫,增加了 Node.js 9 的支持,并且放棄了對 Node.js 9 以下所有版本的支持。改名為 node-memwatch 并發(fā)布到了 npm。隨后再也沒有更新過代碼。



2018 年 7 月 17 日,一位開發(fā)者 dyatko 又 fork 了 eduardbcom 的庫,增加了對 Node.js 8 的支持,并向原庫發(fā)起了合并請求,同樣沒有得到作者的任何回復(fù)。



但在此次 pr 的評論中,另一位開發(fā)者說,airbnb 也 fork 了 marcominetti 的庫,并改名為 @airbnb/node-memwatch 發(fā)布到了 npm。



有了大廠接手,也算是這個(gè)庫最終的歸宿吧。







相關(guān)閱讀



開發(fā)者對 npm 公司不滿,unpublish 了自己的所有模塊



月下載量千萬的 npm 包被黑客篡改,Vue 開發(fā)者可能正在遭受攻擊



駁《我不是很懂 Node.js 社區(qū)的 DRY 文化》



機(jī)器人偽裝成人類在 GitHub 上為開源項(xiàng)目修復(fù) bug




兩欄布局

seo達(dá)人

兩列布局的幾種方法

html結(jié)構(gòu)

 <div class="content">

      <div class="content-left">

        左側(cè)固定200px

      </div>

      <div class="content-right">

        右側(cè)自適應(yīng)

      </div>

 </div>



1.通過float和margin-left

 / 清除瀏覽器默認(rèn)邊距 /

      {

        margin: 0;

        padding: 0;

      }



      .content{

        overflow: hidden;

      }

      /
脫離文檔流 /

      .content-left {

        float: left;

        width: 200px;

        height: 200px;

        background: red;

      }



      .content-right {

        /
通過margin-left將左邊位置空出 /

        margin-left: 200px;

        background: blue;

        height: 200px;

      }



2.通過 position: absolute;絕對定位

 /
清除瀏覽器默認(rèn)邊距 /

     
{

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

        position: relative;

      }

      / 脫離文檔流 /

      .content-left {

        position: absolute;

        top: 0;

        left: 0;

        width: 200px;

        height: 200px;

        background: red;

      }



      .content-right {

        / 通過margin-left將左邊位置空出 /

        margin-left: 200px;

        background: blue;

        height: 200px;

      }



3.通過flex彈性布局

/ 清除瀏覽器默認(rèn)邊距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

        display: flex;

      }

      .content-left {

          /
除了width: 200px;還可以flex-basis: 200px; /

        width: 200px;

        height: 200px;

        background: red;

      }



      .content-right {

          /
flex:1;將剩余空間分給它 /

        flex: 1;

        background: blue;

        height: 200px;

      }



4.通過 display: table;表格布局

 /
清除瀏覽器默認(rèn)邊距 /

     
{

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

        display: table;

        / 必須給父級(jí)定寬不然自適應(yīng)盒子沒定寬只會(huì)由內(nèi)容撐開 /

        width: 100%;

      }

      .content-left {

        display: table-cell;

        width: 200px;

        height: 200px;

        background: red;

      }



      .content-right {

        display: table-cell;

        background: blue;

        height: 200px;

      }



5.通過inline-block和calc()函數(shù)

 / 清除瀏覽器默認(rèn)邊距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

        /
必須加font-size=0;把inline-block默認(rèn)間距去掉,

        不過設(shè)置后里面文字不顯示了可以給里面塊設(shè)置font-size:20px;

        或者把兩個(gè)塊之間的換行刪掉也能去掉間距/

        font-size: 0;

        overflow: hidden;

      }

      .content-left {

        font-size: 20px;

        display: inline-block;

        width: 200px;

        height: 200px;

        background: red;

      }



      .content-right {

        font-size: 20px;

        display: inline-block;

        background: blue;

        height: 200px;

        /
注意calc里的運(yùn)算符兩邊要有空格 /

        width: calc(100% - 200px);

      }



6.通過float和calc()函數(shù),左右兩塊都要浮動(dòng)

 /
清除瀏覽器默認(rèn)邊距 /

     
{

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

      }

      .content-left {

        float: left;

        width: 200px;

        height: 200px;

        background: red;

      }

      .content-right {

        float: left;

        background: blue;

        height: 200px;

        / 注意calc里的運(yùn)算符兩邊要有空格 /

        width: calc(100% - 200px);

      }



7.使用grid布局

 / 清除瀏覽器默認(rèn)邊距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

        display: grid;

        grid-template-columns: 200px 1fr;

        /
grid布局也有列等高的默認(rèn)效果。需要設(shè)置: align-items: start;。 /

        align-items: start;

      }

      .content-left {

        height: 200px;

        background: red;

        /
grid布局還有一個(gè)值得注意的小地方和flex不同:在使用margin-left的時(shí)候,

        grid布局默認(rèn)是box-sizing設(shè)置的盒寬度之間的位置。

        而flex則是使用兩個(gè)div的border或者padding外側(cè)之間的距離。 */

        box-sizing: border-box;

        grid-column: 1;

      }

      .content-right {

        background: blue;

        height: 200px;

        box-sizing: border-box;

        grid-column: 2;

      }



雙11大屏——情緒的超級(jí)機(jī)器

資深UI設(shè)計(jì)者

雙11所帶來的巨大能量與共振,需要一塊巨大的屏幕來承載這份共情——這并不是一條統(tǒng)計(jì)數(shù)據(jù),抑或一張圖表就可以完成的。

數(shù)據(jù)大屏的設(shè)計(jì)有什么不同?

數(shù)據(jù)大屏的設(shè)計(jì),并非是傳統(tǒng)意義上的設(shè)計(jì)師或產(chǎn)品經(jīng)理就能完成的。它需要將藝術(shù)家、科學(xué)家與企業(yè)家的能力集于一身,需要擁有對動(dòng)態(tài)數(shù)據(jù)的把握能力、對產(chǎn)業(yè)經(jīng)濟(jì)與供應(yīng)鏈的結(jié)構(gòu)方法、對社會(huì)議題的捕捉與構(gòu)造,以及宏觀的視野和細(xì)致入微的匠人用心。可視化讓冰冷的數(shù)據(jù)產(chǎn)生溫度。


1.雙11為什么需要數(shù)據(jù)大屏?


數(shù)據(jù)大屏是一個(gè)凝聚情緒的超級(jí)機(jī)器。

數(shù)據(jù)大屏不講述傳奇,它就是傳奇本身。



在這塊巨幕上,數(shù)據(jù)是公開透明的,它的變化在實(shí)時(shí)的體現(xiàn)著每一筆消費(fèi)的數(shù)字。每個(gè)人都能看到,也會(huì)被傳遞到全世界每個(gè)角落。雙11所帶來的巨大能量與共振,我們需要一塊巨大的屏幕來承載這份共情——這并不是一則新聞播報(bào)、一條統(tǒng)計(jì)數(shù)據(jù),抑或一張圖表就可以完成的。在這樣一個(gè)狂歡的日子里,手機(jī)、個(gè)人電腦、電視機(jī)這些面向個(gè)人的設(shè)備,全都需要融入到這個(gè)巨型的超級(jí)情緒機(jī)器之中。


2.導(dǎo)演、故事與設(shè)計(jì)


從宣傳與商業(yè)作戰(zhàn)的角度講,數(shù)據(jù)大屏需要兼顧故事性和震撼性兩重特點(diǎn)。通過故事腳本與內(nèi)容框架的設(shè)計(jì),讓觀眾層層抽絲撥繭,從表層的情緒,看到內(nèi)核的戰(zhàn)略。


1. 內(nèi)容規(guī)劃:故事與腳本設(shè)計(jì)

2019數(shù)據(jù)大屏的內(nèi)容框架大致分為三個(gè)層次。


情緒層:GMV的節(jié)節(jié)攀升滿足了媒體不斷推升的情緒高潮。在日益蕭條的國際環(huán)境中,中國的經(jīng)濟(jì)仍能屢創(chuàng)新高,每一位在雙11買買買的中國人背后是一種愛國主義與中國信心的體現(xiàn)。


業(yè)務(wù)層:阿里的自我表達(dá)。阿里經(jīng)濟(jì)體在城市中繼續(xù)深化的服務(wù)我們的消費(fèi)者,數(shù)據(jù)成為城市可持續(xù)發(fā)展的新資源;而商業(yè)操作系統(tǒng)隨著數(shù)字經(jīng)濟(jì)時(shí)代的到來,開始系統(tǒng)的服務(wù)我們的品牌與商家,在新的時(shí)代續(xù)寫“讓天下沒有難做的生意”。


戰(zhàn)略層:企業(yè)與國家發(fā)展同行。阿里的改變,反射了社會(huì)關(guān)系和社會(huì)結(jié)構(gòu)。點(diǎn)擊購物車就能買到全世界的東西,而對于國內(nèi)市場,精準(zhǔn)的人群定位、產(chǎn)業(yè)帶的建設(shè)都讓拉動(dòng)內(nèi)需變成一個(gè)大眾都能參與的事情。


2. 情緒規(guī)劃:情緒鏈路與鏡頭設(shè)計(jì)

依據(jù)數(shù)據(jù)表現(xiàn),雙11當(dāng)天的情緒高潮會(huì)集中0點(diǎn)和24點(diǎn)前后。24小時(shí)內(nèi),情緒的跌宕起伏,媒體向世界專遞著這種情緒。現(xiàn)場,根據(jù)數(shù)據(jù)和情緒的變化,我們開始導(dǎo)演數(shù)據(jù)大屏在不同的時(shí)間段出現(xiàn)的鏡頭:GMV的彎道超車緊張窒息,晚飯過后是觀看城市夜經(jīng)濟(jì)的最佳時(shí)機(jī),還有“買遍全球的購物車”、“小鎮(zhèn)青年”等進(jìn)20個(gè)鏡頭。


3. 核心理念:新商業(yè)文明是中國的彎道超車

為什么是彎道超車?

大航海時(shí)代是貿(mào)易全球化的開端,也是當(dāng)代中國繼續(xù)擴(kuò)大開放,用一帶一路、進(jìn)博會(huì)等等新模式,承接人類當(dāng)今世界發(fā)展的新格局所在?;ヂ?lián)網(wǎng)與移動(dòng)互聯(lián)時(shí)代的到來,讓中國得以彎道超車占據(jù)世界領(lǐng)先地位,而隨之到來的數(shù)字經(jīng)濟(jì)時(shí)代正式開始了人類歷史上的新商業(yè)文明。馬老師說:打造新商業(yè)文明的時(shí)機(jī)已經(jīng)到來。數(shù)字時(shí)代是我們面臨的最大機(jī)遇,這個(gè)新時(shí)代最大的風(fēng)險(xiǎn)就是錯(cuò)失機(jī)會(huì)。



我們將這個(gè)核心理念融入GMV大屏的設(shè)計(jì),正如逍遙子所說的那樣“消費(fèi)不是商業(yè)的終點(diǎn),通過消費(fèi)者來提升生產(chǎn)端生產(chǎn)契機(jī),優(yōu)化生產(chǎn)決策。”為此,我們導(dǎo)演了新商業(yè)文明的數(shù)據(jù)大戲:GMV屏中的賽道,3個(gè)鏡頭穿越了大航海時(shí)代、互聯(lián)網(wǎng)時(shí)代,數(shù)字經(jīng)濟(jì)時(shí)代彎道超車的新商業(yè)文明,快進(jìn)了商業(yè)文明的發(fā)展。

11.11當(dāng)天的數(shù)據(jù)也被融入其中,賽道上奔跑著餓了么、盒馬配送線和菜鳥的物流線,空中飄散的氣泡是實(shí)時(shí)產(chǎn)生的交易熱力。


△2019雙11數(shù)據(jù)大屏-GMV彎道超車&3個(gè)視角切換


3.雙11數(shù)據(jù)大屏設(shè)計(jì)概覽


1. GMV:11剁手鑄就中國信心

2019年,即使是在國際經(jīng)濟(jì)大環(huán)境衰退的今天,阿里的雙11仍舊創(chuàng)造了新的商業(yè)奇跡:2684億人民幣的GMV的背后,是中國人為了家庭與自己而歡樂剁手,也是中國消費(fèi)者面對全球大環(huán)境下對中國的強(qiáng)大信心。從2009年的電商大促,到11年后的全球狂歡節(jié),阿里伴隨著中國經(jīng)濟(jì)海洋的形成而不斷掀起巨浪。李克強(qiáng)總理就曾經(jīng)用雙11的銷售數(shù)據(jù),來解答那些對中國經(jīng)濟(jì)感到不解的人們,讓他們瞬間懂得中國經(jīng)濟(jì)是汪洋大海。


△2019雙11數(shù)據(jù)大屏-歷年GMV增速


2. 全球化:買遍全球的購物車

中國經(jīng)濟(jì)與中國消費(fèi)者的貢獻(xiàn),是對全球經(jīng)濟(jì)的貢獻(xiàn)。消費(fèi)者購物車?yán)锊刂篮蒙畹脑妇埃蜷_了世界消費(fèi)的新空間。天貓國際把來自全球78個(gè)國家和地區(qū)的品牌和商品帶進(jìn)中國,滿足消費(fèi)者的品質(zhì)消費(fèi)需求。買遍全球的購物車,更為世界經(jīng)濟(jì)增長貢獻(xiàn)拉動(dòng)力。越來越多國際品牌青睞中國市場,通過天貓國際滿足中國消費(fèi)者的需求。


△2019雙11數(shù)據(jù)大屏-全球化


3. 服務(wù)夜生活點(diǎn)亮城市夜經(jīng)濟(jì)地圖

隨著政策的推動(dòng),全國經(jīng)濟(jì)進(jìn)入夜生活消費(fèi)時(shí)代,大量的城市開始準(zhǔn)備成為一座座不夜城。在這個(gè)新的消費(fèi)增長領(lǐng)域,新商品、新商機(jī)、新消費(fèi)模式、新空間與新玩法都層出不窮。在未來,理解夜晚的中國,或許比理解白天的中國更為重要。


△2019雙11數(shù)據(jù)大屏-杭州經(jīng)濟(jì)體服務(wù)網(wǎng)絡(luò)


△2019雙11數(shù)據(jù)大屏-天貓商超網(wǎng)絡(luò)


△2019雙11數(shù)據(jù)大屏-杭州城市夜生活


4. 相信不起眼的改變:小鎮(zhèn)青年與那些你不知道的族群

14億的中國人口、巨大的地域差異與文化差異意味著,每一種類型的消費(fèi)人群都是海量的,都擁有現(xiàn)有經(jīng)濟(jì)理論所無法囊括的巨大潛力。小鎮(zhèn)青年、銀發(fā)一族、95后作為新消費(fèi)崛起的代表族群,正悄悄改變著社會(huì)的消費(fèi)結(jié)構(gòu)。通過數(shù)據(jù)我們清晰看到:族群的喜好千差萬別,數(shù)字化的新消費(fèi)使得商家能針對消費(fèi)者需求創(chuàng)造新供給。


△2019雙11數(shù)據(jù)大屏-新人群,新消費(fèi)


5. 品牌榜:千里江山圖

天貓創(chuàng)造的價(jià)值是真正支持品牌的數(shù)字化轉(zhuǎn)型,不僅僅贏得今天的業(yè)務(wù),更在于決勝未來。國潮席卷而來,智能商業(yè)魅力無限,全球供應(yīng)鏈在動(dòng)蕩與智能化中全面轉(zhuǎn)身。全方位重構(gòu)產(chǎn)品創(chuàng)新、品牌建設(shè),強(qiáng)化天貓與品牌之間的合作,這便是我們想在雙11這天展現(xiàn)的萬里品牌江山畫卷。


△2019雙11數(shù)據(jù)大屏-品牌榜


4.結(jié)束語


當(dāng)GMV越來越逼近2684億人民幣時(shí),炸裂感給每個(gè)人的沖擊是:中國又誕生了一個(gè)新的奇跡!即使在全球經(jīng)濟(jì)放緩的今天,中國人民對于天貓雙11全球狂歡節(jié)的熱情絲毫不減。在這背后,是數(shù)字經(jīng)濟(jì)時(shí)代下的阿里巴巴,向新商業(yè)文明邁進(jìn)了一大步。

文章來源:站酷

「手勢交互」的知識(shí)點(diǎn)

資深UI設(shè)計(jì)者

業(yè)內(nèi)有很多人覺得手勢交互沒必要拿出來深究,覺得用戶使用產(chǎn)品的過程中,自然而然就會(huì)去使用拇指,進(jìn)行手勢操作。但這種說法,就跟「用戶心理模型」類似。當(dāng)然,對于用戶來說沒必要深究手勢交互,但作為設(shè)計(jì)師,如果不了解其背后的邏輯,那么就無法解決產(chǎn)品設(shè)計(jì)背后的一些問題。

所以我們今天,好好聊一聊手勢交互這件事。你會(huì)發(fā)現(xiàn),原來你以往觀察或以為的設(shè)計(jì)問題,都是手勢交互在作祟。

手勢的意義

我們以前經(jīng)常聽到「以用戶為中心做產(chǎn)品設(shè)計(jì)」這句話,意思是產(chǎn)品需依附于目標(biāo)用戶的真實(shí)場景來設(shè)計(jì)。與此同時(shí),其實(shí)還有一句話在提醒著交互設(shè)計(jì)師如何做產(chǎn)品設(shè)計(jì),就是「以觸摸屏為中心做產(chǎn)品設(shè)計(jì)」。

為什么呢?因?yàn)橛脩魪氖贾两K都是在跟觸摸屏做接觸,不管換了什么設(shè)備,他們都是要通過屏幕與產(chǎn)品進(jìn)行交互的。

我們可以在這里思考一下手勢的意義。

手勢的出現(xiàn)改變了什么?可以回想一下 iPhone 4 發(fā)布的時(shí)候,當(dāng)看到這樣一臺(tái)屏幕上沒有任何按鍵的設(shè)備,是不是會(huì)覺得不可思議?鍵盤,電話接聽按鍵等都消失不見了。

人們在使用 iPhone 這樣的產(chǎn)品時(shí),不再需要去強(qiáng)行記憶任何固體按鍵。觸摸屏與手勢的結(jié)合,幫助我們隱藏不必要的元素,幫助用戶聚焦于內(nèi)容,在有限的物理空間獲得更多的信息。

所以用戶通過觸摸屏與產(chǎn)品進(jìn)行交互,跟通過鍵盤按鍵與屏幕進(jìn)行交互是完全不同的。手勢交互更自然且更。

手勢操作對我們來說如此自然和直觀的主要原因是因?yàn)樗鼈冾愃朴谂c真實(shí)對象進(jìn)行直接交互。譬如你用遙控器控制電視上的按鍵,需要通過上下左右這樣的操作來定位指示器,而觸摸屏直接就可以通過手指點(diǎn)擊內(nèi)容進(jìn)行操作。這是完全不同的概念。

綜上所述,我們能知道,手勢的三個(gè)要素:簡潔、易用、直觀。

所以我們通過一些常見的手勢行為,就可以在產(chǎn)品界面上很輕松的完成任務(wù)。

常見的手勢行為:

  • 點(diǎn)擊:單指短暫觸摸表面;
  • 雙擊:單指快速兩次觸摸表面(通常是縮放);
  • 拖動(dòng):沿表面移動(dòng)而不會(huì)破壞接觸;
  • 捏/展開:用兩根手指觸摸表面以移入(捏合)或移出(展開);
  • 按下:單指觸摸表面并按??;
  • 滑動(dòng):快速手勢,不需要觸摸目標(biāo)。

當(dāng)然,我們經(jīng)常也會(huì)遇到一些背離手勢交互的產(chǎn)品設(shè)計(jì),雖然也是點(diǎn)擊、拖動(dòng)等等,但操作起來總是不那么順心。這里面有一個(gè)關(guān)鍵點(diǎn)就是,手勢直觀性。

有數(shù)據(jù)表明,蘋果的 3D Touch 使用率非常低,就是因?yàn)橹庇^性太差,用戶不知道通過這個(gè)操作能帶來什么結(jié)果,且使用它需要長按,經(jīng)常會(huì)同時(shí)呼出「卸載」,那么效率也就會(huì)降低。久而久之,用戶就不去使用了。

正面例子如下圖,滑動(dòng)與文案結(jié)合。

這樣一看,用戶馬上就能知道這個(gè)操作行為如何觸發(fā),緊接著就產(chǎn)生行動(dòng),然后會(huì)反饋結(jié)果。

這也是手勢交互的核心:觸發(fā),行動(dòng),反饋。

對比 3D Touch,觸發(fā)沒有提示,行動(dòng)后時(shí)常有兩種反饋結(jié)果,相比起來就不那么友好了。

除了上面聊的這些,手勢交互還能從另一方面來提升效率,就是拇指操作區(qū)域。

拇指驅(qū)動(dòng)設(shè)計(jì)

我們都知道,現(xiàn)在手機(jī)屏幕越來越大,甚至比最早屏幕大了一倍以上。但是很多設(shè)計(jì)師并沒有轉(zhuǎn)換思維,跟進(jìn)這個(gè)趨勢的變化。

這里給大家普及一個(gè)知識(shí):大部分人誤以為,手指在屏幕上的熱區(qū)是永恒不變的,但其實(shí)手指熱區(qū)會(huì)根據(jù)設(shè)備的變大而縮小。因?yàn)槭终浦卧O(shè)備的重心靠后走了,所以拇指操控屏幕的范圍也就變小了。如下圖。

結(jié)果是,手機(jī)屏幕變大,雙手持機(jī)的用戶變多,但依然還有 75% 的用戶是使用拇指來觸摸屏幕的。因此,術(shù)語「拇指驅(qū)動(dòng)設(shè)計(jì)」應(yīng)運(yùn)而生。

我們上面說到,在使用一些產(chǎn)品的時(shí)候,經(jīng)常會(huì)遇到使用起來不順心的情況,然后說了「手勢直觀性」的概念。但這里,還有個(gè)更重要的原因,就是「拇指操作區(qū)域」。

拇指操作區(qū)域被分為三塊內(nèi)容,分別是:易于觸達(dá),難以觸達(dá),以及介于兩者之間的區(qū)域。

看下圖。

所以在設(shè)計(jì)界面時(shí),要注意界面的主要操作元素是否處于用戶易于觸達(dá)的范圍之內(nèi)。

如果你仔細(xì)觀察并思考過,也會(huì)發(fā)現(xiàn),iOS 的產(chǎn)品界面中,「返回」按鈕就位于「難以觸達(dá)」的區(qū)域。原因是產(chǎn)品人員本身也不想用戶返回或退出,而是讓用戶聚焦于當(dāng)前頁面,想要返回,那就需要付出一點(diǎn)成本,什么成本?操作成本。

有人會(huì)說,由于 iOS 可以從手機(jī)的左邊緣向右側(cè)輕掃以獲得返回效果,因此在大多數(shù) iOS 產(chǎn)品中,返回都不需要太大的操作成本。但是,并不是所有 iPhone 用戶都知道這一點(diǎn),也不是所有產(chǎn)品都支持這一特性的。而且手勢交互的進(jìn)化本來也就是為了提升用戶操作的效率,所以本質(zhì)上他們并不矛盾,只是相比以前,我們現(xiàn)在的操作更快了。并且「右滑」返回,本身在手勢操作中相比「點(diǎn)擊」也是更具操作成本的。

當(dāng)了解了手勢的一些意義,以及拇指操作區(qū)域?qū)τ诋a(chǎn)品設(shè)計(jì)的重要性之后,我們就可以通過一些案例來做一個(gè)全局分析了。

1. 內(nèi)容在上,操作在下

許多人設(shè)計(jì) App,但是沒人研究過 App 為什么要這么設(shè)計(jì)。

比如,為什么起初要把標(biāo)簽欄放底下呢?關(guān)于這個(gè)問題,當(dāng)初我也是問了許多人,而基本都只是說這是官方設(shè)計(jì)規(guī)范。這相當(dāng)于是一句廢話。

通過翻閱多方資料,我發(fā)現(xiàn)在工業(yè)設(shè)計(jì)領(lǐng)域有一條重要的基本設(shè)計(jì)原則:內(nèi)容在上,操作在下。

比如在使用電腦的時(shí)候,操作在下意味著使用者在操作過程中,手指始終處于界面下方,而內(nèi)容在上面,就不會(huì)出現(xiàn)手指遮擋內(nèi)容的情況。

如下圖的鍵盤操作提示:

基于此,相信你也知道為什么標(biāo)簽欄在下方了吧?

另外,為什么 iOS 設(shè)計(jì)規(guī)范建議將「編輯」按鈕放置在界面右/左上方的位置呢?

界面右/左上角的位置對拇指來說顯然是不友好的。然而,這樣做的原因也是顯而易見的:編輯功能會(huì)讓數(shù)據(jù)發(fā)生變化。將這類控件放在難以操作的位置上(與左上角的返回是一個(gè)道理),就是一種防御性的設(shè)計(jì)策略,可以在一定程度上避免因?yàn)樘菀桩a(chǎn)生誤操作而導(dǎo)致的破壞性的結(jié)果。

通過這一小段之前聊過的內(nèi)容,你們會(huì)發(fā)現(xiàn),手勢與拇指操作其實(shí)在驅(qū)動(dòng)著產(chǎn)品設(shè)計(jì)。下面我們來聊個(gè)大的案例。

漢堡包菜單的消失解析

漢堡包菜單,也就是側(cè)邊欄導(dǎo)航,F(xiàn)acebook 早期測試顯示側(cè)邊欄導(dǎo)航讓用戶使用率降低了一半。

我們一起來看看市面上給出的三類說法。

1. 可見性太低

默認(rèn)狀態(tài)下,用戶是看不見側(cè)邊欄的,除非點(diǎn)擊了側(cè)邊欄的彈出按鈕。所以這種情況下,里面的功能都是用戶腦袋里已知的,但很可能都想不起來。比如,現(xiàn)在你回想一下知乎底部 5 個(gè)標(biāo)簽分別是什么?或者微信右上角「+」里面有哪些功能?是不是要想一會(huì)兒,才能記起來?甚至還是想不起來。

之前我在文章里寫過,用戶對于功能的使用一定是「所見即所得」,而不是「心向往之」。用戶只會(huì)注意自己看到的信息,而不是憑借記憶或想象來使用產(chǎn)品。

底部標(biāo)簽欄就很好的解決了漢堡包菜單的「可見性」問題。

2. 效率較低

效率較低主要在于操作頻率,大家看下面兩組圖的對比。

第一張圖,當(dāng)用戶從首頁進(jìn)入到個(gè)人信息頁面,只需要兩步;而第二張圖,則要三步。

這里多一步看起來似乎影響不大,但如果現(xiàn)在要從個(gè)人信息頁面到「標(biāo)簽 3」的話,第一張圖也只需要兩步,第二張圖還是需要三步,當(dāng)頻繁去使用這樣的產(chǎn)品后,用戶的整體效率就會(huì)下降,體驗(yàn)也會(huì)隨之降低。

3. 與平臺(tái)模式?jīng)_突

大家應(yīng)該知道,在 iOS 的操作頁面中,通過手勢可對 tab 進(jìn)行左右切換,而側(cè)邊欄除了通過點(diǎn)擊菜單按鈕展開之外,也可以通過右滑彈出。這里面有什么沖突呢?看下圖。

當(dāng)頁面聚焦在「標(biāo)簽 2」時(shí),右滑除了能回到「標(biāo)簽 1」,同樣也很可能會(huì)切出側(cè)邊導(dǎo)航欄。

這樣的手勢沖突,導(dǎo)致頁面層級(jí)與功能導(dǎo)航的優(yōu)先級(jí)混亂了。

無論是導(dǎo)航還是控件,當(dāng)它們組成一個(gè)頁面后,它們的操作就會(huì)有優(yōu)先級(jí)。比如下面這個(gè)例子。

如果你對標(biāo)紅的分段控件比較熟悉,就知道,它是可通過屏幕滑動(dòng)進(jìn)行切換的。但是在「短信」里,它是不能通過滑動(dòng)屏幕進(jìn)行切換的,因?yàn)橛脩艨蓪螚l信息進(jìn)行左滑做刪除或其他操作。所以當(dāng)頁面操作模式存在矛盾時(shí),我們會(huì)將子層級(jí)操作優(yōu)先于父層級(jí)操作。

譬如你進(jìn)入朋友圈,是不能馬上回到首頁的,這時(shí)候頁面層級(jí)較深,產(chǎn)品人員要將用戶聚焦于頁面本身,如果直接能返回到首頁,頁面層級(jí)和產(chǎn)品架構(gòu)就會(huì)混亂。

類似的例子還有很多,我這里就不繼續(xù)列舉了。

所以從「短信」的例子可以看出,當(dāng)控件與控件之間的手勢發(fā)生沖突時(shí),我們要考慮優(yōu)先級(jí),將內(nèi)容優(yōu)先于頁面來處理。那么回到上面的例子,分段控件與漢堡包菜單的手勢發(fā)生沖突時(shí),很明顯我們要優(yōu)先分段控件的操作,而禁止掉漢堡包菜單的右滑手勢。結(jié)果就是,效率又低了。

4. 小結(jié)

這三類,如果你認(rèn)真思考里面的關(guān)系,其實(shí)就會(huì)發(fā)現(xiàn),它們的共通點(diǎn)就是與拇指的聯(lián)系過于被動(dòng)或直接被切斷了。

  • 第一個(gè)「可見性太低」的例子,菜單被隱藏,拇指不能直接與菜單產(chǎn)生關(guān)系,并且距離過遠(yuǎn),拇指難以觸達(dá)。
  • 第二個(gè)「效率太低」的例子,用戶需要通過拇指來回操作,導(dǎo)致效率降低,這就跟使用遙控器控制電視機(jī)一樣,用戶無法直接觸達(dá)內(nèi)容。
  • 第三個(gè)「手勢沖突」的例子,其實(shí)就很清晰了,就是說標(biāo)簽欄的優(yōu)先級(jí)可能會(huì)被頁面的其它控件所取代,那么拇指就無法直接對其產(chǎn)生作用,從而禁止當(dāng)前頁面的手勢交互行為。

它們的核心點(diǎn)就是拇指與觸摸屏的關(guān)系。

如果你現(xiàn)在還不能深刻理解漢堡包菜單的劣勢,那就想一下去看一下現(xiàn)在的產(chǎn)品,其中「我的」、「個(gè)人中心」或「更多」其實(shí)都是變相的漢堡包菜單。

在「我」這個(gè)標(biāo)簽頁里,這一系列功能列表,無非就是另一種模式的漢堡包菜單,只是這里呈現(xiàn)的都是不重要的功能,并不影響用戶使用這個(gè)產(chǎn)品?;叵胍幌拢闶遣皇呛苌?,甚至從來沒用過這里的某幾個(gè)功能?再跟手勢結(jié)合,就會(huì)發(fā)現(xiàn),「我」所處區(qū)域并不是容易點(diǎn)擊的區(qū)域,這就是它效率低下的原因了?,F(xiàn)在能懂了么?

彈框的操作路徑

當(dāng)傳統(tǒng)的確認(rèn)彈窗逐漸被手勢操作取代,大家就應(yīng)該察覺到:以往從電腦遷移到移動(dòng)設(shè)備上的交互行為已逐漸被改善。

我曾經(jīng)寫過一篇文章,叫「取消按鈕的設(shè)計(jì)邏輯」,講了「左取消,右行進(jìn)」這個(gè)原理。意思就是當(dāng)我們在設(shè)計(jì)彈框的時(shí)候,用戶已經(jīng)習(xí)慣這樣的操作路徑,所以不要輕易更換位置以混淆用戶的認(rèn)知。再從手勢的角度來說,就是右邊更容易點(diǎn)擊。

后來有同學(xué)說到,但是有些特殊場景,譬如刪除資料,而產(chǎn)品人員不希望用戶刪除,于是把刪除放在左邊,取消放在右邊。畢竟右邊更容易點(diǎn)擊,所以位置換了會(huì)比較合理。

這是錯(cuò)的!

我們不能通過改變用戶使用產(chǎn)品的常識(shí)來將產(chǎn)品人員的想法置于用戶之上。當(dāng)用戶已經(jīng)形成「左取消,右行進(jìn)」的認(rèn)知之后,違反這樣的一致性,去換位置是很危險(xiǎn)的。所以出現(xiàn)了 action sheet,來解決一些產(chǎn)品關(guān)于 alert 無法解決的問題。

如圖。

大家要記住的是,當(dāng)頁面邏輯與手勢操作產(chǎn)生邏輯沖突時(shí),我們不是去否定以前已經(jīng)被驗(yàn)證且正確的內(nèi)容,而是通過創(chuàng)新,來解決這個(gè)沖突。這就是拇指驅(qū)動(dòng)設(shè)計(jì)的一種方式。

包括我們以前在移動(dòng)設(shè)備上選擇刪除某項(xiàng)數(shù)據(jù),都會(huì)彈出警告框,詢問我們是否確認(rèn)刪除。這種方式會(huì)打斷我們的操作行為,久而久之,用戶已經(jīng)對此交互方式習(xí)以為常,或者說免疫了,但這種彈框的方式始終被認(rèn)為是不好的一種交互手段。所以側(cè)滑刪除,已經(jīng)被更多產(chǎn)品功能用來取代沒必要彈框的操作。

也許很多人沒思考過底層原因,或者僅僅只是覺得其相比彈框顯得更友好。其實(shí)這個(gè)行為是基于手勢交互做了相應(yīng)的優(yōu)化,讓用戶操作起來更加方便。

Banner

到了這里,我再舉個(gè)所有人都熟悉的例子,就是輪播圖了。

輪播圖最早出現(xiàn)于網(wǎng)頁端,后來被大量商家模仿,以至于到移動(dòng)端還備受各產(chǎn)品設(shè)計(jì)人員的歡迎。但其實(shí)很多人對輪播圖的使用方法都是錯(cuò)誤的。

下面來看輪播圖與手勢的關(guān)系。

試想:你的輪播圖有 6 張 Banner,你要翻到第 4 張,無論是往前翻還是往后翻都要產(chǎn)生 3 次交互行為。而大部分產(chǎn)品的用戶在界面停留的時(shí)間不會(huì)這么久,更不會(huì)看完你 Banner 的內(nèi)容。以至于有研究表明,大部分產(chǎn)品里,除了第一張 Banner 的點(diǎn)擊率能達(dá)到 83% 之外,其余的點(diǎn)擊率都非常低。

有人說可以點(diǎn)擊下面的原點(diǎn)指示器做跳轉(zhuǎn),這么小的點(diǎn),你覺得點(diǎn)擊它現(xiàn)實(shí)么?所以手勢交互與輪播圖是相互矛盾的一種設(shè)計(jì)方式。

所以當(dāng)運(yùn)營策劃了一個(gè)活動(dòng),而你就往頂部的輪播圖里塞,這個(gè)行為就已經(jīng)注定這個(gè)活動(dòng)的用戶參與度是很低的了。除了個(gè)別電商產(chǎn)品,他們以賣廣告位給商家作為盈利點(diǎn),但即便如此,我相信這個(gè)廣告位除了第一張圖的點(diǎn)擊量稍高外,其他圖片的點(diǎn)擊量相對于產(chǎn)品本身的用戶體量比較而言還是很低的。這也是為什么部分產(chǎn)品把輪播圖規(guī)則改為用戶進(jìn)入首頁隨機(jī)展示輪播圖頁面,而不是強(qiáng)制指定于顯示第一張的原因。

畢竟輪播圖在頂部,用戶需要通過拇指長時(shí)間的在「延伸區(qū)域」進(jìn)行操作,那么使用率自然就降低了。

如果你的產(chǎn)品有很多活動(dòng)是在同時(shí)期進(jìn)行的,那么我給部分產(chǎn)品的建議是放一個(gè)活動(dòng)主題入口,如下圖。(當(dāng)然,這要視情況而定,并不是通用的。)

搜索框的變化

我們現(xiàn)在看到的搜索框基本都是放在屏幕頂部。

為什么呢?

市面上對這個(gè)問題的解釋是這樣的:用戶已經(jīng)被現(xiàn)在的產(chǎn)品訓(xùn)練得在界面的頂部必須看到一個(gè)搜索框,設(shè)計(jì)師打破這個(gè)常規(guī)就要承擔(dān)風(fēng)險(xiǎn)。

看完這篇文章,你就已經(jīng)知道,對于用戶來說,由于屏幕頂部離拇指很遠(yuǎn),處于難以觸達(dá)的區(qū)域,在體驗(yàn)上很不好。所以搜索框成了認(rèn)知上應(yīng)該在頂部,但操作體驗(yàn)上又不應(yīng)該在頂部的一個(gè)設(shè)計(jì)。

但是回想一下,會(huì)發(fā)現(xiàn)大多數(shù) App 的主要內(nèi)容都是位于易于觸達(dá)的區(qū)域。所以當(dāng)看到高德地圖把搜索框移動(dòng)到下面來之后,就能知道,拇指驅(qū)動(dòng)設(shè)計(jì)的概念被越來越多的人認(rèn)識(shí)到其重要性。

地圖類產(chǎn)品把搜索框移到下面來的首創(chuàng)應(yīng)用不是高德,應(yīng)該是 Lyft。

瞧,拇指驅(qū)動(dòng)設(shè)計(jì),多酷~

總結(jié)

《上癮》里有句話:當(dāng)人們不由自由地做出下一個(gè)舉動(dòng)時(shí),新的習(xí)慣就會(huì)成為他們?nèi)粘I畹囊徊糠帧?

當(dāng)手勢充分地發(fā)揮了作用,輔助用戶操作或?qū)崿F(xiàn)功能,它就成了用戶不可分割的一部分。

今天通過對手勢意義的解讀,以及拇指驅(qū)動(dòng)設(shè)計(jì)的解析,再加上這些案例的拆解,我相信你能更好地理解為什么手勢交互這么重要了。

交互設(shè)計(jì)師對于「觸摸屏」,必須有深刻的認(rèn)識(shí),才能理解設(shè)計(jì)背后的邏輯。

如果這篇文章對你有幫助,記得點(diǎn)個(gè)贊,后面我好持續(xù)輸出。

文章來源:優(yōu)設(shè)

體驗(yàn)設(shè)計(jì)師要懂的七大交互心理學(xué)

ui設(shè)計(jì)分享達(dá)人


如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里

心理學(xué)在我們生活中涉及的面很廣,是每個(gè)行業(yè)都要了解的,對于設(shè)計(jì)師來說,更要了解用戶的心理,因?yàn)槲覀兊脑O(shè)計(jì)是面向用戶的 



閱讀時(shí)間:大約9分鐘


目錄


  • 前言

  • 7±2法則

  • 費(fèi)茨定律

  • ??硕?

  • 格式塔原則

  • 色彩心理學(xué)

  • 馮·雷斯托夫效應(yīng)

  • 奧卡姆剃刀原理

  • 總結(jié)




前言


最近正好在學(xué)習(xí)用戶體驗(yàn)方面的知識(shí),也查閱了相關(guān)的資料和文章,輸出是最好的輸入,所以把整理的相關(guān)文檔寫下了,也是將所學(xué)的知識(shí)再鞏固下,歡迎大家一起探討。




7±2法則的定義


7±2法則出于美國心理學(xué)家George A. Miller1956年發(fā)布的論文《神奇的數(shù)字7加減2:我們加工信息能力的某些限制》。Miller最早對短時(shí)記憶能力進(jìn)行了定量研究,他發(fā)現(xiàn)人的短時(shí)記憶能力的廣度為7±2個(gè)信息塊。

這說明人的大腦短時(shí)記憶的容量大約為“7”,并在7+2與7-2之間浮動(dòng),因此,心理學(xué)家把這個(gè)神奇的記憶容量規(guī)律稱為“7±2法則”。由7±2法則我們可以得出,一般人接受新事物的記憶容量大約是7,最多不會(huì)超過9。


心理學(xué)家Alan Baddeley質(zhì)疑7加減2規(guī)則。Baddeley(1994)翻出Miller的文章,發(fā)現(xiàn)那并不是真正的研究報(bào)告,只是一次專業(yè)會(huì)議的講稿。Miller基本上是自言自語,猜想人能夠同時(shí)處理的信息量有沒有固有的限制。

此外,Nelson Cowan(2001)等研究者也追隨了他的腳步。現(xiàn)在研究表明,那個(gè)“神奇的數(shù)字”其實(shí)是4。(無論是7±2還是4,便于我們記憶同時(shí)也協(xié)助我們工作提升效率就是最好的數(shù)字)


George Mandler(1969)指出,人們能分門別類地記住信息,并且如果每個(gè)記憶類別里只有1~3條信息,那么人們能夠出色地回憶起來。當(dāng)每類超過3條信息時(shí),記憶效果就會(huì)相應(yīng)下降,每類有4~6條信息時(shí),人能記住80%;儲(chǔ)存信息條數(shù)越多,記住的比例就越低,當(dāng)每類有80條信息時(shí),人只能記住20%(如下圖所示)。



舉個(gè)直觀的例子,以下隨機(jī)給出10個(gè)詞語,你看一遍能記住幾個(gè)?

桌子   電腦   椅子  水杯   鉛筆   地圖   綠植   鍵盤   鼠標(biāo)   文件


7±2法則的運(yùn)用


1、組塊記憶


為了改善不穩(wěn)定的工作記憶,人們會(huì)采取一些有趣的策略。其中之一就是將信息“組塊記憶”。

也就是把數(shù)字分為3-4-4來記憶,抖音的登錄賬號(hào)、美團(tuán)的Dialog彈窗都是遵循的這一原則。

包括現(xiàn)在在生活中,我給別人發(fā)手機(jī)號(hào)碼或者是身份證號(hào)的時(shí)候都會(huì)選擇這個(gè)原則,自己看著也清晰,也便于對方將信息分類。



2、優(yōu)化選項(xiàng)


網(wǎng)易新聞和今日頭條的導(dǎo)航都遵循了7±2法則,更多的信息左側(cè)滑動(dòng)即可。



3、頁面布局


7±2法則還可以幫我們將頁面分組,將內(nèi)容按照屬性分類,使頁面更有條理性和層次感,用戶能的完成自己的操作,例如:餓了么




費(fèi)茨定律的定義


任意一點(diǎn)移動(dòng)到目標(biāo)中心位置所需時(shí)間與該點(diǎn)到目標(biāo)的距離和大小有關(guān),距離越大時(shí)間越長,目標(biāo)越大時(shí)間越短。

用數(shù)學(xué)公式表達(dá)為時(shí)間 T = a + b log2(D/W+1)。

T=移動(dòng)設(shè)備所需時(shí)長;a,b是經(jīng)驗(yàn)常量,D=設(shè)備起始位置和目標(biāo)位置的距離;W=目標(biāo)的寬度大小。



費(fèi)茨定律的理解


1、設(shè)備當(dāng)前位置和目標(biāo)位置的距離D越長,所用時(shí)間越長;

2、目標(biāo)的大小W越大,所用時(shí)間越短。


費(fèi)茨定律的應(yīng)用


1、按鈕放大,點(diǎn)擊更容易


閑魚和印象筆記,一個(gè)是直接發(fā)布閑置,另一個(gè)是直接創(chuàng)建筆記,都屬于核心功能,將用戶最想要或最直接想點(diǎn)擊的按鈕外漏、放大;增加可點(diǎn)擊區(qū)域來滿足用戶的需求。



2、讓相關(guān)的內(nèi)容更接近


淘寶、京東的加入購物車和立即購買,在視覺上讓用戶增加了他們相關(guān)性的認(rèn)知,也減少了兩個(gè)按鈕操作之間的距離和時(shí)間。



3、頁面的邊和腳適合放一些按鈕和菜單


安卓手機(jī)刪除應(yīng)用時(shí)的操作、Potoshop軟件頂部菜單等、Mac操作系統(tǒng)的底部應(yīng)用等,無論我們怎么操作,鼠標(biāo)都不會(huì)超過這些區(qū)域。







希克定律的定義


??硕?— 原稱希克海曼定律(Hick Hymalrs 1aw),是一種心理物理學(xué)定律。

一個(gè)人所面臨的選擇越多,做出選擇所花的時(shí)間就越多,當(dāng)面臨選擇的數(shù)量增加,做出決定的時(shí)間也會(huì)跟著增加。


??硕傻膽?yīng)用


??硕傻膽?yīng)用很廣泛,不僅是在產(chǎn)品上,在生活中也隨處可用。


和同事每天都會(huì)遇到的問題,一到中午,同事就會(huì)問,吃什么?每日一問,看著商場眾多美食,真是發(fā)愁,但如果她換種問法:我們今天中午吃海底撈還是和府撈面,這樣的詢問是不是就節(jié)省思考和作出選擇的時(shí)間?


遙控器的設(shè)計(jì)也是,看到下面兩個(gè)遙控器的樣式,你會(huì)感覺哪個(gè)好用,很明顯是右邊小米的遙控器,老人再不用教的情況下就可以自己操作,左邊的拿起來我們要花很多時(shí)間是研究如何使用,可能剛學(xué)會(huì),想進(jìn)行下一個(gè)操作的時(shí)候又要去花時(shí)間研究,是不是很鬧心?



猿輔導(dǎo)APP中,導(dǎo)航默認(rèn)的是所有的課程,對于學(xué)員來說選擇自己想要學(xué)習(xí)的課程,比較浪費(fèi)時(shí)間,右側(cè)的設(shè)計(jì)就是將我們不感興趣的課程關(guān)閉推薦,剩下的課程大大縮短了我們選擇和尋找的時(shí)間




格式塔的定義


格式塔(德式造型)是20世紀(jì)20年代由德國心理學(xué)家提出的一組視覺知覺原理。它建立在“一個(gè)有組織的整體,被認(rèn)為大于其各部分之和”的理論基礎(chǔ)上。


格式塔的應(yīng)用


在我們做設(shè)計(jì)的過程中,常用的是原則有:簡單性、接近性、相似性、連續(xù)性、閉合性等



1、簡單性原則


簡單原理適用于設(shè)計(jì)中的三角形構(gòu)圖,均衡構(gòu)圖,對稱構(gòu)圖,向心構(gòu)圖,攝影中的對角線,X型構(gòu)圖等。這些構(gòu)圖方式都是為了把復(fù)雜的信息元素通過簡單的方式讓觀者易于理解。


58同城和愛奇藝首頁都是均衡和對稱的構(gòu)圖



2、接近性原則


一個(gè)頁面中,如果兩個(gè)元素是接近的,給用戶的感覺他們之間就有相關(guān)性


在支付寶我的頁面中,個(gè)人信息都是有相關(guān)性的,所以放一起遵循了接近性原則



3、相似性原則


我們的眼睛很容易關(guān)注那些復(fù)雜環(huán)境中外表相似的東西,可以利用相似原則組織好界面中的信息和層級(jí)關(guān)系。


相似性原則在UI設(shè)計(jì)中也很常見,網(wǎng)易郵箱、騰訊視頻都采用了相似性原則



4、連續(xù)性原則


人的視覺有追隨一個(gè)方向上的連續(xù)性,以便把不關(guān)聯(lián)的元素聯(lián)系到一起。


我們在APP中??吹搅斜硪彩沁B續(xù)性原則的應(yīng)用




色彩心理學(xué)定義


在自然欣賞、社會(huì)活動(dòng)方面,色彩在客觀上是對人們的一種刺激和象征;在主觀上又是一種反應(yīng)與行為。色彩心理透過視覺開始,從知覺、感情而到記憶、思想、意志、象征等,其反應(yīng)與變化是極為復(fù)雜的。色彩的應(yīng)用,很重視這種因果關(guān)系,即由對色彩的經(jīng)驗(yàn)積累而變成對色彩的心理規(guī)范,當(dāng)受到什么刺激后能產(chǎn)生什么反應(yīng),都是色彩心理所要探討的內(nèi)容。


色彩心理學(xué)應(yīng)用


  • 黑色:精致和力量

  • 白色:干凈、精致、純潔

  • 紅色:勇氣、激勵(lì)、力量;也能激發(fā)欲望

  • 藍(lán)色:冷靜、安定、信任、安全

  • 黃色:樂觀、歡樂

  • 綠色:平衡、可持續(xù)的增長

  • 紫色:皇權(quán)、精神意識(shí)、奢華

  • 橙色:友誼、舒適、食物

  • 粉色:平靜、女性化、性


一說到美食,我們能想到的顏色就是橘色,暖色系,因?yàn)檫@個(gè)顏色會(huì)增加食欲

插播一個(gè)知識(shí)點(diǎn):美團(tuán)外賣選擇的橘色,跟美食相關(guān)的顏色,我們可以理解,但餓了么平臺(tái)為什么會(huì)選擇藍(lán)色而不是暖色系呢?餓了么是以科技為主導(dǎo)的,核心并不是美食,所以選用了科技藍(lán)



在一些電商類網(wǎng)站都會(huì)將加入購物車、立即購買顏色設(shè)置為紅色,因?yàn)榧t色可以刺激人的眼球,來增加點(diǎn)擊的欲望,還有微信群和朋友圈的未讀,都設(shè)置成紅色



顏色也是影響人們的情緒,比如長時(shí)間在橘色的環(huán)境下呆著,會(huì)使人焦慮不安,所以一些餐廳在顏色、燈光選擇上都會(huì)選擇用一些暖色系,藍(lán)色和褐色,會(huì)使人平靜,適合一些酒吧;


但色彩也不能濫用,它是具有聯(lián)系和含義的,例如:紅色代表赤字,即經(jīng)濟(jì)困難;也可以代表警告、危險(xiǎn)等;綠色代表環(huán)保、通行,所以在選用顏色上也要考慮它的含義和意義,要謹(jǐn)慎。




馮·雷斯托夫效應(yīng)定義


馮·雷斯托夫效應(yīng)告訴我們,某個(gè)元素越是違反常理,就越引人注目、令人難忘。

Hedwig von Restorff在1933年檢驗(yàn)了這個(gè)理論。她讓實(shí)驗(yàn)對象觀看一系列相似的物品。如果其中某個(gè)很特殊,比如說有聚光燈照射,那么相比其他物品,受試者就更容易回憶起這件物品。


比如,下面這個(gè)紅西紅柿


如果你想要讓某物引人們的注目,就要使它特殊化,可以通過色彩、尺寸、留白等方式來引起注意


例如:小紅色的紅色按鈕、蘇寧易購一套節(jié)日氣氛的首頁





奧卡姆剃刀定律定義


奧卡姆剃刀定律(Occam's Razor, Ockham's Razor)又稱“奧康的剃刀”,它是由14世紀(jì)英格蘭的邏輯學(xué)家、圣方濟(jì)各會(huì)修

士奧卡姆的威廉(William of Occam,約1285年至1349年)提出。這個(gè)原理稱為“如無必要,勿增實(shí)體”,即“簡單有效原理”。正如他在《箴言書注》2卷15題說“切勿浪費(fèi)較多東西去做,用較少的東西,同樣可以做好的事情。”


奧卡姆剃刀定律的應(yīng)用


我們在進(jìn)行頁面設(shè)計(jì)的時(shí)候并不是內(nèi)容越多越好,信息飛速發(fā)展的時(shí)代,大家都講究快、效率,我只要通過這個(gè)APP盡快達(dá)到目的為好,繁冗的功能對用戶來說只會(huì)降低用戶體驗(yàn)感,抖音APP底部的導(dǎo)航開始是文字加icon,后來發(fā)現(xiàn)圖標(biāo)會(huì)影響整體的效果,因?yàn)楫?dāng)視頻播放的時(shí)候,下面的Tab識(shí)別度會(huì)降低,經(jīng)過改版,將icon去掉,文字放大,CTR也上去了,之后小紅書就開始參考抖音的改版:我不管你去掉的原因是什么,CTR上去就行



總結(jié)


一句話在回顧下文章的定律


7±2法則:一般人接受新事物的記憶容量大約是7,最多不會(huì)超過9

費(fèi)茨定律:A和目標(biāo)B的距離越長,所用時(shí)間越長;A大小越大,所用時(shí)間越短。

??硕桑?/strong>選擇越多,花的時(shí)間就越多,選擇的數(shù)量增加,做出決定的時(shí)間也會(huì)跟著增加。

格式塔原則:常用的是原則有:簡單性、接近性、相似性、連續(xù)性、閉合性

色彩心理學(xué):顏色也是影響人們的情緒,選用上要謹(jǐn)慎

馮·雷斯托夫效應(yīng):某個(gè)元素越是違反常理,就越引人注目、令人難忘

奧卡姆剃刀原理:簡單有效原理,去繁從簡

轉(zhuǎn)自:站酷-麥小兜Sarah 


如何復(fù)制網(wǎng)頁上不能復(fù)制的文本!!!

seo達(dá)人

   我們經(jīng)常需要引用(白嫖)一些網(wǎng)頁上的文字,但是豆丁網(wǎng),百度文庫等等設(shè)置的有復(fù)制權(quán)限,我們無法直接復(fù)制,或者復(fù)制文字有上限,提示付費(fèi)。

    這里介紹幾種,都是些花里胡哨的白嫖方案:

1.手機(jī)掃描:

    拿著手機(jī),用手機(jī)QQ的文字掃描直接去識(shí)別問題,遇上好識(shí)別的文章短的直接就識(shí)別,但是這種方法遇到文章比較長的就十分麻煩??梢葬槍δ切┻x中



2.魔鬼牽引:

    原來在計(jì)蒜客就這樣搞,選中網(wǎng)站上的文字,然后用鼠標(biāo)一直拖到別的頁面,或者一個(gè)記事本什么的,屢試不爽。



3.側(cè)邊翻譯:

    側(cè)邊翻譯,火狐或者谷歌下載一些插件,比如說側(cè)邊翻譯,這個(gè)東西小巧玲瓏,選中文字側(cè)邊翻譯之后你就可以對文本進(jìn)行復(fù)制了。



4.原始查看法:

    在瀏覽器中直接F12,打開瀏覽器查看,就下面這個(gè)東西,瀏覽器你要復(fù)制的文本就在這里面,里面封裝的html語言,你可以搜索你需要找的文字,然后可以直接復(fù)制,如果想要復(fù)制多一點(diǎn)你也可以直接把里面的html語言拿出來解析到自己的網(wǎng)頁里面,然后再進(jìn)行復(fù)制。





5.氪金法:

    沒別的,充錢就完事了。



6.某巨巨提供:

    下載一個(gè)ocr工具,類似qq掃描的功能。






互聯(lián)網(wǎng)生活的底層邏輯:連接、賦能、破界

資深UI設(shè)計(jì)者

互聯(lián)網(wǎng)的底層邏輯就是以一種更的形式來滿足了我們的需要,讓我們的生活和生產(chǎn)更加的智能和。

底層邏輯是什么?如果給它一個(gè)釋義的話,那應(yīng)該是:最初的意圖或做一件事情原始的出發(fā)點(diǎn)。

互聯(lián)網(wǎng)的底層邏輯

我們生活在一個(gè)網(wǎng)絡(luò)時(shí)代。可以利用網(wǎng)絡(luò),購物,打車,叫外賣,娛樂,辦證,學(xué)習(xí)等需要??墒窃跊]有網(wǎng)絡(luò)的年代里,做任何事情都是需要跑腿和親力親為。

我們對比沒有網(wǎng)絡(luò)年代。互聯(lián)網(wǎng)給我們生活帶來了極高的便利和效率。

我認(rèn)為互聯(lián)網(wǎng)的底層邏輯是:用一種更的形式來滿足我們生活生產(chǎn)而產(chǎn)生的需要。

我們拿買衣服,購買外套舉例。

  • 進(jìn)店購買:詢問導(dǎo)購–找到外套–挑選–決定買不買
  • 網(wǎng)上購買:搜索外套–屏幕展示外套–挑選–決定買不買。

經(jīng)過對比發(fā)現(xiàn):

進(jìn)店購買和網(wǎng)絡(luò)購買最初的意圖都是滿足穿衣服。兩種形式的心理活動(dòng)邏輯一樣。都是店鋪找到外套,然后作出購買決定。只是兩種方法的獲取形式和途徑是不一樣的。

  1. 實(shí)體店詢問導(dǎo)購,變成了我們線上自主搜索。
  2. 口頭說出外套變成輸入關(guān)鍵詞“外套”。
  3. 獲取到的結(jié)果由導(dǎo)購帶到引導(dǎo)變成外套信息數(shù)據(jù)展示

互聯(lián)網(wǎng)技術(shù)的讓購物,讓買衣服多了一種途徑,多了一種形式并且有別于我們傳統(tǒng)的購買方式。

再如直播賣貨,直播賣貨在網(wǎng)絡(luò)上火了一把。口紅一哥李佳琦直播賣貨,1分鐘售罄14000支唇膏、打破“30秒涂口紅”吉尼斯記錄、5個(gè)半小時(shí)帶貨353萬……最高時(shí)段3000萬人在線圍觀。

現(xiàn)在我們要聊的并不是網(wǎng)絡(luò)紅人的偉大數(shù)據(jù)。而是網(wǎng)絡(luò)直播這個(gè)事。想一下,網(wǎng)絡(luò)直播是否在真實(shí)生活情景有原型。

看到上面的情景,是不是覺得熟悉了。

  • “瞧一瞧,看一看”
  • “廠家做活動(dòng),回饋消費(fèi)者,不要1999,不要1599,只要999”
  • “走過路過不要錯(cuò)過”
  • …..

我們暫時(shí)稱這些情景為現(xiàn)場直播,現(xiàn)場叫賣。由于互聯(lián)網(wǎng)技術(shù)的成熟,直播平臺(tái)的成熟。將現(xiàn)場直播搬到了網(wǎng)絡(luò)直播。網(wǎng)絡(luò)直播底層邏輯就是現(xiàn)場叫賣的另一種形式。

我們可以發(fā)現(xiàn),互聯(lián)網(wǎng)很多項(xiàng)目其實(shí)都是可以從現(xiàn)實(shí)生活中找到原型:

  • 購物–電商
  • 線下地推–網(wǎng)絡(luò)直播
  • 電話叫餐–外賣
  • 培訓(xùn)–網(wǎng)課
  • 閱覽館–電子書
  • 辦證跑腿提交紙質(zhì)資料–網(wǎng)上提交電子檔資料
  • ……

互聯(lián)網(wǎng)如何讓生活生產(chǎn)變得更為?

1. 連接,跨空間,跨地域連接人

假如沒有網(wǎng)絡(luò),我們?nèi)伺c人之間的生產(chǎn)活動(dòng)大多只存在于本地圈子。例如:

  • 在當(dāng)?shù)匚幕W(xué)習(xí),與當(dāng)?shù)赝g人成為同學(xué)。
  • 信息和話題交流閉塞,對外界信息獲取滯后。
  • 和當(dāng)?shù)厝俗錾猓沿浧焚u給當(dāng)?shù)氐南M(fèi)者。

有了網(wǎng)絡(luò):

  • 在抖音快手,我們可以看到其他城市的面貌,了解更多的人文民俗。
  • 在網(wǎng)絡(luò)課程上學(xué)習(xí)平時(shí)接觸不到的知識(shí)。比如:理財(cái),攝影,寫程序,做會(huì)計(jì)。
  • 還可以通過電商將生意做到全國各地。

網(wǎng)絡(luò)連接能突破界限,跨地域、跨空間,將不同省份,不同城市的人,通過互聯(lián)網(wǎng)聯(lián)系起來。然后將我們的信息,個(gè)人技能,社會(huì)信息放大到更多地方。

2. 賦能,釋放能量,價(jià)值最大化

以前有種現(xiàn)象。那就是信息不平衡,需求與被滿足不平衡。

比如:A想采購一批水果加工儀器,但當(dāng)?shù)剞r(nóng)業(yè)為主,別說售賣水果加工儀器,即便是詢問他人也鮮有人知道。

但在網(wǎng)絡(luò)時(shí)代,我們只要百度或者阿里巴巴搜索??倳?huì)得到我們想要的線索或者結(jié)果,總能找到加工儀器供應(yīng)商的信息。

再如:十八線縣城要學(xué)習(xí)IT編程語言,一般來說要去大城市培訓(xùn)機(jī)構(gòu)學(xué)習(xí)。有了網(wǎng)絡(luò),直接在一些課程平臺(tái)上購買課程就可以了。

上面的例子想說明的就是互聯(lián)網(wǎng)可以放大社會(huì)資源的利用率,將價(jià)值更大化,讓更多人參與參與到社會(huì)資源的共享當(dāng)中。消除局限和阻隔,將知識(shí)課程提供千千萬萬的人可以學(xué)習(xí)使用。

滴滴平臺(tái)一方面解決了人們打車難的問題,另一方面也將閑賦私家車全部利用起來,給打車這和私家車車主同時(shí)滿足需求和創(chuàng)造價(jià)值。

幾年前我們看著小卡片的菜單和電話叫外賣,現(xiàn)在我店家再也不用通過發(fā)傳單來招攬生意了,只要用戶有需要打開app就可以實(shí)現(xiàn)足不出戶享受用餐。

互聯(lián)網(wǎng)將社會(huì)資源效率更大化。無論是外賣平臺(tái),學(xué)習(xí)平臺(tái),電商平臺(tái)都是將原來局限在小范圍的服務(wù)放大到全國各地的人群使用。這些都是互聯(lián)網(wǎng)技術(shù)賦予的能量。

3. 破界,突破界限,讓不可能成為可能

在那個(gè)守著電視機(jī),聽廣播看報(bào)紙,用著紙幣的年代。怎么也不會(huì)想到今天我們可以拿著手機(jī)看新聞,追劇,刷抖音;用手機(jī)乘公交,乘地鐵;手機(jī)當(dāng)錢包,網(wǎng)紗購物,線下消費(fèi)。所以很多老人好像有點(diǎn)不能理解年輕人的生活方式。

所以技術(shù)可以讓滿足我們需求的方式發(fā)生改變,甚至是顛覆的。

從前我們看的也并不是電視本身,而是看聲情并茂的畫面;報(bào)紙也不是報(bào)紙而是信息;使用紙幣是為了完成交易。電視,報(bào)紙,紙幣這是一個(gè)時(shí)代的載體。

互聯(lián)網(wǎng)技術(shù)的發(fā)展讓這些載體發(fā)生了變化,打破了刻板印象。讓我們知道了很多東西其實(shí)只是個(gè)物體,這些物體幫助實(shí)現(xiàn)我們內(nèi)心產(chǎn)生的需要。

今天只是這些物體被新的物體替代了,就好比手機(jī)替代了一部分看電視的需求。在十幾年前我們怎么也不會(huì)想到今天那么多東西都被改變和替代。也許我們現(xiàn)在不切實(shí)際的想法,在將來的某一天也終將會(huì)被替代和成為現(xiàn)實(shí)。

互聯(lián)網(wǎng)把我們每一個(gè)人連接在一起。放大了市場,提升了效率,突破了界限。用一種新的形式滿足人們?nèi)招略庐惖男枨笊?jí)。

互聯(lián)網(wǎng)繼續(xù),5G來襲,展望未來。

互聯(lián)網(wǎng)已經(jīng)滲透到了各行各業(yè)。大到與我們生活息息相關(guān),也可以小到陌生領(lǐng)域。人們都說互聯(lián)網(wǎng)的發(fā)展已經(jīng)到了瓶頸,我更愿意相信是互聯(lián)網(wǎng)是暫時(shí)進(jìn)入到了它的發(fā)展周期。

技術(shù)只會(huì)不斷的向前,不斷的用新的更好的方式來突破替代的舊的形式。隨著5G網(wǎng)絡(luò)的到來,肯定會(huì)有新一輪的技術(shù)革命到來。

第5代移動(dòng)通信網(wǎng)絡(luò)比4G網(wǎng)絡(luò)的傳輸速度要快10倍以上,一部1G的電影可在8秒之內(nèi)下載完成,我相信這絕對又是一個(gè)新的起點(diǎn),很期待5G時(shí)代給我們帶來的驚喜。

4G時(shí)代連接人與人,是服務(wù)業(yè)的升級(jí)

不難發(fā)現(xiàn),4G網(wǎng)絡(luò)應(yīng)用大多數(shù)屬于服務(wù)范疇。像電商,外賣,打車,餐飲其實(shí)都是服務(wù)員行業(yè)。4G時(shí)代提高了服務(wù)效率,實(shí)現(xiàn)了跨距離,跨空間服務(wù)。

視頻聊天可以穿越見面時(shí)空對話;電商可以讓你在一個(gè)地方買遍全國甚至全球;新零售可以實(shí)現(xiàn)不出門買菜做飯。4G網(wǎng)絡(luò)連接人與人,大大提高了人與人之間服務(wù)的效率和數(shù)量。

5G時(shí)代連接人與物,交互體驗(yàn)升級(jí)

隨著5G網(wǎng)絡(luò)的到來及速度效率的提升,我們可以實(shí)現(xiàn)更加多元化的連接。

5G可以做到4G想做但有無法實(shí)現(xiàn)的事情,例如擴(kuò)展到人與物之間的連接;也可以在4G基礎(chǔ)上實(shí)現(xiàn)更加精準(zhǔn)的計(jì)算,又如精密的醫(yī)療,更加精準(zhǔn)和快速的大數(shù)據(jù)。

5G網(wǎng)絡(luò)將繼續(xù)升級(jí)改變我們生活,它將繼續(xù)改變娛樂,交通,醫(yī)療,智能家居等等領(lǐng)域。我們可以試著猜想:

  • VR技術(shù),讓看電影能夠有更佳的3D體驗(yàn)。
  • 網(wǎng)上購物不在需要看圖片。而是有更好的體驗(yàn),身臨其境在虛擬的店鋪中??梢詫ι唐酚杏|摸和移動(dòng)等虛擬的互動(dòng)體驗(yàn)。
  • 無人駕駛技術(shù)
  • 智能家居。不在家或者在外地對家居進(jìn)行操作,比如:關(guān)窗,開空調(diào),掃地等。
  • 智能醫(yī)療。如;遠(yuǎn)程手術(shù)。由于5G網(wǎng)絡(luò)有著更加精準(zhǔn)的效率。支持醫(yī)生運(yùn)用機(jī)器跨醫(yī)院操作手術(shù)等。

技術(shù)的進(jìn)步會(huì)給我們的生活帶來改變,我們期待新的形式來滿足我們的需求,期待我們的生活和生產(chǎn)更加的智能和。

 文章來源:人人都是產(chǎn)品經(jīng)理

如何把產(chǎn)品的癢點(diǎn)變成爽點(diǎn)?

資深UI設(shè)計(jì)者

新康眾用戶體驗(yàn)設(shè)計(jì)部 – 伊格:在細(xì)節(jié)(體驗(yàn))決定「成敗」的今天,設(shè)計(jì)該如何尋找支點(diǎn)撬動(dòng)產(chǎn)品體驗(yàn),甚至于是行業(yè)體驗(yàn)?

2007年1月9日,史蒂夫·喬布斯在 MacWorld 大會(huì)上正式推出了第一代 iPhone,至今已過去近 13 年了。為了帶來更好的用戶體驗(yàn),第一代 iphone 在硬件的設(shè)計(jì)上,摒棄了以往的物理鍵盤,開發(fā)了「虛擬鍵盤」結(jié)合手勢交互用于信息輸入,無疑是當(dāng)時(shí)智能手機(jī)行業(yè)內(nèi)的一大顛覆式改革。

我們聚焦于「虛擬鍵盤」本身來分析,「虛擬鍵盤」在日常生活的輸入場景中已經(jīng)做得足夠的「好用」、「」,甚至于近乎完美。在「體驗(yàn)經(jīng)濟(jì)」愈演愈烈的今天,各行各業(yè)為了打造更好的輸入體驗(yàn),都圍繞著「虛擬鍵盤」并結(jié)合行業(yè)特性做著一些個(gè)性化的設(shè)計(jì)嘗試,比如我們今天要講的「汽車行業(yè)」。

行業(yè)聚焦

說到了「汽車行業(yè)」,我們首先從「汽車」本身開始說起,目前汽車共擁有兩個(gè)「身份信息」,一個(gè)是車架號(hào)(VIN碼)、一個(gè)是車牌號(hào),在日常生活中我們最常接觸的就是車牌號(hào),其次才是車架號(hào)。

從互聯(lián)網(wǎng)興起至今,各行各業(yè)為了營造更好的服務(wù)體驗(yàn),都走上了「互聯(lián)網(wǎng)+」/「移動(dòng)互聯(lián)網(wǎng)+」的戰(zhàn)略路線,當(dāng)然「汽車行業(yè)」也不例外。圍繞汽車本身衍生出了眾多對 B 端以及對 C 端客戶的汽車服務(wù),如常見的「智慧停車、違章繳費(fèi)、維修、保養(yǎng)、保險(xiǎn)、車聯(lián)網(wǎng)等」一系列汽車服務(wù),均可以在線上場景中體驗(yàn)到。

我們在線上體驗(yàn)汽車服務(wù)的同時(shí),首先需聚焦于汽車本身,其核心要素之一就是「汽車身份信息」,在體驗(yàn)流程中首先需要將車牌信息錄入系統(tǒng),才能便于我們后續(xù)更好的對服務(wù)進(jìn)行體驗(yàn)(如:線上停車?yán)U費(fèi)、違章繳費(fèi)、維保預(yù)約、保險(xiǎn)理賠等眾多與汽車相關(guān)的場景)。

那么在「汽車行業(yè)場景」中使用「系統(tǒng)鍵盤」輸入車牌信息是否依舊能達(dá)到「好用」及「」的體驗(yàn)?zāi)???jīng)過測試后得出了結(jié)論:在使用「系統(tǒng)鍵盤」輸入車牌信息時(shí),雖然能夠完成輸入任務(wù),但相較于日常生活中的輸入體驗(yàn),使用「系統(tǒng)鍵盤」輸入車牌信息就顯得不是那么的「好用」及「」了。

痛點(diǎn)解析

我們回到車牌本身來分析一下,使用「系統(tǒng)鍵盤」輸入車牌信息,從輸入體驗(yàn)的角度來衡量,在「行業(yè)場景」下,「系統(tǒng)鍵盤」為何只被評定為「能用」?

基于上述問題我們先從車牌開始說起,路面上常見的車是「私家車」和「警車」,從「國家車牌行業(yè)標(biāo)準(zhǔn)文件」中分析得出,常見的標(biāo)準(zhǔn)車牌是由「省份、城市、序號(hào)」三者組合而成的,其中具體信息又是由「漢字、英文、數(shù)字」構(gòu)成的。

在「行業(yè)場景」下使用「系統(tǒng)鍵盤」輸入車牌信息,不夠好用、的兩個(gè)主要原因如下。

痛點(diǎn)一:輸入操作繁瑣

使用「系統(tǒng)鍵盤」在進(jìn)行車牌信息輸入時(shí),需要在漢字、英文、數(shù)字三者之間來回切換才能完成車牌信息的輸入任務(wù)。

痛點(diǎn)二:無法達(dá)到標(biāo)準(zhǔn)化輸入

使用「系統(tǒng)鍵盤」輸入的車牌信息是否有效、是否符合國家標(biāo)準(zhǔn)最終還需要在輸入任務(wù)完成后,依靠系統(tǒng)的校驗(yàn)機(jī)制來驗(yàn)證其有效性。

上面所述的問題,雖然還稱不上是「痛點(diǎn)」,但是對于那些每天與車打交道的用戶而言也算是一個(gè)「不痛不癢」的問題,在細(xì)節(jié)(體驗(yàn))決定成敗的今天,細(xì)微的體驗(yàn)問題我們也應(yīng)當(dāng)盡可能的讓其變得「完美」。

設(shè)計(jì)策略

基于上述問題,通過洞察分析我們發(fā)現(xiàn)了「設(shè)計(jì)機(jī)會(huì)點(diǎn)/發(fā)力點(diǎn)」,以「虛擬鍵盤」為抓手,明確了設(shè)計(jì)策略,開始著手設(shè)計(jì)符合行業(yè)特性的「專用輸入組件 」。 在「行業(yè)場景」下通過「專用輸入組件」輸入車牌信息,圍繞「」(提高輸入效率)、「防錯(cuò)」(定義防錯(cuò)機(jī)制使得輸入的信息符合國家標(biāo)準(zhǔn))兩個(gè)目標(biāo)進(jìn)行設(shè)計(jì),從而使其在「行業(yè)輸入場景」下達(dá)到「好用」及「」的體驗(yàn)。

目標(biāo)與方法

基于上述的設(shè)計(jì)策略,我們明確了本次設(shè)計(jì)的核心目標(biāo) :解決輸入效率(提效)、解決輸入出錯(cuò)(防錯(cuò)機(jī)制)。那么接下來我們分析一下國家對于汽車行業(yè)車牌標(biāo)準(zhǔn)的相關(guān)政策與規(guī)則,從中挖掘達(dá)到設(shè)計(jì)目標(biāo)的方法。

1. 認(rèn)識(shí)車牌

在做分析之前我們需要對其關(guān)鍵因素(車牌)有一定的認(rèn)知,下面所展示的車牌基本涵蓋了目前我國所有的車牌類型。其中包括常見的如「普通藍(lán)牌」、「普通黃牌」、「新能源車牌」、「教練車牌」、「警用牌」等。

2. 車牌分類

為了使車牌信息變得更具條理性,我們對其進(jìn)行一次分類,分類的依據(jù)「是基于他們相互之間的組合規(guī)則與共性特征而決定的」。我們將其分為四大類:「普通車牌」、「特種車牌」、「新能源車牌」、「特殊類車牌」。

具體分類細(xì)則如下:

  • 普通車牌:由 「省份/城市/序號(hào)」 組成的,其序號(hào)是由 「數(shù)字/字母」 構(gòu)成的,這類車牌屬于 7 位數(shù)牌照。
  • 特種車牌:由 「省份/城市/序號(hào)」 組成的,其序號(hào)是由 「數(shù)字/字母/漢字」 構(gòu)成的,并且序號(hào)中 「漢字必須是車牌號(hào)的最后一位」 ,這類車牌屬于 7 位數(shù)牌照。
  • 新能源車牌:由 「省份/城市/序號(hào)」 組成的,其序號(hào)是由 「數(shù)字/字母」 構(gòu)成的,這類車牌屬于 8 位數(shù)牌照。
  • 特殊類車牌:這類車牌因無共性規(guī)則,我們將其定義為特殊類。(這類國家特殊單位的車在我們的日常生活中/汽車行業(yè)內(nèi)的工作中接觸到的機(jī)會(huì)也不會(huì)很多)。

3. 定義設(shè)計(jì)范圍

分類完畢后,我們定義一個(gè)設(shè)計(jì)范圍,因?yàn)樵谠O(shè)計(jì)時(shí)我們往往很難通過一套設(shè)計(jì)方案來滿足所有車牌的輸入場景,所以在設(shè)計(jì)時(shí)我們會(huì)圍繞那些有規(guī)則的、有共性特征的車牌進(jìn)行組件的設(shè)計(jì),從而滿足大部分的輸入場景。

根據(jù)車牌的分類規(guī)則,我們將「普通車牌」、「特種車牌」、「新能源車牌」三大類,定義在行業(yè)輸入組件的設(shè)計(jì)覆蓋范圍內(nèi)。特殊類車牌雖然在日常生活中接觸到的概率較少,但是我們也應(yīng)當(dāng)盡可能的滿足其輸入場景,通過自定義車牌號(hào)的方式,調(diào)用「系統(tǒng)鍵盤」來完成其輸入任務(wù)。

4. 共性&差異

在明確了分類細(xì)節(jié)與設(shè)計(jì)范圍后我們對范圍內(nèi)的三類車牌做一次共性與差異化的具體分析,以便于在組件設(shè)計(jì)時(shí)根據(jù)規(guī)則定義一些防錯(cuò)機(jī)制。(為了便于理解,防錯(cuò)機(jī)制將會(huì)在Demo階段展示)

普通牌 & 特種牌:共性特征(組合規(guī)則一致、二者都屬于7位數(shù)牌照)差異(特種牌的序號(hào)中多了一個(gè)「漢字序號(hào)」,并且漢字序號(hào)必須是車牌號(hào)的最后一位)。

特種牌 & 能源牌:

  • 共性特征:組合規(guī)則一致;
  • 差異:特種牌屬于 7 位數(shù)牌照,且存在漢字序號(hào);能源牌屬于 8 位數(shù)牌照,且不存在漢字序號(hào)。

能源牌 & 普通牌:

  • 共性特征:組合規(guī)則一致;
  • 差異:能源牌屬于 8 位數(shù)牌照,普通牌屬于 7 位數(shù)牌照。

5. 分析總結(jié)

通過上述的幾步分析,我們對國內(nèi)的車牌有了一定的了解,并為其進(jìn)行了歸納細(xì)分,定義了設(shè)計(jì)范圍,分析了范圍內(nèi)各類車牌的共性以及差異,最后我們結(jié)合「國家車牌行業(yè)標(biāo)準(zhǔn)文檔」與上述幾步的分析結(jié)果,得出以下結(jié)論:

  • 常見的標(biāo)準(zhǔn)車牌號(hào)是由「省份、城市、序號(hào)」組成的,省份位的字符必須是漢字(各省、自治區(qū)、直轄市簡稱),城市位的字符必須是英文(發(fā)牌機(jī)關(guān)代號(hào):A~Z),序號(hào)位的字符必須是數(shù)字/字母組合(A~Z / 0~9),特殊序號(hào)位的字符必須是漢字(港、澳、掛、學(xué)、警)且漢字序號(hào)必須是車牌號(hào)的最后一位。
  • 行業(yè)輸入組件定義為兩種:省份輸入組件(因國內(nèi)省份較多所以將其作為一個(gè)獨(dú)立的組件)、車牌號(hào)輸入組件(該組件由英文、數(shù)字、漢字序號(hào)組成)。
  • 特殊類車牌:這類車牌雖無共性規(guī)則,但需要滿足其輸入場景,通過自定義車牌號(hào)的方式,調(diào)用系統(tǒng)鍵盤來完成其輸入任務(wù)。

具體方案 – 省份輸入組件

省份輸入組件的結(jié)構(gòu)分為兩部分。

第一部分是文字按鈕,點(diǎn)擊后調(diào)用「系統(tǒng)鍵盤」輸入自定義車牌信息。

  • 滿足特殊類車牌號(hào)的輸入場景;
  • 滿足一些自定義信息的輸入場景。例如我們通過調(diào)研了解到,汽車維修行業(yè)他們有時(shí)候不單單會(huì)錄入車牌信息,偶爾還會(huì)錄入一些特殊的車牌代號(hào),比如灑水車001、警車003等。

第二部分是車牌號(hào)的省份簡稱(各省、自治區(qū)、直轄市簡稱)。簡稱部分采用了國家地理行政區(qū)的劃分原則,對各區(qū)域內(nèi)省份依次排序(排名不分先后)。

下面說明一下按照行政區(qū)劃分原則做為省份排序的好處。

以華東區(qū)為例,該區(qū)域包含了山東、江蘇、安徽、浙江、福建、上海這幾個(gè)城市,在同一個(gè)行政區(qū)內(nèi)必然會(huì)有一/多個(gè)經(jīng)濟(jì)體系相對發(fā)達(dá)城市。城市一發(fā)達(dá),附近省份的外來車輛就會(huì)相對較多,例如在江蘇地區(qū)總會(huì)看到安徽地區(qū)的車輛一樣 。

現(xiàn)在的軟件基本都使用了定位技術(shù),我們在外省進(jìn)行車牌信息的錄入時(shí),系統(tǒng)是會(huì)自動(dòng)獲取并填寫當(dāng)前所在地區(qū)的省份簡稱,以降低用戶使用鍵盤的輸入次數(shù)。如果我們是外地牌照車輛則需要將當(dāng)前省份簡稱刪除,再修改為車牌的實(shí)際省份簡稱。

按照行政區(qū)作為省份排序的好處:在修改省份簡稱時(shí),相鄰的省份在排序上會(huì)比較接近,這樣用戶在查找、選擇對應(yīng)省份時(shí)比起按首字母排序/其他方式的排序,查找效率會(huì)相對更快。

具體方案 – 車牌號(hào)輸入組件

車牌號(hào)輸入組件分為三部分,第一部分是自定義車牌號(hào)的文字按鈕 + 完成操作按鈕;第二部分是漢字序號(hào) + 數(shù)字序號(hào)的按鍵;第三部分是英文序號(hào)以及刪除按鍵。

其中英文字母按鍵是由 25 個(gè)字母組成,缺少了字母 i ,因?yàn)榇髮懽帜?i 與數(shù)字 1 的字體設(shè)計(jì)及其相似,導(dǎo)致兩者很難辨別,所以在「行業(yè)標(biāo)準(zhǔn)文件」中明確指出,字母 i 不可用于組成車牌信息。

當(dāng)然「行業(yè)標(biāo)準(zhǔn)文件」中還指出了另一個(gè)字母,也不可用于組成車牌信息,他就是字母 O ,原因與字母 i 一樣,大寫的字母 O 與 0 及其相似,導(dǎo)致兩者很難辨別。

那么為什么我們的組件中還要包含字母 O 呢?因?yàn)樵谶^去字母 O 是作為公務(wù)車專用代號(hào),存在于車牌號(hào)的第二位(城市代號(hào)位)俗稱「O牌特權(quán)車」。隨著 O 牌泛濫,特權(quán)肆意,有的省份就將 O 牌由公務(wù)專用改為了普通民用,還有的省份直接取消了 O 牌,當(dāng)然還有部分省份保留著 O 牌作為公務(wù)用車專用代號(hào),所以我們在組件設(shè)計(jì)中保留了字母 O。

DEMO – 演示

為了更好的展示設(shè)計(jì)方案,以及便于大家理解其中的設(shè)計(jì)細(xì)節(jié),下面我們通過 DEMO 的方式,定性的模擬幾種輸入場景,通過「專用輸入組件」并結(jié)合防錯(cuò)機(jī)制進(jìn)行車牌號(hào)的錄入。

場景一:車牌號(hào)省份簡稱修改

基于地理定位技術(shù),進(jìn)入信息填寫頁面系統(tǒng)會(huì)默認(rèn)獲取到當(dāng)前地區(qū)的車牌省份簡稱,此時(shí)如果是外省車輛,則需要對省份簡稱做修改變更。其實(shí)車牌號(hào)第二位也能通過定位技術(shù)獲取到,但是目前我國存在一個(gè)城市擁有多個(gè)發(fā)牌代號(hào)的場景,例如蘇州市發(fā)牌機(jī)關(guān)代號(hào)「蘇E」、「蘇U」,包括一些直轄市也存在這種情況,所以這也是城市代號(hào)不默認(rèn)獲取的直接原因。通過定位技術(shù)獲取信息本身是一種提效的策略,但是基于上述場景反而可能會(huì)適得其反,

場景二:輸入第2~5位車牌號(hào)

車牌號(hào)的第二位必須是英文,此時(shí)數(shù)字序號(hào)按鍵與特殊漢字序號(hào)按鍵為禁用狀態(tài)。當(dāng)?shù)诙卉嚺铺?hào)輸入完畢時(shí),數(shù)字序號(hào)按鍵變?yōu)榭捎脿顟B(tài),此時(shí)無論輸入的第二位車牌號(hào)是否為字母 O 都必須將其禁用,因?yàn)樽帜窸只會(huì)存在于車牌號(hào)的第二位。

場景三:輸入第6~7位車牌號(hào) – 完成普通車牌的輸入場景

當(dāng)?shù)?6 位車牌號(hào)輸入完畢時(shí),激活特殊漢字序號(hào)。當(dāng)?shù)?7 位車牌號(hào)輸入了英文/數(shù)字時(shí),禁用特殊漢字序號(hào),至此普通車牌號(hào)輸入完畢。

場景四:輸入第6~7位車牌號(hào) – 完成特種車牌的輸入場景

當(dāng)?shù)?6 位車牌號(hào)輸入完畢時(shí),激活特殊漢字序號(hào),因?yàn)樘厥鉂h字序號(hào)只會(huì)存在于車牌號(hào)的第 7 位。當(dāng)漢字序號(hào)輸入完畢后,刪除按鍵以外的其余按鍵全部禁用,因?yàn)闃?biāo)準(zhǔn)的特種車牌只有 7 位,至此特種車牌號(hào)輸入完畢。

場景五:輸入第6~8位車牌號(hào) – 完成新能源車牌的輸入場景

當(dāng)?shù)?6 位車牌號(hào)輸入完畢時(shí),激活特殊漢字序號(hào)。當(dāng)?shù)?7 位車牌號(hào)輸入了英文/數(shù)字時(shí),禁用特殊漢字序號(hào)。當(dāng)?shù)?8 位車牌號(hào)輸入了英文/數(shù)字時(shí),刪除按鍵以外的其余按鍵全部禁用,因?yàn)闃?biāo)準(zhǔn)的新能源車牌只有8位,至此新能源車牌號(hào)輸入完畢。

場景六:演示特殊類車牌號(hào)的輸入方法

特殊車輛在我們的日常生活中/汽車行業(yè)相關(guān)業(yè)務(wù)中接觸到的概率較少,但我們也應(yīng)當(dāng)盡可能的滿足其輸入場景。點(diǎn)擊自定義按鈕后,彈出系統(tǒng)默認(rèn)鍵盤,此時(shí)車牌號(hào)輸入框中內(nèi)容清空,文案變?yōu)椤刚堓斎胱远x內(nèi)容」,用戶將信息輸入完成后系統(tǒng)不做強(qiáng)制校驗(yàn)。

最后,我們又通過定性的方式,基于兩個(gè)輸入場景對組件的輸入效率進(jìn)行了模擬預(yù)估,得出結(jié)論:使用「專用組件」輸入車牌信息,相比較于使用「系統(tǒng)鍵盤」輸入效率均大幅度得到了提升。

總結(jié)

俗話說「藝術(shù)產(chǎn)生情緒,設(shè)計(jì)解決問題」。設(shè)計(jì)是需要基于一定的規(guī)則體系之內(nèi),倘若設(shè)計(jì)脫離了商業(yè)/行業(yè)規(guī)則,缺少了解決問題的能力,那么其結(jié)果就可能變成了一個(gè)耐人尋味的藝術(shù)品。

在細(xì)節(jié)(體驗(yàn))決定成敗的今天,如何將「癢點(diǎn)」變?yōu)椤杆c(diǎn)」,如何通過細(xì)微的設(shè)計(jì)優(yōu)化改良產(chǎn)品的用戶體驗(yàn)甚至于影響到整個(gè)行業(yè)的體驗(yàn),這正是我們作為產(chǎn)品人、體驗(yàn)設(shè)計(jì)師該深耕發(fā)力的地方。

文章來源:優(yōu)設(shè)

交互設(shè)計(jì)師如何梳理業(yè)務(wù)需求?

資深UI設(shè)計(jì)者

需求整理的現(xiàn)狀

寫這篇文章的初衷,是在實(shí)際工作中遇到 PRD & DRD 文檔,對于一些交互設(shè)計(jì)圖,會(huì)產(chǎn)生不理解,或者說在實(shí)際落地畫圖的時(shí)候會(huì)發(fā)現(xiàn)一些前后不一致的問題,解釋過于冗余,不清晰。在接觸新的業(yè)務(wù)時(shí),很難把新理解的內(nèi)容從上至下的消化完整。所以希望通過這篇文章幫助剛接觸交互的同學(xué)更好地開展交互設(shè)計(jì)工作。

在傳統(tǒng)瀑布式需求分析流程中,我們設(shè)計(jì)師往往拿到的是已成型的信息架構(gòu)圖&產(chǎn)品結(jié)構(gòu)圖&關(guān)鍵業(yè)務(wù)流程圖,只是了解一下大概是什么類型的產(chǎn)品,很難發(fā)現(xiàn)企業(yè)產(chǎn)品中真正關(guān)鍵的流程價(jià)值點(diǎn)在哪里,或者說也不清楚后續(xù)發(fā)展的走向,只能卯足了勁去做圖做說明,整理完整。時(shí)間緊迫壓力大,又要照顧整個(gè)項(xiàng)目。往往決定產(chǎn)品成功與否的,是產(chǎn)品 20% 的主要功能(二八原則)。所以在面臨初期產(chǎn)品設(shè)計(jì)中,應(yīng)該將主要精力放在重要功能流程中。

目前,在互聯(lián)網(wǎng)產(chǎn)品中,敏捷開發(fā)是所有產(chǎn)品設(shè)計(jì)者最推崇的。原因在于,能夠?qū)I(yè)務(wù)、設(shè)計(jì)、開發(fā)更有前瞻性&敏捷性。

理解業(yè)務(wù)需求,是做好交互的首要條件

產(chǎn)品交互的成功一定是建立在業(yè)務(wù)需求提煉清晰的基礎(chǔ)上。業(yè)務(wù)需求的價(jià)值提煉,也是設(shè)計(jì)師需要參與完成的。業(yè)務(wù)需求是一個(gè)比較大的任務(wù),來源可能是老板的要求,可能是產(chǎn)品提出的,也可能是用戶的反饋。通過業(yè)務(wù)需求,我們要分析出相關(guān)的業(yè)務(wù)目標(biāo)。有個(gè)偶然的機(jī)會(huì),了解到彩色 UML 的設(shè)計(jì)方法,在具體實(shí)踐中,感覺這個(gè)方法能夠快速適應(yīng)任何業(yè)務(wù)流程,簡單方便,易懂,并能快速發(fā)現(xiàn)業(yè)務(wù)流程中的問題,加以修正完善。

彩色UML建模

有幸認(rèn)識(shí)王海鵬老師,他推薦了早年他翻譯的彩色 UML 建模一書,作者 Peter Coad,是將彩色和企業(yè)組件集成到建模技術(shù)之中的第一本書的主要作者,是世界上經(jīng)驗(yàn)豐富的建模人員之一,他所創(chuàng)建的模型幾乎涉及到所有行業(yè)。

此書是第一本介紹用彩色來表達(dá)軟件設(shè)計(jì)的著作。作者用 4 種顏色來代表 4 種架構(gòu)型,給定一種顏色,你就知道這個(gè)類可能具有哪些屬性、鏈接、方法和交互。得到的彩色構(gòu)建塊能創(chuàng)建更好的模型,并獲得應(yīng)有的認(rèn)可。彩色和架構(gòu)型僅僅是開始。作者更進(jìn)一步將這些架構(gòu)型發(fā)展為 12 個(gè)類的領(lǐng)域無關(guān)組件。作者在過去 10 年中創(chuàng)建的每個(gè)模型,都遵循這個(gè)組件所表達(dá)的基本形狀和職責(zé)。

筆者利用彩色 UML 建模的設(shè)計(jì)方法,用于業(yè)務(wù)梳理工作,達(dá)到了意想不到的效果。以下為彩色 UML 建?;靖拍睿ń厝〔噬?UML 建模書中的介紹)。

△ 《彩色UML建模書》第9頁

△ 《彩色UML建模書》第10頁

△ 事例會(huì)員注冊

交互設(shè)計(jì)中常用圖

1. 實(shí)體關(guān)系圖(又稱ER圖)

定義:ER 圖是用來描述現(xiàn)實(shí)世界中的實(shí)體關(guān)系模型,所謂實(shí)體是指客觀上或者邏輯上存在并且可以區(qū)分的人事物。

作用:促使你以最適合技術(shù)理解實(shí)現(xiàn)的方法,來規(guī)范的描述功能模塊的核心要素,其實(shí)就是數(shù)據(jù)庫的物理結(jié)構(gòu)。而這種描述是無二義的,最清晰傳達(dá) PM 的設(shè)計(jì)思想。

2. 功能結(jié)構(gòu)圖

功能結(jié)構(gòu)圖就是按照功能的從屬關(guān)系畫成的圖表,在該圖表中的每一個(gè)框都稱為一個(gè)功能模塊。功能模塊可以根據(jù)具體情況分得大一點(diǎn)或小一點(diǎn),分解得最小功能模塊可以是一個(gè)程序中的每個(gè)處理過程,而較大的功能模塊則可能是完成某一個(gè)任務(wù)的一組程序。用通俗的話來說,功能結(jié)構(gòu)圖就是以功能模塊為類別,介紹模塊下各功能組成的圖表。

作用

  • 梳理需求,以鳥瞰的方式對整個(gè)產(chǎn)品頁面中的功能結(jié)構(gòu)形成一個(gè)直觀的認(rèn)識(shí)。
  • 思考并明確產(chǎn)品的功能模塊及其功能組成。
3. 信息結(jié)構(gòu)圖

信息架構(gòu)屬于用戶體驗(yàn)的結(jié)構(gòu)層,是產(chǎn)品的骨架。一般是由產(chǎn)品經(jīng)理或者更高層的管理人員給出大框架。除非是大的產(chǎn)品迭代,否則不會(huì)大改。

作用

  • 幫助 PM 梳理復(fù)雜內(nèi)容的信息組成,避免信息內(nèi)容在展示過程中出現(xiàn)遺漏、混亂、重復(fù);
  • 作為開發(fā)工程師建立數(shù)據(jù)庫的參考依據(jù)。

信息結(jié)構(gòu)圖構(gòu)成要素

  • 導(dǎo)航:網(wǎng)頁訪問者的訪問途徑。
  • 頻道:某一個(gè)同性質(zhì)的功能或內(nèi)容的共同載體,也可稱為功能或內(nèi)容的類別。
  • 子頻道:某頻道下細(xì)分的另一類別。
  • 頁面:單個(gè)或附屬某個(gè)頻道或分類下的界面。
  • 模塊:頁面中多個(gè)元素組成的一個(gè)區(qū)域內(nèi)容,可以有一個(gè)或多個(gè),也可以循環(huán)出現(xiàn),如:文章列表。
  • 模塊元素:模塊中的元素內(nèi)容,以文章列表舉例,文章標(biāo)題、文章摘要、文章發(fā)布時(shí)間,這些都是元素,都是組成模塊的內(nèi)容,同時(shí)他們也是可以循環(huán)出現(xiàn)的。元素的類型可以是:文字、圖片、鏈接等等。
4. 產(chǎn)品結(jié)構(gòu)圖

定義:產(chǎn)品結(jié)構(gòu)圖是綜合展示產(chǎn)品信息和功能邏輯的圖表,簡單說產(chǎn)品結(jié)構(gòu)圖就是產(chǎn)品原型的簡化表達(dá)。

作用:它能夠在前期的需求評審中或其他類似場景中作為產(chǎn)品原型的替代,因?yàn)楫a(chǎn)品結(jié)構(gòu)圖相較于產(chǎn)品原型,其實(shí)現(xiàn)成本低,能夠快速對產(chǎn)品功能結(jié)構(gòu)進(jìn)行增、刪、改操作,減少 PM 在這個(gè)過程中的實(shí)現(xiàn)成本。

5. 業(yè)務(wù)流程圖(泳道圖)

業(yè)務(wù)流程圖,不是操作流程圖也不是頁面流程圖。它是產(chǎn)品的整體業(yè)務(wù)流程,直接和業(yè)務(wù)掛鉤,可以說是產(chǎn)品的核心流程。

作用

通過業(yè)務(wù)流程圖,鉆研關(guān)鍵事件的流程,分析為什么要這么做,探索出更深層次的問題,從而對現(xiàn)有不合理的業(yè)務(wù)流程進(jìn)行重組優(yōu)化,進(jìn)而制定優(yōu)化方案,改進(jìn)現(xiàn)有流程;闡述在項(xiàng)目中各個(gè)角色是如何產(chǎn)生相關(guān)聯(lián)系的。

繪制規(guī)范/建議

  • 讓涉眾參與,不要閉門造車:與業(yè)務(wù)流程圖包含的各個(gè)參與角色代表適時(shí)確認(rèn)事情的原本流程。
  • 恰當(dāng)?shù)膶哟畏纸猓灰獙⑺械沫h(huán)節(jié)都鋪到一張圖上。
  • 逐漸深入,先抓枝干:切忌一開始就陷入細(xì)節(jié)。
  • 流程一定有開始和結(jié)束:切忌交出來的流程圖,讓讀者問:流程的開始點(diǎn)是什么?用清晰的代表開始和結(jié)束的符號(hào)來完成第一步和最后一 步。
  • 流程圖符號(hào)繪制排列順序:由上至下,由左至右。
  • 同一流程圖符號(hào)大小宜相對一致。
  • 編號(hào):這是讓溝通效率更高的優(yōu)化措施。當(dāng)你有了編號(hào)系統(tǒng),相當(dāng)于對你的流程圖都賦予了唯一識(shí)別身份證號(hào)。負(fù)責(zé)流程規(guī)則審核和優(yōu)化的部門能夠清楚在郵件里傳達(dá) H5.1 流程優(yōu)化,大家就更明確指的是什么。
  • 路徑符號(hào)應(yīng)避免互相交叉。
6. 任務(wù)流程圖

任務(wù)流程圖就是通過圖形化的表達(dá)形式,闡述產(chǎn)品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個(gè)功能時(shí),會(huì)產(chǎn)生的一系列操作和反饋的圖標(biāo)。

作用:基于業(yè)務(wù)流程,進(jìn)行任務(wù)流程梳理,闡述角色和程序發(fā)生交互的流程,你如何進(jìn)行操作,系統(tǒng)如何進(jìn)行反饋。

任務(wù)流程與需求文檔中的業(yè)務(wù)流程并不一樣。雖然它們都是流程圖,但業(yè)務(wù)流程更偏向于業(yè)務(wù)限制、后臺(tái)邏輯等,并不過分注重用戶的操作邏輯。而任務(wù)流程則需要關(guān)注用戶如何操作、界面如何反饋等,從而引導(dǎo)用戶完成用戶目標(biāo)。

7. 頁面流程圖

定義:指電子產(chǎn)品具體所呈現(xiàn)的頁面跳轉(zhuǎn)流程圖。其承載了業(yè)務(wù)流程圖所包含的業(yè)務(wù)流轉(zhuǎn)信息。

作用:

  • 交互設(shè)計(jì)/原型設(shè)計(jì)的底子,基本依據(jù)。
  • 站在用戶視角,代表用戶所有可能的操作過程,頁面流程能快速發(fā)現(xiàn)體驗(yàn)問題。
  • 突出頁面元素與邏輯關(guān)系,提升原型設(shè)計(jì)的效率。

8. 線框圖/原型圖

定義:頁面的模塊、元素、人機(jī)交互的形式,利用線框描述的方法,將產(chǎn)品脫離皮膚狀態(tài)下更加具體跟生動(dòng)的進(jìn)行表達(dá)。

作用:用例闡釋者,用來了解用例的用戶界面;系統(tǒng)分析員,用來了解用戶界面如何影響系統(tǒng)分析;設(shè)計(jì)員,用來了解用戶界面如何施加影響及它對系統(tǒng)「內(nèi)部」的要求;類測試人員,用來制定測試計(jì)劃活動(dòng)。

構(gòu)成要素

  • 頁面標(biāo)題:即每一個(gè)頁面的對應(yīng)標(biāo)題,一般就是導(dǎo)航欄標(biāo)題。
  • 頁面內(nèi)容:以黑白為主,保證信息規(guī)整易讀。
  • 交互說明:用標(biāo)簽將其對應(yīng)起來,包括交互邏輯、操作流程及反饋、元素狀態(tài)、字符限制、異常/特殊狀態(tài)、相關(guān)規(guī)則等等。
  • 主流程線:只需要畫出主流程線即可,千萬不可太多太雜,時(shí)刻考慮讀者的感受。
9. 線框圖/原型圖交互說明的幾種類型

限制

包含范圍值、極限值等。

范圍值主要指數(shù)據(jù)的取值范圍。比如,當(dāng)你的界面上出現(xiàn)了下拉菜單、篩選按鈕、滑塊等控件時(shí),你必須標(biāo)注清楚它們的選擇范圍,否則開發(fā)人員就不清楚該如何設(shè)定,如圖所示。

極限值主要指數(shù)據(jù)的顯示限制。比如,最多應(yīng)該顯示多少字?jǐn)?shù),過時(shí)如何顯示,是否折行等,如圖所示。

狀態(tài)

包含默認(rèn)狀態(tài)、常見狀態(tài)、特殊狀態(tài)等。

「默認(rèn)狀態(tài)」主要指默認(rèn)顯示的文字、數(shù)據(jù)、選項(xiàng)等。這些內(nèi)容需要注明,否則開發(fā)人員可能難以意識(shí)到這是用戶填完的效果,還是默認(rèn)就有的。

「常見狀態(tài)」主要指針對某一個(gè)模塊,經(jīng)常遇到的一些狀態(tài)。這些狀態(tài)都需要在原型上表述出來。比如一個(gè)普通的積分模塊,一般會(huì)出現(xiàn) 3 種狀態(tài):未登錄狀態(tài)、登錄后未簽到狀態(tài)、登錄后已簽到狀態(tài),如圖所示。

「特殊狀態(tài)」一般指非正常情況下的樣式、文案、說明等,如圖所示:

操作

包含常見操作、特殊操作、誤操作、手勢操作等。

「常見操作」主要指正常操作時(shí)得到的反饋狀態(tài)。比如一個(gè)普通的翻頁控件,在經(jīng)過不同操作后會(huì)立即出現(xiàn)如下的狀態(tài)。

「特殊操作」主要指一些極端情況下的操作。一般,用戶不會(huì)這么操作,但是一旦遇到極端情況,還是要想好應(yīng)對措施,因?yàn)閷τ陂_發(fā)人員來說,不管是正常的還是極端的操作情況,他們都要去編寫對應(yīng)的代碼。如下圖,是填寫用戶信息的例子,當(dāng)不寫交互說明時(shí),開放往往會(huì)遇到很多問題:如果已經(jīng)勾選了 2 個(gè)人,再勾選第 3 個(gè)人,怎么辦?如果勾選了「張XX」,下面區(qū)塊中會(huì)相應(yīng)地出現(xiàn)張XX的信息,那么這時(shí)候允許修改張XX的身份證信息嗎?假如允許的話,修改后「張XX」還保持勾選狀態(tài)嗎?表單提交后要新增一個(gè)被保險(xiǎn)人信息嗎?若修改的是除身份證號(hào)碼以外的信息,「張XX」 還保持勾選狀態(tài)嗎?提交表單時(shí)是覆蓋原存儲(chǔ)信息嗎?若修改后出生日期、性別與身份證號(hào)碼不吻合怎么辦?等等。

面對各種復(fù)雜的情況,一方面要和開發(fā)人員積極探討,看看有沒有其他的解決方法可以簡化各種邏輯判斷;另一方面,在得出結(jié)論后,要把交互說明寫清楚,避免出現(xiàn)讓開發(fā)人員感到棘手的情況。

「誤操作」主要指當(dāng)用戶操作錯(cuò)誤時(shí)的情況。不過我們在設(shè)計(jì)時(shí)要盡量避免有用戶犯錯(cuò)的機(jī)會(huì)。如圖所示,提示中已告訴用戶「庫存5件」,如果這個(gè)時(shí)候用戶在「數(shù)量」一欄中輸入「6」會(huì)怎么樣呢?系統(tǒng)會(huì)自動(dòng)幫用戶將其改為「5」省去用戶手動(dòng)修正的操作。

「手勢操作」主要指用戶使用移動(dòng)產(chǎn)品時(shí)的操作方式。常見的有點(diǎn)擊雙擊、長按、捏、伸、滑動(dòng)等等。

反饋

用戶操作后得到的反饋動(dòng)作,包含提示、跳轉(zhuǎn)、動(dòng)畫等。

「提示」主要指操作后,系統(tǒng)反饋給用戶的文字說明等,如圖所示。

「跳轉(zhuǎn)」主要指點(diǎn)擊某個(gè)鏈接后,頁面跳轉(zhuǎn)到哪里。設(shè)計(jì)師需要在原型上注明跳轉(zhuǎn)時(shí)是「原頁面刷新」還是「新頁面打開」。如果是做手機(jī)應(yīng)用的話,需要注明跳轉(zhuǎn)時(shí)的轉(zhuǎn)場方式,如圖所示。

「動(dòng)畫」主要指用戶操作后,系統(tǒng)通過動(dòng)畫的方式反饋給用戶。動(dòng)畫給人的感覺比較友好、趣味性較強(qiáng),是非常常見的一種反饋形式。比如刪除某條信息,該信息以漸變消失的形式告訴用戶:這條信息已經(jīng)被刪除了。在移動(dòng)應(yīng)用中,動(dòng)畫反饋的形式更為常見。因此設(shè)計(jì)師一定要在原型上表述清楚動(dòng)畫的形式,必要時(shí)可以制作 domo 動(dòng)畫演示效果給開發(fā)人員。

文章來源:站酷

交互基礎(chǔ)_頁面加載方式

ui設(shè)計(jì)分享達(dá)人

作為UI設(shè)計(jì)師,我相信大家都是專注于界面設(shè)計(jì)的好不好看,至于界面與界面之間如何交互,點(diǎn)擊之后如何反饋,是一個(gè)比較容易被忽略的重要環(huán)節(jié)。

那么我們怎么處理好界面交互中的加載設(shè)計(jì),減少用戶因等待產(chǎn)生的焦慮情緒,保證整個(gè)體驗(yàn)無縫銜接,今天這篇文章就來總結(jié)下APP中數(shù)據(jù)加載模式設(shè)計(jì)。



一、為什么要加載?

1、用戶在進(jìn)行某些操作時(shí),都要從后臺(tái)請求數(shù)據(jù),這個(gè)過程都需要時(shí)間,系統(tǒng)應(yīng)該始終在合理的時(shí)間內(nèi)做出適當(dāng)?shù)姆答仯層脩袅私庹诎l(fā)生的事情,讓用戶知道此時(shí)的操作是有反應(yīng),減緩用戶因等待而產(chǎn)生的焦慮感。同時(shí)加載方式也可以做的有趣,吸引用戶注意力,增加沉浸式體驗(yàn),讓用戶輕松自在的享受等待;


2、體驗(yàn)無縫銜接,減少用戶跳失,正常的等待加載時(shí)間是0.3秒以內(nèi),同時(shí)不同場景對應(yīng)有不同的加載方式。



二、常見的加載場景及方式

a.加載場景:

不同場景有不同的加載方式,常見的加載場景一般有以下幾種:下拉刷新、上拉加載、切換新頁面的數(shù)據(jù)加載、頁面局部模塊的加載、啟動(dòng)頁加載、操作按鈕加載。實(shí)際工作中,要根據(jù)不同的場景搭配不同的加載樣式,才能更好的做到緩解用戶等待焦慮,降低用戶的跳失率。


b.加載方式:

1、全屏加載

主要出現(xiàn)在手機(jī)H5頁面,例如微信的文章詳情頁。一般會(huì)有進(jìn)度條或有趣的動(dòng)畫設(shè)計(jì),減輕用戶等待時(shí)的焦慮感。加載失敗后,頁面通常為空白頁,且有重新刷新操作按鈕。



優(yōu)點(diǎn):將整個(gè)頁面的內(nèi)容都加載出來才展現(xiàn)給用戶,能保證內(nèi)容的整體性,全部加載完才能夠系統(tǒng)化的閱讀。

缺點(diǎn):一般等待的時(shí)間較長,容易產(chǎn)生焦躁情緒,尤其是遇到網(wǎng)絡(luò)不好的情況


2、下拉刷新加載

主要出現(xiàn)在頁面內(nèi)容為推薦類、或者信息更新頻次高的產(chǎn)品,通過刷新加載新數(shù)據(jù),加載的loading樣式可以結(jié)合產(chǎn)品logo或IP形象進(jìn)行設(shè)計(jì),增加趣味性,吸引用戶注意力。



3.占位圖加載

如果頁面布局樣式比較固定,可以采用占位圖加載機(jī)制,先加載頁面布局和占位圖,先給用戶展示頁面框架,后加載頁面圖片細(xì)節(jié)部分,這種加載方式相對于直接展示白屏來說,呈現(xiàn)給用戶無縫銜接的感覺,體驗(yàn)更加流暢。


4.分布加載

當(dāng)頁面中有文字和圖片時(shí),優(yōu)先加載占網(wǎng)絡(luò)資源較小的元素,如先加載文字,后加載圖片,圖片加載完成前使用占位符顯示,保證用戶可以順暢閱讀,縮短用戶的等待時(shí)間,提高產(chǎn)品體驗(yàn)。


優(yōu)點(diǎn):可以幫助用戶快速閱讀內(nèi)容,了解信息。

這種加載形式更加適用于內(nèi)容閱讀型的APP或圖片、視頻類資源比較多的頁面。


5.自動(dòng)加載(懶加載

當(dāng)瀏覽信息時(shí),不停的向上滑動(dòng),新的內(nèi)容會(huì)不停的從底部出現(xiàn),這種方式稱為自動(dòng)加載。對于自動(dòng)加載,要注意每次加載多少條內(nèi)容,或者多少屏的內(nèi)容。一般會(huì)在距下面內(nèi)容一定距離時(shí)開始加載,當(dāng)網(wǎng)速非??斓臅r(shí)候,用戶并不能感知懶加載的動(dòng)作,這樣可以營造一種無極限瀏覽的錯(cuò)覺,很容易的把用戶吸引住。



優(yōu)點(diǎn):無需用戶操作,自動(dòng)加載后續(xù)內(nèi)容,營造沉浸式體驗(yàn)。

應(yīng)用:適合feed流、瀑布流、算法推薦類的內(nèi)容。

6.預(yù)加載

提前加載好頁面信息內(nèi)容,這樣當(dāng)網(wǎng)絡(luò)不好的時(shí)候,可直接從本地緩存中渲染,就不用再加載了。

比如用戶在看A頁面的時(shí)候,App在后臺(tái)加載完B頁,等用戶打開B頁的時(shí)候就不需要等待加載了,因?yàn)锳pp已經(jīng)幫用戶提前加載好了,給用戶提供無縫鏈接的感覺,弊端就是服務(wù)器壓力很大,就是要預(yù)測用戶行為,加載其他數(shù)據(jù),這樣會(huì)消耗不少流量,所以建議在WiFi網(wǎng)絡(luò)環(huán)境下采取這種預(yù)加載機(jī)制,而在蜂窩網(wǎng)絡(luò)狀態(tài)下則不采用預(yù)加載機(jī)制。



7.漸進(jìn)式加載

一般出現(xiàn)在圖片類產(chǎn)品,比如pinterest、unsplash等,當(dāng)瀏覽圖片的時(shí)候,經(jīng)常是先看到一張模糊圖或與圖片較為相似的色彩值圖片,然后再漸漸的變得清晰,這種效果就叫做漸進(jìn)式加載。漸進(jìn)式加載能夠大大的提升體驗(yàn)感。



8.后臺(tái)加載(異步處理)

用戶在前端執(zhí)行操作后,客戶端立即給予操作成功反饋提示,然后把請求放到后臺(tái)與服務(wù)器交互,這一過程用戶是看不到的,也不需要等待,體驗(yàn)是非常棒的。

例如在用微信發(fā)朋友圈時(shí),會(huì)覺得特別流暢,即使在網(wǎng)絡(luò)不好的情況下,會(huì)看到你的動(dòng)態(tài)立即展示在朋友圈列表,并不會(huì)提示你網(wǎng)絡(luò)不好,操作失敗,全部以操作成功來顯示,其實(shí)它只是將你發(fā)布的操作記錄了下來,等網(wǎng)絡(luò)一好就將動(dòng)態(tài)上傳到服務(wù)器,從而完成發(fā)布行為,微信的點(diǎn)贊也是同樣的操作,你給好友點(diǎn)了贊,并不會(huì)提示你網(wǎng)絡(luò)不好,操作失敗,而是提示你點(diǎn)贊成功了,其實(shí)它只是將你點(diǎn)贊的操作記錄了下來,等網(wǎng)絡(luò)一好就將點(diǎn)贊的行為上傳到服務(wù)器,從而完成點(diǎn)贊行為會(huì),給用戶帶來體驗(yàn)流暢的感覺。

所以這種加載方式是需要根據(jù)具體使用場景來權(quán)衡使用的,對于一些重要的操作,建議還是使用模態(tài)的方式加載,對于一些小操作,如點(diǎn)贊、訂閱、關(guān)注,可采用后臺(tái)加載的方式。



9.模態(tài)加載

以上幾種方式都是采用非模態(tài)加載,不會(huì)對用戶造成干擾,用戶可以做別的事情,不需要等待加載完成,大大降低了等待的焦躁感。

模態(tài)加載對用戶干擾比較大,需要中斷用戶的其他操作,用戶只能等待加載結(jié)束,因?yàn)槿绻脩魣?zhí)行了其他操作就會(huì)打斷正在進(jìn)行的加載過程,實(shí)現(xiàn)不了用戶的目標(biāo)。



應(yīng)用:用戶執(zhí)行的操作本身不能和其他操作同時(shí)進(jìn)行,例如登錄,退出,應(yīng)用啟動(dòng),手機(jī)支付等場景。



三、具體實(shí)施方法小結(jié)

1、能用非模態(tài)加載的盡量不要去用模態(tài)加載,如果非得用模態(tài)加載,也盡量給一個(gè)能取消的按鈕,方便用戶在不愿意等待的情況下取消操作。


2、如果加載的時(shí)間比較長,最好能告知用戶加載進(jìn)度,讓用戶心理有個(gè)預(yù)期,這樣用戶更愿意等待,不會(huì)因?yàn)榈却a(chǎn)生焦慮感,分分鐘卸載你的產(chǎn)品??茖W(xué)的實(shí)驗(yàn)證實(shí),先慢后快的進(jìn)度條是讓用戶心理感受上最快的設(shè)計(jì),這是因?yàn)橛脩糇钊菀子涀∽詈笠凰查g的感覺,如果最后一瞬間,感知到了快,就覺得很順暢了。


3、數(shù)據(jù)加載本身就是很考驗(yàn)用戶心態(tài)感受,所以盡量通過一些有趣的動(dòng)畫來轉(zhuǎn)移用戶的注意力,營造沉浸式體驗(yàn),同時(shí)增加了趣味性,給予了產(chǎn)品人性化的設(shè)計(jì)。

 


總結(jié)

作為產(chǎn)品設(shè)計(jì)人員,盡量給用戶好的體驗(yàn),我們應(yīng)該讓產(chǎn)品自己去解決問題,而不是把問題拋給用戶。在考慮人與客戶端交互的同時(shí)也要把客戶端和服務(wù)端之間的數(shù)據(jù)傳輸考慮進(jìn)來,站在用戶、客戶端和服務(wù)器閉環(huán)的角度去思考產(chǎn)品,才能設(shè)計(jì)出體驗(yàn)更好的數(shù)據(jù)加載方案。


轉(zhuǎn)自-站酷


藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì)  ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)  圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)。


日歷

鏈接

個(gè)人資料

存檔