• 首頁

    一個 npm 包的坎坷“續命”之生

    seo達人

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



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



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



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



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



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



    從作者的博文和推文可以看到,作者在 2014 年離開了 Mozilla。而從作者的 github 動態更可以看出,作者應該是轉入了 golang 陣營。



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



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



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



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



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



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



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







    相關閱讀



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



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



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



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




    兩欄布局

    seo達人

    兩列布局的幾種方法

    html結構

     <div class="content">

          <div class="content-left">

            左側固定200px

          </div>

          <div class="content-right">

            右側自適應

          </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;

            / 必須給父級定寬不然自適應盒子沒定寬只會由內容撐開 /

            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()函數

     / 清除瀏覽器默認邊距 /

          {

            margin: 0;

            padding: 0;

          }



          .content {

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

            不過設置后里面文字不顯示了可以給里面塊設置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()函數,左右兩塊都要浮動

     /
    清除瀏覽器默認邊距 /

         
    {

            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布局也有列等高的默認效果。需要設置: align-items: start;。 /

            align-items: start;

          }

          .content-left {

            height: 200px;

            background: red;

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

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

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

            box-sizing: border-box;

            grid-column: 1;

          }

          .content-right {

            background: blue;

            height: 200px;

            box-sizing: border-box;

            grid-column: 2;

          }



    雙11大屏——情緒的超級機器

    雪濤

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

    數據大屏的設計有什么不同?

    數據大屏的設計,并非是傳統意義上的設計師或產品經理就能完成的。它需要將藝術家、科學家與企業家的能力集于一身,需要擁有對動態數據的把握能力、對產業經濟與供應鏈的結構方法、對社會議題的捕捉與構造,以及宏觀的視野和細致入微的匠人用心??梢暬尡涞臄祿a生溫度。


    1.雙11為什么需要數據大屏?


    數據大屏是一個凝聚情緒的超級機器。

    數據大屏不講述傳奇,它就是傳奇本身。



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


    2.導演、故事與設計


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


    1. 內容規劃:故事與腳本設計

    2019數據大屏的內容框架大致分為三個層次。


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


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


    戰略層:企業與國家發展同行。阿里的改變,反射了社會關系和社會結構。點擊購物車就能買到全世界的東西,而對于國內市場,精準的人群定位、產業帶的建設都讓拉動內需變成一個大眾都能參與的事情。


    2. 情緒規劃:情緒鏈路與鏡頭設計

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


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

    為什么是彎道超車?

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



    我們將這個核心理念融入GMV大屏的設計,正如逍遙子所說的那樣“消費不是商業的終點,通過消費者來提升生產端生產契機,優化生產決策?!睘榇?,我們導演了新商業文明的數據大戲:GMV屏中的賽道,3個鏡頭穿越了大航海時代、互聯網時代,數字經濟時代彎道超車的新商業文明,快進了商業文明的發展。

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


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


    3.雙11數據大屏設計概覽


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

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


    △2019雙11數據大屏-歷年GMV增速


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

    中國經濟與中國消費者的貢獻,是對全球經濟的貢獻。消費者購物車里藏著美好生活的愿景,打開了世界消費的新空間。天貓國際把來自全球78個國家和地區的品牌和商品帶進中國,滿足消費者的品質消費需求。買遍全球的購物車,更為世界經濟增長貢獻拉動力。越來越多國際品牌青睞中國市場,通過天貓國際滿足中國消費者的需求。


    △2019雙11數據大屏-全球化


    3. 服務夜生活點亮城市夜經濟地圖

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


    △2019雙11數據大屏-杭州經濟體服務網絡


    △2019雙11數據大屏-天貓商超網絡


    △2019雙11數據大屏-杭州城市夜生活


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

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


    △2019雙11數據大屏-新人群,新消費


    5. 品牌榜:千里江山圖

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


    △2019雙11數據大屏-品牌榜


    4.結束語


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

    文章來源:站酷

    「手勢交互」的知識點

    雪濤

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

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

    手勢的意義

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

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

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

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

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

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

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

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

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

    常見的手勢行為:

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

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

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

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

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

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

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

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

    拇指驅動設計

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

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

    結果是,手機屏幕變大,雙手持機的用戶變多,但依然還有 75% 的用戶是使用拇指來觸摸屏幕的。因此,術語「拇指驅動設計」應運而生。

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

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

    看下圖。

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

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

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

    當了解了手勢的一些意義,以及拇指操作區域對于產品設計的重要性之后,我們就可以通過一些案例來做一個全局分析了。

    1. 內容在上,操作在下

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

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

    通過翻閱多方資料,我發現在工業設計領域有一條重要的基本設計原則:內容在上,操作在下。

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

    如下圖的鍵盤操作提示:

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

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

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

    通過這一小段之前聊過的內容,你們會發現,手勢與拇指操作其實在驅動著產品設計。下面我們來聊個大的案例。

    漢堡包菜單的消失解析

    漢堡包菜單,也就是側邊欄導航,Facebook 早期測試顯示側邊欄導航讓用戶使用率降低了一半。

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

    1. 可見性太低

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

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

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

    2. 效率較低

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

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

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

    3. 與平臺模式沖突

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

    當頁面聚焦在「標簽 2」時,右滑除了能回到「標簽 1」,同樣也很可能會切出側邊導航欄。

    這樣的手勢沖突,導致頁面層級與功能導航的優先級混亂了。

    無論是導航還是控件,當它們組成一個頁面后,它們的操作就會有優先級。比如下面這個例子。

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

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

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

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

    4. 小結

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

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

    它們的核心點就是拇指與觸摸屏的關系。

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

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

    彈框的操作路徑

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

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

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

    這是錯的!

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

    如圖。

    大家要記住的是,當頁面邏輯與手勢操作產生邏輯沖突時,我們不是去否定以前已經被驗證且正確的內容,而是通過創新,來解決這個沖突。這就是拇指驅動設計的一種方式。

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

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

    Banner

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

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

    下面來看輪播圖與手勢的關系。

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

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

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

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

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

    搜索框的變化

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

    為什么呢?

    市面上對這個問題的解釋是這樣的:用戶已經被現在的產品訓練得在界面的頂部必須看到一個搜索框,設計師打破這個常規就要承擔風險。

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

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

    地圖類產品把搜索框移到下面來的首創應用不是高德,應該是 Lyft。

    瞧,拇指驅動設計,多酷~

    總結

    《上癮》里有句話:當人們不由自由地做出下一個舉動時,新的習慣就會成為他們日常生活的一部分。

    當手勢充分地發揮了作用,輔助用戶操作或實現功能,它就成了用戶不可分割的一部分。

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

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

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

    文章來源:優設

    體驗設計師要懂的七大交互心理學

    分享達人


    如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

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



    閱讀時間:大約9分鐘


    目錄


    • 前言

    • 7±2法則

    • 費茨定律

    • ??硕?

    • 格式塔原則

    • 色彩心理學

    • 馮·雷斯托夫效應

    • 奧卡姆剃刀原理

    • 總結




    前言


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




    7±2法則的定義


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

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


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

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


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



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

    桌子   電腦   椅子  水杯   鉛筆   地圖   綠植   鍵盤   鼠標   文件


    7±2法則的運用


    1、組塊記憶


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

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

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



    2、優化選項


    網易新聞和今日頭條的導航都遵循了7±2法則,更多的信息左側滑動即可。



    3、頁面布局


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




    費茨定律的定義


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

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

    T=移動設備所需時長;a,b是經驗常量,D=設備起始位置和目標位置的距離;W=目標的寬度大小。



    費茨定律的理解


    1、設備當前位置和目標位置的距離D越長,所用時間越長;

    2、目標的大小W越大,所用時間越短。


    費茨定律的應用


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


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



    2、讓相關的內容更接近


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



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


    安卓手機刪除應用時的操作、Potoshop軟件頂部菜單等、Mac操作系統的底部應用等,無論我們怎么操作,鼠標都不會超過這些區域。







    ??硕傻亩x


    ??硕?— 原稱??撕B桑℉ick Hymalrs 1aw),是一種心理物理學定律。

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


    ??硕傻膽?/span>


    ??硕傻膽煤軓V泛,不僅是在產品上,在生活中也隨處可用。


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


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



    猿輔導APP中,導航默認的是所有的課程,對于學員來說選擇自己想要學習的課程,比較浪費時間,右側的設計就是將我們不感興趣的課程關閉推薦,剩下的課程大大縮短了我們選擇和尋找的時間




    格式塔的定義


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


    格式塔的應用


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



    1、簡單性原則


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


    58同城和愛奇藝首頁都是均衡和對稱的構圖



    2、接近性原則


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


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



    3、相似性原則


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


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



    4、連續性原則


    人的視覺有追隨一個方向上的連續性,以便把不關聯的元素聯系到一起。


    我們在APP中??吹搅斜硪彩沁B續性原則的應用




    色彩心理學定義


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


    色彩心理學應用


    • 黑色:精致和力量

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

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

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

    • 黃色:樂觀、歡樂

    • 綠色:平衡、可持續的增長

    • 紫色:皇權、精神意識、奢華

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

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


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

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



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



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


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




    馮·雷斯托夫效應定義


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

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


    比如,下面這個紅西紅柿


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


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





    奧卡姆剃刀定律定義


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

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


    奧卡姆剃刀定律的應用


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



    總結


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


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

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

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

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

    色彩心理學:顏色也是影響人們的情緒,選用上要謹慎

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

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

    轉自:站酷-麥小兜Sarah 

    藍藍設計www.kgenes.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。


    如何復制網頁上不能復制的文本!!!

    seo達人

       我們經常需要引用(白嫖)一些網頁上的文字,但是豆丁網,百度文庫等等設置的有復制權限,我們無法直接復制,或者復制文字有上限,提示付費。

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

    1.手機掃描:

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



    2.魔鬼牽引:

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



    3.側邊翻譯:

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



    4.原始查看法:

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





    5.氪金法:

        沒別的,充錢就完事了。



    6.某巨巨提供:

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






    互聯網生活的底層邏輯:連接、賦能、破界

    雪濤

    互聯網的底層邏輯就是以一種更的形式來滿足了我們的需要,讓我們的生活和生產更加的智能和。

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

    互聯網的底層邏輯

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

    我們對比沒有網絡年代?;ヂ摼W給我們生活帶來了極高的便利和效率。

    我認為互聯網的底層邏輯是:用一種更的形式來滿足我們生活生產而產生的需要。

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

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

    經過對比發現:

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

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

    互聯網技術的讓購物,讓買衣服多了一種途徑,多了一種形式并且有別于我們傳統的購買方式。

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

    現在我們要聊的并不是網絡紅人的偉大數據。而是網絡直播這個事。想一下,網絡直播是否在真實生活情景有原型。

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

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

    我們暫時稱這些情景為現場直播,現場叫賣。由于互聯網技術的成熟,直播平臺的成熟。將現場直播搬到了網絡直播。網絡直播底層邏輯就是現場叫賣的另一種形式。

    我們可以發現,互聯網很多項目其實都是可以從現實生活中找到原型:

    • 購物–電商
    • 線下地推–網絡直播
    • 電話叫餐–外賣
    • 培訓–網課
    • 閱覽館–電子書
    • 辦證跑腿提交紙質資料–網上提交電子檔資料
    • ……

    互聯網如何讓生活生產變得更為?

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

    假如沒有網絡,我們人與人之間的生產活動大多只存在于本地圈子。例如:

    • 在當地文化圈學習,與當地同齡人成為同學。
    • 信息和話題交流閉塞,對外界信息獲取滯后。
    • 和當地人做生意,把貨品賣給當地的消費者。

    有了網絡:

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

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

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

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

    比如:A想采購一批水果加工儀器,但當地農業為主,別說售賣水果加工儀器,即便是詢問他人也鮮有人知道。

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

    再如:十八線縣城要學習IT編程語言,一般來說要去大城市培訓機構學習。有了網絡,直接在一些課程平臺上購買課程就可以了。

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

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

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

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

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

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

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

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

    互聯網技術的發展讓這些載體發生了變化,打破了刻板印象。讓我們知道了很多東西其實只是個物體,這些物體幫助實現我們內心產生的需要。

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

    互聯網把我們每一個人連接在一起。放大了市場,提升了效率,突破了界限。用一種新的形式滿足人們日新月異的需求升級。

    互聯網繼續,5G來襲,展望未來。

    互聯網已經滲透到了各行各業。大到與我們生活息息相關,也可以小到陌生領域。人們都說互聯網的發展已經到了瓶頸,我更愿意相信是互聯網是暫時進入到了它的發展周期。

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

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

    4G時代連接人與人,是服務業的升級

    不難發現,4G網絡應用大多數屬于服務范疇。像電商,外賣,打車,餐飲其實都是服務員行業。4G時代提高了服務效率,實現了跨距離,跨空間服務。

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

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

    隨著5G網絡的到來及速度效率的提升,我們可以實現更加多元化的連接。

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

    5G網絡將繼續升級改變我們生活,它將繼續改變娛樂,交通,醫療,智能家居等等領域。我們可以試著猜想:

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

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

     文章來源:人人都是產品經理

    如何把產品的癢點變成爽點?

    雪濤

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

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

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

    行業聚焦

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

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

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

    那么在「汽車行業場景」中使用「系統鍵盤」輸入車牌信息是否依舊能達到「好用」及「」的體驗呢?經過測試后得出了結論:在使用「系統鍵盤」輸入車牌信息時,雖然能夠完成輸入任務,但相較于日常生活中的輸入體驗,使用「系統鍵盤」輸入車牌信息就顯得不是那么的「好用」及「」了。

    痛點解析

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

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

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

    痛點一:輸入操作繁瑣

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

    痛點二:無法達到標準化輸入

    使用「系統鍵盤」輸入的車牌信息是否有效、是否符合國家標準最終還需要在輸入任務完成后,依靠系統的校驗機制來驗證其有效性。

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

    設計策略

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

    目標與方法

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

    1. 認識車牌

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

    2. 車牌分類

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

    具體分類細則如下:

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

    3. 定義設計范圍

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

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

    4. 共性&差異

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

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

    特種牌 & 能源牌:

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

    能源牌 & 普通牌:

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

    5. 分析總結

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

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

    具體方案 – 省份輸入組件

    省份輸入組件的結構分為兩部分。

    第一部分是文字按鈕,點擊后調用「系統鍵盤」輸入自定義車牌信息。

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

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

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

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

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

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

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

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

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

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

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

    DEMO – 演示

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

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

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

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

    車牌號的第二位必須是英文,此時數字序號按鍵與特殊漢字序號按鍵為禁用狀態。當第二位車牌號輸入完畢時,數字序號按鍵變為可用狀態,此時無論輸入的第二位車牌號是否為字母 O 都必須將其禁用,因為字母O只會存在于車牌號的第二位。

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

    當第 6 位車牌號輸入完畢時,激活特殊漢字序號。當第 7 位車牌號輸入了英文/數字時,禁用特殊漢字序號,至此普通車牌號輸入完畢。

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

    當第 6 位車牌號輸入完畢時,激活特殊漢字序號,因為特殊漢字序號只會存在于車牌號的第 7 位。當漢字序號輸入完畢后,刪除按鍵以外的其余按鍵全部禁用,因為標準的特種車牌只有 7 位,至此特種車牌號輸入完畢。

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

    當第 6 位車牌號輸入完畢時,激活特殊漢字序號。當第 7 位車牌號輸入了英文/數字時,禁用特殊漢字序號。當第 8 位車牌號輸入了英文/數字時,刪除按鍵以外的其余按鍵全部禁用,因為標準的新能源車牌只有8位,至此新能源車牌號輸入完畢。

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

    特殊車輛在我們的日常生活中/汽車行業相關業務中接觸到的概率較少,但我們也應當盡可能的滿足其輸入場景。點擊自定義按鈕后,彈出系統默認鍵盤,此時車牌號輸入框中內容清空,文案變為「請輸入自定義內容」,用戶將信息輸入完成后系統不做強制校驗。

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

    總結

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

    在細節(體驗)決定成敗的今天,如何將「癢點」變為「爽點」,如何通過細微的設計優化改良產品的用戶體驗甚至于影響到整個行業的體驗,這正是我們作為產品人、體驗設計師該深耕發力的地方。

    文章來源:優設

    交互設計師如何梳理業務需求?

    雪濤

    需求整理的現狀

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

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

    目前,在互聯網產品中,敏捷開發是所有產品設計者最推崇的。原因在于,能夠對業務、設計、開發更有前瞻性&敏捷性。

    理解業務需求,是做好交互的首要條件

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

    彩色UML建模

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

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

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

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

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

    △ 事例會員注冊

    交互設計中常用圖

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

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

    作用:促使你以最適合技術理解實現的方法,來規范的描述功能模塊的核心要素,其實就是數據庫的物理結構。而這種描述是無二義的,最清晰傳達 PM 的設計思想。

    2. 功能結構圖

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

    作用

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

    信息架構屬于用戶體驗的結構層,是產品的骨架。一般是由產品經理或者更高層的管理人員給出大框架。除非是大的產品迭代,否則不會大改。

    作用

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

    信息結構圖構成要素

    • 導航:網頁訪問者的訪問途徑。
    • 頻道:某一個同性質的功能或內容的共同載體,也可稱為功能或內容的類別。
    • 子頻道:某頻道下細分的另一類別。
    • 頁面:單個或附屬某個頻道或分類下的界面。
    • 模塊:頁面中多個元素組成的一個區域內容,可以有一個或多個,也可以循環出現,如:文章列表。
    • 模塊元素:模塊中的元素內容,以文章列表舉例,文章標題、文章摘要、文章發布時間,這些都是元素,都是組成模塊的內容,同時他們也是可以循環出現的。元素的類型可以是:文字、圖片、鏈接等等。
    4. 產品結構圖

    定義:產品結構圖是綜合展示產品信息和功能邏輯的圖表,簡單說產品結構圖就是產品原型的簡化表達。

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

    5. 業務流程圖(泳道圖)

    業務流程圖,不是操作流程圖也不是頁面流程圖。它是產品的整體業務流程,直接和業務掛鉤,可以說是產品的核心流程。

    作用

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

    繪制規范/建議

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

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

    作用:基于業務流程,進行任務流程梳理,闡述角色和程序發生交互的流程,你如何進行操作,系統如何進行反饋。

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

    7. 頁面流程圖

    定義:指電子產品具體所呈現的頁面跳轉流程圖。其承載了業務流程圖所包含的業務流轉信息。

    作用:

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

    8. 線框圖/原型圖

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

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

    構成要素

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

    限制

    包含范圍值、極限值等。

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

    極限值主要指數據的顯示限制。比如,最多應該顯示多少字數,過時如何顯示,是否折行等,如圖所示。

    狀態

    包含默認狀態、常見狀態、特殊狀態等。

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

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

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

    操作

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

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

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

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

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

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

    反饋

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

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

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

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

    文章來源:站酷

    交互基礎_頁面加載方式

    分享達人

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

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



    一、為什么要加載?

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


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



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

    a.加載場景:

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


    b.加載方式:

    1、全屏加載

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



    優點:將整個頁面的內容都加載出來才展現給用戶,能保證內容的整體性,全部加載完才能夠系統化的閱讀。

    缺點:一般等待的時間較長,容易產生焦躁情緒,尤其是遇到網絡不好的情況


    2、下拉刷新加載

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



    3.占位圖加載

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


    4.分布加載

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


    優點:可以幫助用戶快速閱讀內容,了解信息。

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


    5.自動加載(懶加載

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



    優點:無需用戶操作,自動加載后續內容,營造沉浸式體驗。

    應用:適合feed流、瀑布流、算法推薦類的內容。

    6.預加載

    提前加載好頁面信息內容,這樣當網絡不好的時候,可直接從本地緩存中渲染,就不用再加載了。

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



    7.漸進式加載

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



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

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

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

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



    9.模態加載

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

    模態加載對用戶干擾比較大,需要中斷用戶的其他操作,用戶只能等待加載結束,因為如果用戶執行了其他操作就會打斷正在進行的加載過程,實現不了用戶的目標。



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



    三、具體實施方法小結

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


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


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

     


    總結

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


    轉自-站酷


    藍藍設計www.kgenes.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。


    日歷

    鏈接

    blogger

    藍藍 http://www.kgenes.com

    存檔

    色情五月天色情网站仍有避风港亚洲精品无码成人A片在线古代, AV播放软件之首(上)av软件色狠狠躁日日躁夜夜躁A片55日巨乳姐妹花情色秀私服挨批太下流巨乳姐妹花叶姐妹全裸,日本女优排行榜日本宅男评最美丽可爱女优TOP12揭晓女优宅男评选,精品久久久女性三类性高潮都很动人成人小视频,无码AV免费一区二区三区A片天天射综合网日巨乳姐妹花情色秀私服挨批太下流巨乳姐妹花叶姐妹全裸