首頁

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

seo達人

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



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



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



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



7 月 4 日,lloyd 為這個庫添加了開源許可協(xié)議:WTFPL,發(fā)布 0.1.2 版。很多人對這個開源許可協(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。隨后這個庫再也沒有更新過。



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



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



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



2017 年 1 月 27 日,如同前兩位維護者一樣,marcominetti 也最終放棄了繼續(xù)更新這個庫。到此時,此庫支持的 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。



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







相關(guān)閱讀



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



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



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



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




兩欄布局

seo達人

兩列布局的幾種方法

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

 / 清除瀏覽器默認邊距 /

      {

        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;絕對定位

 /
清除瀏覽器默認邊距 /

     
{

        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彈性布局

/ 清除瀏覽器默認邊距 /

      {

        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;表格布局

 /
清除瀏覽器默認邊距 /

     
{

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

        display: table;

        / 必須給父級定寬不然自適應(yīng)盒子沒定寬只會由內(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ù)

 / 清除瀏覽器默認邊距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

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

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

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

        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里的運算符兩邊要有空格 /

        width: calc(100% - 200px);

      }



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

 /
清除瀏覽器默認邊距 /

     
{

        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里的運算符兩邊要有空格 /

        width: calc(100% - 200px);

      }



7.使用grid布局

 / 清除瀏覽器默認邊距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

        display: grid;

        grid-template-columns: 200px 1fr;

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

        align-items: start;

      }

      .content-left {

        height: 200px;

        background: red;

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

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

        而flex則是使用兩個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大屏——情緒的超級機器

資深UI設(shè)計者

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

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

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


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


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

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



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


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


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


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

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


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


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


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


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

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


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

為什么是彎道超車?

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



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

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


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


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


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

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


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


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

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


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


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

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


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


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


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


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

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


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


5. 品牌榜:千里江山圖

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


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


4.結(jié)束語


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

文章來源:站酷

「手勢交互」的知識點

資深UI設(shè)計者

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

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

手勢的意義

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

為什么呢?因為用戶從始至終都是在跟觸摸屏做接觸,不管換了什么設(shè)備,他們都是要通過屏幕與產(chǎn)品進行交互的。

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

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

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

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

手勢操作對我們來說如此自然和直觀的主要原因是因為它們類似于與真實對象進行直接交互。譬如你用遙控器控制電視上的按鍵,需要通過上下左右這樣的操作來定位指示器,而觸摸屏直接就可以通過手指點擊內(nèi)容進行操作。這是完全不同的概念。

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

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

常見的手勢行為:

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

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

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

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

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

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

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

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

拇指驅(qū)動設(shè)計

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

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

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

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

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

看下圖。

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

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

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

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

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

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

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

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

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

如下圖的鍵盤操作提示:

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

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

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

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

漢堡包菜單的消失解析

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

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

1. 可見性太低

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

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

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

2. 效率較低

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

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

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

3. 與平臺模式?jīng)_突

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

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

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

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

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

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

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

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

4. 小結(jié)

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

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

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

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

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

彈框的操作路徑

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

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

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

這是錯的!

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

如圖。

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

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

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

Banner

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

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

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

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

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

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

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

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

搜索框的變化

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

為什么呢?

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

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

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

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

瞧,拇指驅(qū)動設(shè)計,多酷~

總結(jié)

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

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

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

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

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

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

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

ui設(shè)計分享達人


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

心理學(xué)在我們生活中涉及的面很廣,是每個行業(yè)都要了解的,對于設(shè)計師來說,更要了解用戶的心理,因為我們的設(shè)計是面向用戶的 



閱讀時間:大約9分鐘


目錄


  • 前言

  • 7±2法則

  • 費茨定律

  • ??硕?

  • 格式塔原則

  • 色彩心理學(xué)

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

  • 奧卡姆剃刀原理

  • 總結(jié)




前言


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




7±2法則的定義


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

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


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

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


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



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

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


7±2法則的運用


1、組塊記憶


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

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

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



2、優(yōu)化選項


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



3、頁面布局


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




費茨定律的定義


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

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

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



費茨定律的理解


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

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


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


1、按鈕放大,點擊更容易


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



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


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



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


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







??硕傻亩x


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

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


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


希克定律的應(yīng)用很廣泛,不僅是在產(chǎn)品上,在生活中也隨處可用。


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


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



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




格式塔的定義


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


格式塔的應(yīng)用


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



1、簡單性原則


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


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



2、接近性原則


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


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



3、相似性原則


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


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



4、連續(xù)性原則


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


我們在APP中常看到列表也是連續(xù)性原則的應(yīng)用




色彩心理學(xué)定義


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


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


  • 黑色:精致和力量

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

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

  • 藍色:冷靜、安定、信任、安全

  • 黃色:樂觀、歡樂

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

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

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

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


一說到美食,我們能想到的顏色就是橘色,暖色系,因為這個顏色會增加食欲

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



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



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


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




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


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

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


比如,下面這個紅西紅柿


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


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





奧卡姆剃刀定律定義


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

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


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


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



總結(jié)


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


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

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

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

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

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

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

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

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


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

seo達人

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

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

1.手機掃描:

    拿著手機,用手機QQ的文字掃描直接去識別問題,遇上好識別的文章短的直接就識別,但是這種方法遇到文章比較長的就十分麻煩。可以針對那些選中



2.魔鬼牽引:

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



3.側(cè)邊翻譯:

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



4.原始查看法:

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





5.氪金法:

    沒別的,充錢就完事了。



6.某巨巨提供:

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






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

資深UI設(shè)計者

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • “瞧一瞧,看一看”
  • “廠家做活動,回饋消費者,不要1999,不要1599,只要999”
  • “走過路過不要錯過”
  • …..

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

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

  • 購物–電商
  • 線下地推–網(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)?shù)匚幕W(xué)習(xí),與當(dāng)?shù)赝g人成為同學(xué)。
  • 信息和話題交流閉塞,對外界信息獲取滯后。
  • 和當(dāng)?shù)厝俗錾猓沿浧焚u給當(dāng)?shù)氐南M者。

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

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

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

2. 賦能,釋放能量,價值最大化

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

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

但在網(wǎng)絡(luò)時代,我們只要百度或者阿里巴巴搜索??倳玫轿覀兿胍木€索或者結(jié)果,總能找到加工儀器供應(yīng)商的信息。

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

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

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

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

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

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

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

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

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

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

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

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

互聯(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)是暫時進入到了它的發(fā)展周期。

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

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

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

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

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

5G時代連接人與物,交互體驗升級

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

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

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

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

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

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

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

資深UI設(shè)計者

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

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

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

行業(yè)聚焦

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

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

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

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

痛點解析

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

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

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

痛點一:輸入操作繁瑣

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

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

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

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

設(shè)計策略

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

目標(biāo)與方法

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

1. 認識車牌

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

2. 車牌分類

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

具體分類細則如下:

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

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

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

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

4. 共性&差異

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

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

特種牌 & 能源牌:

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

能源牌 & 普通牌:

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

5. 分析總結(jié)

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

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

具體方案 – 省份輸入組件

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

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

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

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

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

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

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

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

具體方案 – 車牌號輸入組件

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

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

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

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

DEMO – 演示

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

場景一:車牌號省份簡稱修改

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

場景二:輸入第2~5位車牌號

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

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

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

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

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

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

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

場景六:演示特殊類車牌號的輸入方法

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

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

總結(jié)

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

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

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

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

資深UI設(shè)計者

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

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

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

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

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

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

彩色UML建模

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

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

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

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

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

△ 事例會員注冊

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

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

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

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

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

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

作用

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

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

作用

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

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

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

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

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

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

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

作用

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

繪制規(guī)范/建議

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

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

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

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

7. 頁面流程圖

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

作用:

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

8. 線框圖/原型圖

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

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

構(gòu)成要素

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

限制

包含范圍值、極限值等。

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

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

狀態(tài)

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

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

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

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

操作

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

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

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

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

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

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

反饋

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

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

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

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

文章來源:站酷

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

ui設(shè)計分享達人

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

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



一、為什么要加載?

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


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



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

a.加載場景:

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


b.加載方式:

1、全屏加載

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



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

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


2、下拉刷新加載

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



3.占位圖加載

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


4.分布加載

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


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

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


5.自動加載(懶加載

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



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

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

6.預(yù)加載

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

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



7.漸進式加載

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



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

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

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

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



9.模態(tài)加載

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

模態(tài)加載對用戶干擾比較大,需要中斷用戶的其他操作,用戶只能等待加載結(jié)束,因為如果用戶執(zhí)行了其他操作就會打斷正在進行的加載過程,實現(xiàn)不了用戶的目標(biāo)。



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



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

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


2、如果加載的時間比較長,最好能告知用戶加載進度,讓用戶心理有個預(yù)期,這樣用戶更愿意等待,不會因為等待產(chǎn)生焦慮感,分分鐘卸載你的產(chǎn)品。科學(xué)的實驗證實,先慢后快的進度條是讓用戶心理感受上最快的設(shè)計,這是因為用戶最容易記住最后一瞬間的感覺,如果最后一瞬間,感知到了快,就覺得很順暢了。


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

 


總結(jié)

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


轉(zhuǎn)自-站酷


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


日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.yvirxh.cn

存檔