<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          Loading設計思路分享

          博博


          UI妹兒 2018-05-04 10:44:21

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

          Loading設計思路分享

          Loading作為一個常見,并且帶有排他性的動畫,已經被各路大神表現的淋漓盡至。那么如何在眾優秀作品下,做出一個性化的Loading動畫?

          Loading設計思路分享

          Loading種類:

          1.狀態類(進度條):通常數據量很大,客戶端已知加載量,并能根據當前加載速度計算出何時加載完成。

          狀態型的Loading以進度條類為基準,可以為用戶提供預期時間,多伴隨百分比進度出現。進度條的形式以線性的形式出現,已知總量,降低用戶對期待時間的感受。無聊的等待會讓人厭煩,作為一個UI設計師需要關注每一個細節,尤其是用戶的情緒并將引導到加載后的頁面。

          By Piotr Adam Kwiatkowski

          2.無狀態類(菊花):通常數據量比較小,客戶端無法預知加載量。

          Loading設計思路分享

          無狀態類的Loaing以菊花為代表,通常都是一組可以無限循環播放的動畫。

          無狀態類的Loaing如有需要可以做的特別一些:https://dribbble.com/search?q=loading

          我們的App需要一個無狀態的Loading。

          我始終相信設計的直覺很重要,抓住直覺的爆發點,是一個成熟設計師必備的素質。于是先按照最初的想法快速做了一版。

          Loading設計思路分享

          相信很多人對這個Loaing眼熟,當然,這肯定不是我們要的效果,不過在制作這Loading的時候不斷的推翻自己的想法,時而清醒時而模糊,感覺突然找到了方向但瞬間也可能煙消云散。這種不斷反復的過程中還是收獲了很多。

          Loading設計思路分享

          既然是無限,循環,表現上就不能過于缺乏趣味,這個度很難把握。形式感上面設計要簡單,又要通過最直接的方法創造空間感,偶然間發現馬戲團的拋球表演。突然間有了靈感,于是就沿著這個思路開始動手設計:

          我嘗試去直接模仿拋棄的運動,但是效果并不是很好,但是從Demo中可以看出,值得很入研究。

          為此我們搜索了一下現實中的扔球效果:

          Loading設計思路分享

          經過分析我們得出了第一條小球的運動路經是一個無限的符號。

          工作路經確定后,導入C4D中進行單球運動軌跡測

          由于實例中,小球會受到重力以及加速度的影響,并非勻速運動,但在實際Loading制作過程中,為了視覺效果,我們希望小球做勻速運動

          發現問題:小球在中心焦點位置出現明顯卡頓

          起初我們認為是速度曲線沒有調整好所導致的,但我們嘗試幾版后發現并不是這樣,最后我們發現導致這個問題的原因是路經節點問題。

          Loading設計思路分享

          調整節點

          通過調整節點后,不難發現,中心焦點處的卡頓明顯不見了

          為了加強透視效果,我們將球的大小和顏色進行了關鍵幀處理,這已處理增加的景深對視覺的沖擊,使得空間感更強了。

          看起來怪怪的。。。。。

          為了使整個運動規律更加精準,我們發現運動的起點距離是關鍵,不懈的追求完美的情況下,總是會有頓悟的時刻,幸運的是找到了問題的所在

          三個球勻速運動的情況下,應該保證每相鄰兩個球之間路經上的距離是相同的。

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

          UI設計 如何讓你的配色更加舒服

          藍藍設計的小編

          色彩作為視覺感知的先覺條件,在很大程度上決定了作品的好壞以及給觀者留下什么樣的印象,人們感知到的即是通過色彩所傳遞出的情感,色彩作為一門獨立的學科,在基于其理論體系之上衍生出了眾多的搭配方法和技巧,在遵循色彩構成的原理之上可以更好的幫助我們對色彩有深入的認知和使用,對于色彩而言,除了要了解基本的構成之外,在使用的過程中更重要的是要對色相,明度,飽和度有敏銳的觀察里和視覺感知力,通過三者不斷的變化和調整把控使色彩更加具有情感,讓視覺感知更加的舒適并滿足我們的實際的需求;

          【css】背景顏色漸變,文字顏色漸變,邊框顏色漸變

          seo達人

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

          前言:css3的出現使得我們可以通過前端技術,讓網頁內容變得更豐富,更華麗。今天來玩玩好玩的顏色漸變。

          一、背景顏色漸變。

          [html] view plain copy
          1. <body>  
          2. <style>  
          3. .content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;  
          4. background-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%);   
          5. }  
          6. </style>  
          7. <div class="content">淺色夏沫,夏末微涼</div>  
          8. </body>  

          運行效果


          二、文字顏色漸變。

          [html] view plain copy
          1. <body>  
          2. <style>  
          3. .content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;  
          4. background-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%);   
          5. -webkit-background-clip:text; -webkit-text-fill-color:transparent; }  
          6. </style>  
          7. <div class="content">淺色夏沫,夏末微涼</div>  
          8. </body>  

          運行效果


          三、邊框顏色漸變。

          [html] view plain copy
          1. <body>  
          2. <style>  
          3. .content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;   
          4. border:10px solid;  
          5. border-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%) 10; }  
          6. </style>  
          7. <div class="content">淺色夏沫,夏末微涼</div>  
          8. </body>   

          運行效果

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


          淺談jQuery之動畫

          seo達人

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

          背景

          jQuery提供了JS未能提供的動畫效果,利用jQuery的動畫效果,可以極大的簡化JS動畫部分的邏輯

          滑入滑出動畫

          1. 滑入動畫

            定義:以下拉方式動畫效果將html內容顯示出來

            使用方式:

            $(selector).slideDown(time,function) 
            $(selector).slideDown(2000) 
            $(selector).slideDown() 
            $(selector).slideDown(fast/normal/slow)

            time代表執行動畫的時間,function代表動畫執行完之后所要執行的函數

          2. 滑出動畫

            定義:以上滑方式動畫效果將html內容隱藏出來

            使用方式:

            $(selector).slideUp(time,function) 
            $(selector).slideUp(2000) 
            $(selector).slideUp() 
            $(selector).slideUp(fast/normal/slow)

            time代表執行動畫的時間,function代表動畫執行完之后所要執行的函數

          3. 滑入滑出切換動畫

            定義:在滑入滑出動畫間切換

            使用方式:

            $(selector).slideToggle(time,function) 
            $(selector).slideToggle(2000) 
            $(selector).slideToggle() 
            $(selector).slideToggle(fast/normal/slow)

          淡入淡出動畫

          1. 淡入動畫

            作用:讓元素以淡淡的進入視線的方式展現出來

            使用方式

            $(selector).fadeIn(time,function) 
            $(selector).fadeIn(2000) 
            $(selector).fadeIn() 
            $(selector).fadeIn(fast/normal/slow)

          2. 淡出動畫

            作用:讓元素以淡淡的離開視線的方式隱藏起來

            使用方式

            $(selector).fadeOut(time,function) 
            $(selector).fadeOut(2000) 
            $(selector).fadeOut() 
            $(selector).fadeOut(fast/normal/slow)

          3. 淡入淡出切換動畫

            作用:讓元素在淡入淡出動畫切換

            使用方式

            $(Selector).fadeToggle(time,function) 
            $(selector).fadeToggle(2000) 
            $(selector).fadeToggle() 
            $(selector).fadeToggle(fast/normal/slow)

          4. 修改opacity

            作用: 修改opacity的值

            使用方式

            $(Selector).fadeTo(time,opacity,function) 
            time可以是字符串,可以是具體數字 
            也可只有參數一、參數二

          顯示隱藏動畫

          1. 顯示動畫

            作用: 將Html結構顯現出來

            使用方式

            $(Selector).show(time,function) 
            $(selector).show(2000) 
            $(selector).show() 
            $(selector).show(fast/normal/slow)

          2. 隱藏動畫

            作用: 將Html結構隱藏起來

            使用方式

            $(Selector).hide(time,function) 
            $(selector).hide(2000) 
            $(selector).hide() 
            $(selector).hide(fast/normal/slow)

          停止動畫

          • 定義:停止正在執行的動畫

          • 使用方式:

            $(selector).stop() 
            stop()中可以有兩個參數,參數一:后續動畫是否執行,參數二:當前動畫是否執行完畢,默認的是(false,false),注意第一個參數,true代表的是后續動畫不執行 
            ———————————————————————————— 
            第一種:(false,false) 
            后續動畫會執行,當前動畫不會執行完 
            第二種:(false,true) 
            后續動畫會執行,當前動畫會執行完 
            第三種:(true,false) 
            后續動畫不會執行,當前動畫不會執行完 
            第四種:(true,true) 
            后續動畫不會執行,當前動畫會執行完

          自定義動畫

          • 作用:執行一組CSS屬性的自定義動畫

          • 使用方式:

            $(selector).animate({CSS定義},time,function())

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

          基于jQuery的select2下拉框

          周周

          select2簡介】
                 select2.js是一個html select美化模擬類jquery插件,但是select2.js又遠非簡單的模擬美化那么簡單,它還具有搜索功能,多選功能(可限制選擇數量),ajax方式加載數據,可以設置placeholder……
          【引入文件】
                <linkrel="stylesheet" href="./css/select2.css">
                <scriptsrc="./js/jquery-2.1.0.js"></script>
                <scriptsrc="./js/select2.full.js"></script>
          select2的簡單用法】


          • 設置禁用狀態disabled,如:$(".js-example-disabled").prop("disabled",false);
          • 默認值設置:$("#select2").val("1").trigger("change");
          • 多選的默認值可以使用:$("#select2").val(["1","2"]).trigger("change"); 這樣傳遞數組過
          • select2還有豐富的自定義事件

            JavaScript

          $("#select2").on("select2:open", function (e) { log("select2:open", e); });
           
          $("#select2").on("select2:close", function (e) { log("select2:close", e); });
           
          $("#select2").on("select2:select", function (e) { log("select2:select", e); });
           
          $("#select2").on("select2:unselect", function (e) { log("select2:unselect", e); });
           
          $("#select2").on("change", function (e) { log("change"); });


          select2的其他組件】

                一、多選效果
                效果圖

          161511wc0em4p5ictpk0k6.gif



          代碼如下
          Html代碼

          <div class="box1 div">

             <p>多選下拉框</p>

          <select id="sel_menu1" multiple="multiple" class="form-control">

            <optgroup label="系統設置">

            <option value="1">用戶管理</option>

            <option value="2">角色管理</option>

            <option value="3">部門管理</option>

            <option value="4">菜單管理</option>

            </optgroup>

            <optgroup label="訂單管理">

            <option value="5">訂單查詢</option>

            <option value="6">訂單導入</option>

            <option value="7">訂單刪除</option>

            <option value="8">訂單撤銷</option>

            </optgroup>

            <optgroup label="基礎數據">

            <option value="9">基礎數據維護</option>

            </optgroup>

            </select>

          </div>


          JS代碼

          $("#sel_menu1").select2({[/align]
                   tags: true,
                   maximumSelectionLength: 3 //最多能夠選擇的個數

                });


          二、圖文結合效果
          效果圖

          161544vqrri760rldcbg5d.gif


          代碼

          Html代碼

          <div class="box2 div">
               <p>圖文結合的效果</p>
               <select id="sel_menu2" class="js-example-templating js-states form-control">
                    <optgroup label="系統設置">
            <option value="1">用戶管理</option>
             <option value="2">角色管理</option>
             <option value="1">部門管理</option>
            <option value="1">菜單管理</option>
            </optgroup>
            <optgroup label="訂單管理">
            <option value="1">訂單查詢</option>
            <option value="1">訂單導入</option>
             <option value="1">訂單刪除</option>
            <option value="1">訂單撤銷</option>
             </optgroup>
            <optgroup label="基礎數據">
            <option value="1">基礎數據維護</option>
            </optgroup>
                </select>
          </div>

          JS代碼

          $("#sel_menu2").select2({
                      templateResult: formatState,
                      templateSelection: formatState
                  });
                  function formatState(state) {
                      if (!state.id) {
                          return state.text; 
                      }
            var $state = $('<span><img src="./image/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
                      );
                      return $state;
                  };


          從已知探索未知的設計之道

          資深UI設計者

          從已知探索未知的設計之道
          DESIGN
          在尋找如何更好的“發現-解決問題”過程中,受到MIT媒體實驗室教授Neri Oxman文章《Design and Science - Krebs Cycle of Creativity》一文啟發,區別于“點對點”的發現-解決問題,為了從更高角度更好的解決問題,類比克雷布斯循環和創造力的克氏循環(KCC),將“發現-解決”問題/機會點這一過程整體系統化,嘗試提出系統性解決問題之思考-行動模型Krebs Cycle of Design,并以空間Feeds信息流產品舉例如何實踐Krebs Cycle of Design。



          從已知探索未知的設計之道 - 系統性解決問題之<思考-行動>模型Krebs Cycle of Design

          作為互聯網的用戶體驗實踐者-交互設計師,大大小小經歷過很多不同種類不同維度的項目,比如成熟期產品的常規迭代項目(如社交指數、校園問答、空間社交周報、Feeds新增禮物等),這時我是哪里需要就在那里的問題解決者;也會和產品一起探索新的產品方向,經歷從0到1的探索型項目(如視界、AR相機、ABCmouse等),此時我是主動探索的問題解決者。近兩年都在思考用戶體驗設計師該如何在互聯網團隊中發揮設計最大價值,最終達到“解決用戶問題,創造美好產品體驗”的終極目標。結合自己的用戶體驗設計從業經歷,我嘗試給設計做個定義:

          設計就是從已知探索未知的過程,是一個不斷解決問題的過程。

          具體來講,就是從發現問題/機會點后,通過“How”等各種方法手段去解決問題/機會點的整個過程。

          而解決問題/機會點的各種方法手段“How”就至關重要,在尋求“How”的過程中,受到MIT媒體實驗室教授Neri Oxman文章《Design and Science - Krebs Cycle of Creativity》一文啟發,Neri Oxman在《Design and Science - Krebs Cycle of Creativity》中提出的類似克雷布斯循環的創造力的克氏循環(KCC),創造性的將人類的創造力四種模式-科學、工程、設計和藝術,形成創意循環的地圖假設并進行了相應解讀,闡釋了學科之間不再是割裂離散的孤島這一命題。感興趣的小伙伴可以使用傳送門:

          英文版原文:《Age of Entanglement》https://jods.mitpress.mit.edu/pub/ageofentanglement。

          中文翻譯版本之【設計讀本】媒體實驗室教授Neri Oxman文章《糾纏時代》,揭示創意循環在科學、工程、設計與藝術中深層關系》:https://zhuanlan.zhihu.com/p/27951549

          拓展閱讀:《Design and Science byJoichi Ito》https://jods.mitpress.mit.edu/pub/designandscience。

          區別于“點對點”的解決問題,為了從更高角度更好的解決問題,類比克雷布斯循環和創造力的克氏循環(KCC),將“發現-解決”問題/機會點這一過程整體系統化,嘗試提出系統性解決問題之 < 思考-行動 > 模型-Krebs Cycle of Design。

          系統性解決問題之 < 思考-行動 > 模型主要包含以下8個階段:發現問題/機會點- 系統性思考- 判斷問題/機會點- 挖掘行動- 挖掘出真正的問題/機會點 - 解決行動 - 構建更好的產品(1小步)- 迭代進化思考 - 重新發現問題/機會點。


          以空間Feeds為例,解析如何實踐Krebs Cycle of Design

          前文講述了系統性解決問題之 < 思考-行動 > 模型-Krebs Cycle of Design,接下來通過具體的項目,說明如何通過“系統性解決問題之 < 思考-行動 > 模型”全局解決問題,這里采用一個從需求引發的未知產品探索,以QQ空間基礎Feeds信息流產品為例。


          項目背景

          作為騰訊典型社交產品,QQ空間已經12年了,那么對于12年的空間Feeds信息流產品日常需求,整體來講具有以下3個特點:需求量多(面對多個產品不斷快速迭代)、需求類型雜、需求內容小。

          基于這樣一個前提,為了更好的解決問題,僅僅只做需求是不夠的,需要設計師發揮產品主人翁意識,這樣首先我的角色定位無形中發生了變化,從單純的設計師(產品需求轉換者)轉變為產品設計師(產品需求洞察者)。

          角色的變化,進一步帶來了解決問題思維模式的變化,從之前為單一用戶需求而設計的線性解決問題思維模式轉變為從點觸發的系統性解決問題思維模式。

          總的來講系統性解決問題之 < 思考-行動 > 模型,以空間基礎Feeds信息流產品為例。主要有以下幾個階段,并且每一個階段都是上一個階段的自然轉化。

          1. 提出產品需求/機會點。

          2. 基于產品需求/機會點,從點觸發,通過系統性思考,全面的思考分析。

          3. 基于系統性思考,判斷需求在系統中是否有價值。

          4. 判斷有價值后,繼續深入挖掘更多的問題和機會點。

          5. 綜合判斷挖掘真正的問題/機會點。

          6. 確定真正的問題/機會點后,針對性的進行解決行動。

          7. 階段性的解決行動后,就向構建一個更好的產品邁出了一小步。

          8. 構建更好的產品后,為了產品后續更好發展,進入新一輪的迭代進化思考。

          9. 迭代進化思考后,就開始了新一輪的系統性解決問題,構建越來越好的產品和更加美好的體驗。


          1.提出產品需求/機會點

          在互聯網公司,尤其是互聯網產品比較成熟時(如QQ空間Feeds信息流產品),設計師通常扮演者產品需求轉換者的角色,在常規迭代項目中面對產品經理一個又一個的小點需求,很多設計師都是基于點對點的需求進行功能細化,有些甚至可以直接開始詳細設計;而系統性解決問題思考行動模型則建議“將產品需求直接轉換為詳細設計”的這一類設計師,在日常常規需求之外,可以跳出點對點的小需求,更加系統的思考需求&探索問題和機會點。


          2.系統性思考

          從已知的需求、問題和機會點出發,從點觸發設計師全局思考產品。通過系統性思考,了解產品整體系統,該部分思考的維度和方法,通常從商業、產品、項目、用戶等多角度思考,如商業工具(理解商業的商業模式畫布)、產品工具(了解行業位置的SWOT分析法、發散創意的搜尋領域圖和思維導圖)、產品工具(理解階段目標的目標分解圖)、用戶研究工具(量化理解用戶的問卷和訪談、定性用戶研究的可用性測試&焦點小組、模擬分析場景的體驗地圖)。而以QQ空間Feeds信息流產品為例,闡述如何更全局的系統性思考產品。

          系統性思考第1步:從日常繁瑣的小需求中跳出,從資源輸入-內容輸出維度,全局的了解空間的整體產品體系,比如核心UGC業務、運營相關業務、分支業務、廣告業務等。

          系統性思考第2步:基于資源輸入-內容輸出維度全局了解產品體系后,針對Feeds信息流模塊,梳理出資源輸入類型和各個類型所包含內容,以及觸達用戶的內容輸出Feeds類型以及包含內容信息,分析輸入輸出不同對象關系,明確空間Feeds信息流的空間樞紐作用,為下一步判斷需求/問題/機會點的價值提供依據。


          3. 判斷問題和機會點在整個系統中是否有價值

          基于系統性思考,分析判斷需求在系統中是否有價值。對于QQ空間Feeds信息流產品,通過產品的系統性思考,會發現Feeds基于空間的樞紐作用,連接空間各個業務內容,并以Feeds產品形態分發給UGC和PGC用戶。因此Feeds信息流的產品設計優化對于整個空間而言,都有極大的商業和用戶價值。


          4. 深入挖掘行動

          判斷問題/機會點有價值后,繼續縱向深入挖掘更多的問題和機會點,該部分思考的維度和方法可從需求挖掘和設計調研/用戶研究兩個維度,從產品、用戶等多角度思考,如現有問題挖掘的日常積累法、數據定量分析法、用戶調研訪談等定性研究、頭腦風暴等涌現挖掘法、用戶核心行為的全鏈路分析法等。下面以QQ空間Feeds信息流產品,舉例如何深入進行挖掘行動。

          挖掘行動第1步:從項目團隊內部(產品&開發&設計師)收集現有痛點問題,并將問題梳理歸類整理,確定內部收集痛點問題重要程度優先級。

          挖掘行動第2步:從用戶“發表-瀏覽-互動”的Feeds信息流相關的核心行為路徑切入,收集用戶/專家反饋,并分析確定用戶核心行為路徑哪些問題與Feeds相關。


          5. 判斷確定真正的問題和機會點

          挖掘行動后,就可以從產品內部、用戶本身等多維度得到N個問題和機會點,通過對問題和機會點整理判斷分析,得出真正的問題和機會點。如針對空間Feeds信息流產品真正的問題點和機會點有2個:Feeds缺失系統化、Feeds關鍵觸點暴露的用戶問題。


          6. 解決行動

          確定真正的問題/機會點后,針對性的進行解決行動。不同的問題和機會點,可根據需要采用適合的解決行動。下面僅以QQ空間Feeds信息流產品,舉例如何進行解決行動。

          解決行動第1步:針對有多個問題和機會點的情況,首先需要明確解決問題的優先級,這里可以參考評估優先級的方法-知覺圖、C-BOX圖表(來自代爾夫特設計指南《設計方法與策略》),定義問題管理四象限,從“重要程度+緊急程度”兩個維度分析確定解決問題優先級,其中橫坐標軸代表緊急程度,從左到右緊急程度降低;縱坐標代表重要程度,從上到下重要程度降低。正所謂建造房子地基很重要,Feeds缺失系統化代表Feeds信息流的地基不穩,在地基打牢之后我們可以有針對性的解決用戶關鍵觸點暴露的問題,分優先級逐步推進解決問題。因此形成了以解決“Feeds缺失系統化”為基礎,有節奏的探索解決Feeds關鍵觸點暴露問題的解決策略。


          解決行動第2步:解決“Feeds缺失系統化”,即Feeds設計系統化,也就是將整個Feeds產品體系化,進行設計的規范化和組件化,并在設計層面和開發層面統一共享資源,并應用到產品的后續迭代中。而設計系統化的典型代表Material Design,就通過從真實世界觀察到數字世界模擬,構建了一個數字世界觀,包含設計理念、設計原則、設計元素(如輸入框、按鈕、文字等控件/組件)、設計模式(如空狀態、手勢、搜索等)、工具等內容。 關于設計系統化(design system感興趣的小伙伴可以查看《design systems》一書,購買書籍鏈接:https://www.smashingmagazine.com/design-systems-book/。

          Feeds設計系統化主要有以下3個階段:明確設計系統化目標 - 明確設計系統化思路 - 設計系統化過程。

          首先是明確設計系統化目標,明確預期目標有助于我們在項目后期更好的評估系統化設計的價值和效果,空間Feeds信息流產品主要從3個維度明確目標:規范化(形成Feeds基礎設計體系,保障Feeds整體設計統一性)、提升效率(可以快速復用,保質保量的支撐業務需求的快速迭代)、可持續原則(一句話就是跟得上潮流,不斷的迭代進化)。

          其次是是明確設計系統化思路,明確了目標之后,需要定義如何進行Feeds設計系統化的思路,主要有以下4個階段:場景類目梳理- 抽象框架- 填充細節內容 - 建立設計規范。


          在明確了設計系統化思路后,依據思路,通過以下4個階段一步一步構建Feeds設計系統化:場景類目梳理- 抽象框架- 填充細節內容 - 建立設計規范。

          設計系統化第1步:場景類目梳理,從場景出發歸類所有的Feeds類型。

          設計系統化第2步:抽象框架,首先將所有Feeds類型每個的結構模塊化,其次通過“類比-分析-聚類”歸類同類型框架,最后設定Feeds框架應用策略(不同框架的每個模塊可采用LEGO自由組合策略)。

          設計系統化第3步:填充細節內容,補充A/B框架類型中的填充元素(控件/組件等內容)。

          設計系統化第4步:建立Feeds設計規范,提升產品設計效率,為后續設計夯實基礎。

          Feeds設計系統化項目,在產品設計內部也得到了廣泛好評,一定程度上提升了產品設計效率。


          解決行動第3步:有節奏的探索解決Feeds關鍵觸點暴露問題,也就是Feeds設計有亮點。設計有亮點的探索聚焦用戶的核心使用路徑,在關鍵觸點上發現亮點設計機會點。


          首先是聚焦用戶核心行為路徑,從用戶觸點切入,深挖不同關鍵觸點,收集用戶/專家的反饋,并針對用戶的關鍵觸點問題探索出相應的解決方案。


          其次在有了這么多的亮點解決方案后,先做哪一個再做哪一個,我們需要明確亮點設計功能實踐優先級。此時就需要回歸產品目標用戶群,深度探索目標用戶的特性,比如QQ空間的使用用戶群體為95后,他們具有“創造、個性、有趣、表達”等特性,他們愛玩的產品有“彈幕、變聲語音、斗圖、鬼畜視頻”,這些產品都具有“DIY、個性互動、滿足成就感”等心理因素,因此針對8個Feeds亮點解決方案,優先在互動層面實踐快評表情。


          接下來就是如何進行快評表情產品設計,首先明確快評表情產品設計思路,主要有以下4個階段:定義產品需求-明確產品目標-探索用戶趣味表達心智模型-定義具體的解決策略

          在明確了產品設計思路后,依據思路,通過以下4個階段逐步推進快評表情亮點化設計:定義產品需求-明確產品目標-探索用戶趣味表達心智模型-定義具體的解決策略。

          亮點設計第1步:定義產品需求,需要明確正在設計的產品需求到底是什么?該需求要解決什么問題,或者滿足了用戶哪一方面的訴求;比如在QQ空間快評表情產品設計中,由于快評表情可能存在空間多個用戶場景(如Feeds評論、發表Feeds、直播場景等)。為了快速上線快評表情,驗證其可促進用戶活躍度,首先確定了快評表情的具體產品需求,將其使用場景縮小為優化Feeds評論表情功能。

          亮點設計第2步:明確產品設計目標,確定了產品做什么后,為了更好的評估衡量設計效果,我們需要在具體設計前先定義設計預期目標。如快評表情產品需求中,在具體設計之前,明確了產品設計預期目標,如增加評論趣味性、增強用戶互動欲望、提升用戶活躍度等。

          亮點設計第3步:探索用戶趣味表達心智模型,明確了產品設計目標后,我們需要更深層次的挖掘用戶使用產品心理動機,從而探索用戶的一個使用心智模型,心智模型有助于我們在更高更深層面讓用戶使用產品過程中超出預期。如快評表情設計中,基于目標用戶探索用戶互動心智模型,發現了以用戶互動訴求為基礎,滿足用戶個性化、專屬感、控制感的深層心理動機,從而可以讓用戶達到最終的成就感,建立起用戶與產品的情感聯系。

          亮點設計第4步:定義具體的解決策略,分析了目標用戶特性和動機后,可以嘗試定義“如何做”的產品設計策略,搭建/聚焦用戶使用核心路徑,在核心路徑上明確用戶關鍵觸點,并基于核心路徑形成關鍵頁面,并最后給出用戶超越預期的產品體驗。如快評表情設計中,由于是原有的評論表情優化,因此在定義解決策略時,首先聚焦評論表情的核心路徑,基于核心路徑尋求機會點,并且根據機會點搭建全新的快評表情使用路徑。


          定義了具體的設計解決策略后,就進入詳細的交互設計階段,此處僅由于內容篇幅太長,僅做簡要的一些核心點說明。主要有3點:

          1. 聚焦用戶評論核心路徑,找到評論表情關鍵觸點,探索設計機會點。

          2. 基于評論核心路徑機會點,新增用戶關鍵觸點,加強用戶與產品、用戶與用戶之間互動反饋。

          3. 搭建用戶使用新路徑,通過主動觸發和被動觸發機制,強化推薦互動。


          7. 解決行動結果-構建更好的產品體驗

          階段性的解決行動后,比如進行了Feeds設計系統化打好根基,探索了快評表情的亮點設計后,已經向構建一個更好的產品邁出了一小步。無論從產品內部評價和上線后數據驗證結果來看,均達到當時的一個小小目標。如產品數據驗證部分方法感興趣的,可查看“用戶行為數據分析”等方法。


          8. 迭代進化思考

          正所謂“潮流是在不斷發展變化的”,互聯網圈的發展更是日新月異,因此為了后續產品發展的更好,需要進入新一輪的迭代進化思考。如果設計師在橫向有一個屬于自己的設計中心(或者設計團隊),可以定期挖掘討論創意想法,沉淀為創意資源庫,從而更好的發揮設計中心橫向優勢,合力擴大影響力。如QQ空間內部就有Qzone idea的創意小組,定期輸出創意想法,討論,并向上匯報推動產品側落地。


          總的來講,系統化解決問題<思考-行動>模型可以你“找對事 & 做對事”,“如何做設計的亮點深挖四部曲”具體化做對事的過程,兩者相輔相成,合力打造更美好的產品體驗。


          瀑布流,到敏捷開發,到設計思維,最后到精益創新

          資深UI設計者

          各公司開發成功產品的方式已經在根本上發生了變化。智能手機、社交網絡或云計算等新技術使蘋果、谷歌或亞馬孫等科技巨頭在大約20年內成為最有價值的公司。

          這是我的第一篇系列文章“精益創新——如何在今天開發成功的產品”。這是多年來創新的轉變和產品開發的方法論。

          所有這些變化的發生是由于人們消費產品的方式發生了轉變而造成。為了迎合用戶行為和對產品期待的變化,科技公司必須將產品方向轉變為更靈活、更敏捷、特別是以用戶為中心上,即從瀑布流到敏捷設計再到精益設計。

          雖然現在仍然有95%的大型組織在用瀑布模型開發新產品,但行業領頭公司已經在率先使用精益設計作為方法了。

           

          瀑布模型(20世紀70年代)Waterfall 

          瀑布模型是序列順序的處理方法,進程就像瀑布一樣穩定地推向目標。它要求項目產出全面的計劃并提前開發。

          瀑布過程

          由于前期設計和分析花費了大量的時間和精力,設計變更會使成本變得更高,尤其是設計后階段。每個設計節點都有清晰的目標,達成后將進入下一個階段。這樣防止了客戶在最后發布前評論和反饋。即使征求了建議,項目在接受反饋方面也不那么靈活。雖然瀑布模型是一種不那么靈活的方法,但它對需要執行“計劃”的團隊(在預算范圍內)更有益。

           

          敏捷開發(20世紀90年代)Agile 

          隨著互聯網的興起,瀑布模型漫長的開發周期已經不再能夠提前規劃人們的需求。同時,隨著電子商務的全球化和新經濟模式的到來引發了更多的競爭。公司在開發產品的周期中不得不對市場趨勢作出反應,因此,需要一個靈活的產品開發步驟。

          “敏捷”指的是由17個軟件工程師發布于2001年2月的一份宣言,他們必須就輕量開發方法進行討論。它基于迭代的方法,而不是像瀑布模型一樣在項目之初就進行深入的規劃。開發團隊為了保證首先完成最重要的任務,他們會不斷調整項目的工作范圍。

          每次迭代的目的是為了實現一個可交付的產品。隨著來自終端用戶的持續反饋得到鼓勵,敏捷開發能對不斷變化的需求作出反應,因為隨著時間推移它們都是被需要的。因此,在管理和減少需求變化的風險方面,這些方法對項目來說是正確的選擇。

           

          設計思維(21世紀初)Design Thinking 

          我們都知道以人為中心的設計,設計思維作為一個概念已經存在一段時間了,只是名稱不同(以用戶為中心的設計、服務設計)。設計思維因得益于它解決問題的技巧和科學的方法而成為時尚。設計思維過程和方法的普及與2001年的IDEO有關。

          “設計思維是一種以人為本的創新方法,它從設計師工具箱里汲取了靈感,將用戶的需求、技術的可能性和商業成功的要求結合起來?!?/span>

          湯姆布朗,IDEO創始人。

          “設計師工具箱”是一個與設計師的方法和過程有關的應用——包括思考創造力、靈活的創意以及對用戶行為和需求的清晰理解。設計思維是一個由4個基礎階段組成的結構化流程。

          從目標群體的發現階段開始,所確定的需求和問題將被合成一些主要的見解。這些見解是概念階段的基礎,這個階段的目標是產出許多想法,而最有希望的想法將被作為原型進行開發。原型測試是最后一個階段,這個階段需要確保解決方案滿足目標群體的需求。

          設計思維之所以產生,是因為大公司缺乏創新能力,無法開發出能滿足客戶需求和客戶問題的創新產品。如今,大多數的公司都使用分析思維來作為運營方式。這種分析思維阻礙了創造性(打破常規)思維的發展,而這種創造性思維是破壞性創新所必需的。

          這種創造性,特別是大膽的思考(有些稱為“瘋狂思考”)與設計概念有關。為了創新,企業必須具備設計能力。為了設計,一個組織需要內部融合設計,以孕育出一種培養創造思維的文化。

          設計思維的顯著差異在于將用戶置于每項活動的中心。此外,以人為本的設計強調體驗勝于效率,因為良好的體驗是用戶與產品互動的動力。

           

          精益創新(創業公司——21世紀初)Lean Innovation

          2011年,隨著Eric Ries《精益創業》這本書的出版,創新和產品開發實踐已經向精益方向發展。精益創業的目標是避免開發那些沒人需要的產品或服務。精益過程包含用戶反饋和產品早期實驗。

          精益創新以“失敗來了成功還會遠嗎?”的哲學而聞名。開發者接受這種失敗,因為他們獲得突破性成功前是要需要不斷學習的。

          精益方法也常被稱為“客戶開發”。它的目標是在搭建最終產品前,找出用戶想要什么。精益的原則是建立你正在試著測試的假設和設想,而你通過在這些實驗的學習,將會取得進步。

           

          科技推動全球競爭

          數字化和巨大的變革速度不再允許公司在不考慮客戶需求的情況下簡單地生產產品。在過去,向客戶提供錯誤的產品只會導致項目失敗。而今天,持續不能交付客戶所需的產品,將導致整個商業模式的失敗。諾基亞或柯達只是這里提到的兩個最著名的失敗案例。

          智能手機、云計算和開源等技術使得產品的開發速度更快、成本更低。開發產品或進入市場的的門檻比以往任何時候都要低。這意味今天有更多的全球競爭。公司需要專注于了解用戶和他們想要什么。客戶可以很容易地轉向其它產品。品牌忠誠度對消費者決策的影響逐年下降。

           

          專注于商業模式,而不僅僅是產品(Focus on business models, not only on products)

          精益和設計思維都是以客戶為中心、基于迭代的方法??蛻魠⑴c和反饋是取得進展的動力。精益創新的關鍵不同之處在于,它在圍繞產品考慮整個商業模式時更進一步。

          亞馬遜成為電子商務的領導者的原因之一是他們對客戶服務的堅定承諾。雖然他們沒有靠這個掙過一分錢,但是卻幫亞馬遜獲得了客戶的信任和忠誠。如今,成功的公司區別于他們的商業模式,而不是他們的產品供應。

           

          確保用戶持續參與(Engage customers continuously)

          在新世界中,成功的公司將有一個共同點:對用戶行為和需求的超常理解。隨著行為和需求的快速變化,確保建立客戶需求的唯一途徑就是讓用戶持續的參與到項目中來。準確的用戶理解是長期商業模式成功的基石。

           

          結合設計思維、精益設計和敏捷開發

          雖然設計思維,精益設計和敏捷開發可以單獨使用,但是最好的結果來自這些方法的結合。設計思維有助于深入了解客戶的需求和行為,而敏捷開發則有助于地開發和交付解決方案,精益方法的實踐幫助我們在用戶參與的假設測試中可以獲得更直接的驗證和學習。

          當持續使用“開發–測試–學習”這個模式循環,就可以逐步接近一個成功的產品和有率的商業模式。

          UI設計師基礎設計規范

          藍藍設計的小編

          UI設計的基本規范,包括網頁設計和APP設計的規范羅列

          界面欣賞

          博博

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

            萬聚制作 2018-05-15 13:30:00

          素材源自網絡

          這是我們收集UI / UX交互的一周時間,以增強您的用戶界面靈感。我們專注于酷炫的動畫,布局設計,用戶體驗思考等等。我們正在從靜態,動態甚至是現場原型混合它,這可能是一個偉大的每周系列書簽!本周,我們對交互/轉換的關注較少。本周我們一直在挖掘一些動畫,但我們發現的主要是靜態的。我們有各種各樣的組合,恰到好處地為您提供創意提升。

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

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

          袋鼠云:可視化大屏打造智能數據方案全閉環

          博博

          袋鼠云:可視化大屏打造智能數據方案全閉環

          袋鼠云 2018-05-17 15:37:32

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


          編者按:距熱情似火的618國民年中購物節已經不到兩個月時間,去年京東商城最終以累計下單金額高達1199億元(行業口徑)的戰績收官。而記者了解到每年借著“京東618”“雙11”這兩股全民消費熱潮的新零售品牌遠遠不止淘寶與京東兩家,已成為了整個產業鏈方方面面品牌的推廣盛宴。

          因此,每年的618購物節參與的企業數量可謂“蕓蕓之眾”,這場一年比一年盛大的狂歡節也對支撐其后的運算資源、網絡平臺、存儲與挖掘大數據提出了更高更嚴苛的要求。針對各家的技術資源體系、技術運維團隊、大數據智能技術水平也成為了企業高管的“第一關注”。

          而記者采訪了多家新零售企業的CIO,提及如何更好地應對即將到來的今年“618”,他們大多表示:“增加服務器及運算資源、優化技術架構提高冗余、完成即時大數據挖掘分析是今年的三大要務?!钡拇_,在保證全民購物節完美的用戶操作體驗之外,對自身企業在這場沒有硝煙的商戰中獲得的寶貴數據充分分析并加以利用也成為了CIO們所考量的重點,讓精準營銷落地同時指導未來的市場規劃。

          如何更好的挖掘大型項目節點中企業獲得的巨量數據?如何將挖掘數據中的信息得以簡明有效的呈現,最終迅速指導市場策略?記者在618前夕走訪了國內新銳的數據智能解決方案企業——袋鼠云。

          袋鼠云:可視化大屏打造智能數據方案全閉環

          袋鼠云這家在去年完成6000萬人民幣A輪融資的數據智能新銳公司,在今年動作頻頻,完善提升自身數據智能產品線研發的同時,也在今年大量引入高端人才,全面完善數據智能整體品牌價值。

          記者在采訪中了解到,袋鼠云致力于打造從企業數據資源規劃與獲取、數據質量分析與提升、數據整體建模與數據資產管理、數字化標簽引擎建立、數字指標體系梳理與計算、數據應用規劃與實現、數據可視化大屏呈現等全閉環的企業智能數據解決方案。最終以數據為最可靠的技術基礎,通過袋鼠云的數據內容策劃團隊的有效建模,配以令人印象深刻的專業視覺設計,通過可視化大屏將簡明有效且具沖擊力的數據內容呈現在領導或者客戶面前。

          袋鼠云這家在去年完成6000萬人民幣A輪融資的數據智能新銳公司,在今年動作頻頻,完善提升自身數據智能產品線研發的同時,也在今年大量引入高端人才,全面完善數據智能整體品牌價值。

          記者在采訪中了解到,袋鼠云致力于打造從企業數據資源規劃與獲取、數據質量分析與提升、數據整體建模與數據資產管理、數字化標簽引擎建立、數字指標體系梳理與計算、數據應用規劃與實現、數據可視化大屏呈現等全閉環的企業智能數據解決方案。最終以數據為最可靠的技術基礎,通過袋鼠云的數據內容策劃團隊的有效建模,配以令人印象深刻的專業視覺設計,通過可視化大屏將簡明有效且具沖擊力的數據內容呈現在領導或者客戶面前。

          袋鼠云CEO在采訪中向記者介紹了典型客戶“中國茅臺”可視化大屏項目實施情況,他告訴記者:“世界第一白酒品牌“中國茅臺”之所以選擇袋鼠云建設數據可視化大屏項目,主要是基于要解決全面打造企業數據中臺以及將中國茅臺品牌能力直觀生動地呈現給領導與參觀客戶?!?

          袋鼠云:可視化大屏打造智能數據方案全閉環

          “基于此,袋鼠云為他們從數據管理與應用方式方法上改變思路, 有些甚至是全新的角度與理念,目的也是為了讓‘中國茅臺’的企業數據價值更好的被利用?!彼嬖V記者:“因為茅臺品牌社會面很廣,袋鼠云后期基于數據,提供的諸如輿情分析系統、反黃牛數據系統等富有社會成效的定制功能,獲得客戶的高度認可?!?

          數據智能(DI)不僅僅是把數據放在一起,而是要聚集產生化學反應?!爸袊┡_”這個客戶應用就很典型,他繼續向記者介紹:“我們給客戶的數據分析與決策都是動態的,實時監控大屏即時展現茅臺酒的交易總額是多少?哪個地區的茅臺酒目前是銷量最高的?哪些客戶最熱衷于他們的產品?這些動態的數據分析結果都能實時呈現在展會現場的可視化大屏幕上。另外茅臺做的可視化大屏,也直觀地體現了茅臺用戶群體的年輕化趨勢,這和我們之前想象中茅臺的消費者較高年齡層的情況不一樣。這次可視化大屏解決方案幫助茅臺更清晰地了解了自己的終端用戶,要知道以前客戶數據分散在經銷商、渠道商那里,到底誰喝了茅臺酒,茅臺集團是無法獲知的?!?

          袋鼠云:可視化大屏打造智能數據方案全閉環
          袋鼠云:可視化大屏打造智能數據方案全閉環
          袋鼠云:可視化大屏打造智能數據方案全閉環

          而實時采集數據,實時處理分析數據也是袋鼠云口中的“一大門檻”。記者了解到,類似袋鼠云這樣的從數據采集--數據存儲--數據應用--數據呈現整體打造閉環的數據智能解決方案服務商在行業里具有很大優勢。在中國茅臺的典型方案中這一點就展露無遺。他向記者介紹:“中國茅臺選擇過去傳統服務商時,手機端與電腦端的開發商是不同的,因此移動端和PC端后臺數據沒有打通,形成了非即時的數據孤島。而采用了袋鼠云“全域”智能數據解決方案后,所有的標準制定都是相同的,數據得以深入而全面的加工。而精準營銷、反黃牛、打標簽、輿情監測、秒殺系統等等富有成效的模型都是基于企業數據的被統一聯結并做出實時分析結果?!?

          記者談到實時數據可視化這個部分時,袋鼠云CEO顯得自信滿滿。他告訴記者:“數據的實時性采集非常重要,“袋鼠云”實現了TB級別甚至是PB級別的大數據進行實時處理,實現秒級反饋是最基本的要求?!彼^續告訴記者:“這得益于袋鼠云的技術團隊多數來自于阿里云,針對業務暴增、惡劣環境等極端情況下的峰值保障應急處理的技術與能力具有相當的經驗?!庇浾哌€了解到,袋鼠云現在的技術團隊都曾經歷過“天貓雙11”等等大型活動,并協助茅臺、百草味、秒錢、申通E等多家公司順利完成了大促護航等工作。

          記者觀察:一方面基于人才技術優勢打造團隊“硬氣功”,另一方面深化客戶項目落地可視化效果的“軟實力”,在袋鼠云眼中一個睥睨新業界的發展藍圖已清晰可見。

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

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合