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

          


          
    
  
    
          
    
                    首頁
    
          
              
          
            
            
          新手科普！APP 的圖文布局和按鈕總結
          
            
          
               資深UI設計者                                            
          
            
          
    
          

          

          
    
          
        如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
    
          
常見的APP 圖文布局有哪些？不同按鈕有哪些用法？今天這篇總結幫新手認識基礎知識，趕緊來收！

          

          
    一、圖文布局

          

          
    用戶所關注的內容以及不同的業務訴求決定信息的優先級排布，所以沒有通用的布局，只有適合的布局。

          

          
    1. 上圖下文

          

          
    

          

          
    上圖下文更強調了圖片的重要性，以「見」這個屬性為優先，上圖下文需要注意的是圖片高度過高會嚴重影響版面效率，而一個具有商業化目的的產品對首頁的版面效率異?？粗?，同樣對圖片的質量要求也甚高。通常這樣的 feed流布局更抓人眼球。

          

          
    

          

          
    如果確實需要以大圖+文的上下方式來布局，盡量找到版面的平衡點，考慮圖片與文字之間想要給用戶傳達的關系和優先級圖片的使用盡量使用黃金比例做展示，例如4:3，2:1，16:9等。

          

          
    

          

          
    宮格排列式的上圖下文能夠極大的提升版面效率，一般更多用于電商平臺，在首頁將某個模塊的優質商品進行透出，提高轉化和流量。缺點是缺乏信息完整度，在布局時需要考慮更多因設備、極限值帶來的不同狀況的問題。

          

          
    可以看出，嚴選將金額跟在標題后面，而非固定位置，這樣做的好處是將標題和金額關聯度更高，形成一致性，缺點是布局上顯得層次不齊影響閱讀效率。通常這樣的排版會根據業務需要來選擇展示一行或多行文字極限。但由于版面效率它不得不只給了兩行的極限高度。

          

          
    2. 左圖右文

          

          
    

          

          
    左圖右文形式的排版應該也算是用的非常多了。其實大家會經常把它和左文右邊圖進行對比。但無論是左圖還是右圖，在這樣的布局中我們首先就要做好圖和文的占比。顯示在外面的圖片通常是選取了詳情中的圖片來進行展示，否則就浪費了比較多的人力資源去重新配圖了得不償失。同樣和圖片搭配的信息字段此時就顯得極為重要。

          

          
    菜鳥裹裹其實將標題的優先級又提升到了和圖片一樣的層次。圖片本身給人的視覺沖擊會更強所以即便圖片放在標題下面，也不會弱。

          

          
    

          

          
    方形縮略圖是最常用的形式，不至于太窄也不至于太寬，對于右側信息的布局也顯得更游刃有余。橫形的圖片會讓右側的文字顯示空間壓縮的厲害，通常在視頻縮略圖會用到，但圖片對整個頁面的氛圍感會更好。豎形的圖片讓右側信息有更多的發揮空間，同時版面的留白也更大，但是如果右側信息過少，則會讓頁面有些單調和不完整。

          

          
    左文右圖就不再贅述，現在大多數左文右圖在咨詢和旅游產品中使用的更多，因為用戶在瀏覽這樣的列表信息時圖片無法在第一眼被識別出具體內容，而對于這樣的產品來說無疑是低效的。當然很多時候沒有那么多時間去驗證如此設計對于用戶來說是否真的能提高瀏覽效率，提升了多少滿意度。我們可以簡單的理解，如果說的是一件事，那么文字比圖片更重要。如果說的是一樣物品、人，那么左邊放圖更合適，體會一下。

          

          
    3. 圖文混排

          

          
    

          

          
    為了使信息傳達的更一致，通常如果沒有大量的文字信息則我們會選擇文字與圖片混排的形式，為了適應多變的圖片，我們會在文字底部加一層黑色半透明蒙層或者給文字加一些無傷大雅的陰影。前提是文字信息不會太多而干擾到圖片內容的展示和傳達。

          

          
    二、按鈕解析

          

          
    其實嚴格意義上來說，能通過點擊觸發交互動作的控件我們都能將它定義為按鈕，但是如果這樣定義那就沒的玩了，所以我們將移動端的按鈕定義為具有引導性并且可點擊的控件。

          

          
    例如京東金融查看歷史支取利率后的箭頭，其實這才是這一行的引導按鈕，但是為了更好的觸發點擊通常會將整一行都作為點擊熱區。

          

          
    所以為了區分不同的按鈕的用法，我這邊將按鈕進行了一個分類：主線場景、支線場景、異常場景。

          

          
    主線場景下的按鈕通常會使用的比較大，為了強化和引導核心的任務流程，所以該按鈕應該是最醒目的。

          

          
    樣式通常會分為通欄和非通欄，而通欄則是從 MD 設計中衍生出來的一種形式。

          

          
    1. 主線場景

          

          
    

          

          
    要注意的是，通欄和非通欄按鈕我們到底該如何選擇，首先我們需要知道這樣的按鈕都是放在頁面的底部固定顯示，不會隨著內容滾動，如果選擇通欄按鈕，則更適合可滾動的頁面容器，也就是說一頁中內容較多在一屏幕中無法顯示全的頁面，優點是按鈕的優先級會很高，但是在 iphone X 這樣的設備中，適配會糾結一些。

          

          
    而如果選擇不通欄的按鈕，我們要考慮的是頁面內容是否很長，如果很長需要在按鈕底部加一層白色背景，盡量不要讓內容穿過按鈕，因為底部其實并不是內容最好的顯示區域。同樣非通欄的置底按鈕相較于通欄按鈕層級就顯得沒那么高。

          

          
    

          

          
    所以我們會發現考拉和淘寶雖然有樣式區別，但實際上都相當于在底部有一層內容遮蓋的部分。

          

          
    2. 支線場景

          

          
    再來看支線場景的按鈕，支線場景的按鈕一般能夠分為：圖標、文字、圖標+文字、框+圖文字+圖標這樣幾種類型。

          

          
    

          

          
    圖標就不用說了本身就具有可操作的屬性，也有修飾的屬性，關鍵看他的場景和布局位置。例如淘寶的 tab 標簽上的定位圖標，就是一種修飾型的圖標，為了更好理解這里的定位是一種樓層定位，隨著頁面滑動到不同的業務模塊而會跳動，這里并不是一個 tab 的功能，不能算是切換頁面。

          

          
    如果把定位按鈕單獨拿出來放在導航欄，或者頁面右側的空白處，我們就會覺得他是一個可點擊并能夠進行跳轉的按鈕。

          

          
    包括「查看全部」這樣的文字，即便不加箭頭我們也會嘗試去點擊，高亮顯示就更加明顯，用戶已經形成這樣的意識，但是像上面的規格和參數如果不加箭頭會讓用戶覺得這里并沒有可操作的東西就不去點擊了。所以我們總結一下就是支線按鈕的使用場景較為復雜，需要通過參考上下文的情景來做不同樣式的選擇。

          

          
    不過支線流程畢竟是支線流程，為了不打擾主線流程，盡量不要將支線流程的按鈕做的過分明顯。例如淘寶詳情頁中的進店逛逛，其實這個按鈕用了實心的色塊做了強引導，目的是為了提高客單價，同樣只要是對最終目標有幫助，并不能算是跳失，說不定回來的時候買了更多更貴的東西。

          

          
    3. 異常場景

          

          
    

          

          
    異常場景下的按鈕不需要做的過于醒目，一般會采用幽靈按鈕或者和背景近似的顏色。該場景下按鈕大多數情況是希望用戶點擊將頁面恢復正常狀態，并不是一種強烈的引導。
    
          
        藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
    
          

          
            
          
              
                評論(0)
                瀏覽(4240)
              
                          
          
          
          
                      
          
            
            
          JavaScript判斷變量是否為空對象 {} 的幾種方法
          
            
          
               seo達人                                            
          
            
          
    如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

          

          
    
    
          
        將json對象轉化為json字符串，再判斷該字符串是否為"{}"
    
          

          var obj = {}; var b = (JSON.stringify(obj) === "{}");
console.log(b); // true
    
            

        
          • 
            1
        
            • 

        
          • 
            2
        
            • 

        
          • 
            3
        
            • 

    
          

          
    
          
        for in 循環判斷
    
          

          var obj = {}; var b = function() { for(var key in obj) { return false;
    } return true;
}
console.log(b()); // true
    
            

        
          • 
            1
        
            • 

        
          • 
            2
        
            • 

        
          • 
            3
        
            • 

        
          • 
            4
        
            • 

        
          • 
            5
        
            • 

        
          • 
            6
        
            • 

        
          • 
            7
        
            • 

        
          • 
            8
        
            • 

    
          

          
    
          
        網上很多都是如上的說法，但是會存在一個問題，就是如果obj=null ，obj=undefined，obj=""，obj=[]，obj=0 以及obj為任意數字也返回true，所以有了下面這個for in 循環判斷：
    
          
    
          
        方案一：
    
          

          var obj = {}; var b = function() { for(var key in obj) { return false;
    } if(obj === null || typeof obj !== "object" || Array.isArray(obj)){ return false;
    } return true;
}
console.log(b()); // true
    
            

        
          • 
            1
        
            • 

        
          • 
            2
        
            • 

        
          • 
            3
        
            • 

        
          • 
            4
        
            • 

        
          • 
            5
        
            • 

        
          • 
            6
        
            • 

        
          • 
            7
        
            • 

        
          • 
            8
        
            • 

        
          • 
            9
        
            • 

        
          • 
            10
        
            • 

        
          • 
            11
        
            • 

    
          

          
    
          
        方案二：
    
          

          var obj = {}; var b = function() { for(var key in obj) { return false;
    } if(obj === null || typeof obj !== "object" || Object.prototype.toString.call(obj) === "[object Array]"){ return false;
    } return true;
}
console.log(b()); // true
    
            

        
          • 
            1
        
            • 

        
          • 
            2
        
            • 

        
          • 
            3
        
            • 

        
          • 
            4
        
            • 

        
          • 
            5
        
            • 

        
          • 
            6
        
            • 

        
          • 
            7
        
            • 

        
          • 
            8
        
            • 

        
          • 
            9
        
            • 

        
          • 
            10
        
            • 

        
          • 
            11
        
            • 

    
          

          
    
          
        上面兩種方案的區別就是判斷判斷空數組的方式不同。
    
          
    
          
        jQuery的jQuery.isEmptyObject(obj)方法
    
          

          var obj = {}; var b = $.isEmptyObject(obj);
console.log(b); // true
    
            

        
          • 
            1
        
            • 

        
          • 
            2
        
            • 

        
          • 
            3
        
            • 

    
          

          
    
          
        jQuery.isEmptyObject(obj) 方法依然存在obj=null ，obj=undefined，obj=""，obj=[]，obj=0 以及obj為任意數字返回true的問題，所以我們還應該再用typeof 或者 $.type() 判斷一下：
    
          

          var obj = {}; var b = $.isEmptyObject(obj) && $.type(obj) === "object";
console.log(b); // true
    
            

        
          • 
            1
        
            • 

        
          • 
            2
        
            • 

        
          • 
            3
        
            • 

    
          

          

          var obj = {}; var b = $.isEmptyObject(obj) && typeof obj === "object" && obj !== null && !Array.isArray(obj);
console.log(b); // true
    
            

        
          • 
            1
        
            • 

        
          • 
            2
        
            • 

        
          • 
            3
        
            • 

    
          

          

          var obj = {}; var b = $.isEmptyObject(obj) && typeof obj === "object" && obj !== null && Object.prototype.toString.call(obj) !== "[object Array]";
console.log(b); // true
    
            

        
          • 
            1
        
            • 

        
          • 
            2
        
            • 

        
          • 
            3
        
            • 

    
          

          
    
          
        Object.getOwnPropertyNames()方法
    
          
    
          
        Object.getOwnPropertyNames() 方法返回一個由指定對象的所有自身屬性的屬性名（包括不可枚舉屬性但不包括Symbol值作為名稱的屬性）組成的數組。
    
          

          var obj = {}; var b = !Object.getOwnPropertyNames(obj).length;
console.log(b); // true
    
            

        
          • 
            1
        
            • 

        
          • 
            2
        
            • 

        
          • 
            3
        
            • 

    
          

          
    
          
        Object.getOwnPropertyNames() 方法存在obj=0 以及obj為任意數字返回true的問題，所以我們還應該再用typeof 判斷一下：
    
          

          var obj = {}; var b = !Object.getOwnPropertyNames(obj).length && typeof obj === "object";
console.log(b); // true
    
            

        
          • 
            1
        
            • 

        
          • 
            2
        
            • 

        
          • 
            3
        
            • 

    
          

          
    
          
        Object.keys()方法
    
          
    
          
        Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和使用 for...in循環遍歷該對象時返回的順序一致 。
    
          

          var obj = {}; var b = !Object.keys(obj).length;
console.log(b); // true
    
            

        
          • 
            1
        
            • 

        
          • 
            2
        
            • 

        
          • 
            3
        
            • 

    
          

          
    
          
        Object.keys() 方法存在obj=""，obj=[]，obj=0 以及obj為任意數字返回true的問題，所以依舊需要加判斷如下：
    
          

          var obj = {}; var b = !Object.keys(obj).length && typeof obj === "object" && !Array.isArray(obj);
console.log(b); // true
    
            

        
          • 
            1
        
            • 

        
          • 
            2
        
            • 

        
          • 
            3
        
            • 

    
          

          

          var obj = {}; var b = !Object.keys(obj).length && typeof obj === "object" && Object.prototype.toString.call(obj) !== "[object Array]";
console.log(b); // true
    
            

        
          • 
            1
        
            • 

        
          • 
            2
        
            • 

        
          • 
            3
        
            • 

    
          

          
    
          
        在實際應用中，如果對象不為空，并且知道對象不為空時，某個屬性一定存在，則直接判斷這個對象的此屬性是否存在。
    
          
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
          
          

          
            
          
              
                評論(0)
                瀏覽(5141)
              
                          
          
          
          
                      
          
            
            
          VR 那么火，你知道它的設計流程是什么嗎？
          
            
          
               資深UI設計者                                            
          
            
          
    
          
        如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
    
          
對于許多設計師來說，虛擬現實（VR）是一個全新且陌生的領域。過去幾年中，我們目睹了虛擬現實硬件和軟件的爆炸式增長。從體驗性上看，虛擬現實既有小而簡單的也有專業復雜的，整體體驗差異很大。

          

          
    作為 UX 或 UI 設計師，初次接觸 VR 可能會有所畏懼，但不要害怕，在本文中，我們將分享一個設計 VR 應用程序的完整過程，我們希望您可以通過這個案例來開始自己的 VR 設計之旅。你不需要成為 VR 的專家；你只需要將你之前的設計技能應用到一個新領域。最終，經過大家的共同努力，我們定可以加速 VR 的發展以發揮它的全部潛力。

          

          
    一、VR應用程序里有什么？

          

          
    一般來說，從設計者的角度來看，VR 應用程序由兩種類型的組件組成：環境和交互元素。

          

          
    

          

          
    環境：您可以將環境視為您戴上 VR 頭盔時所進入的整個世界 ， 比如你身處的虛擬星系或者駕駛過山車飛馳的樂園。

          

          
    交互元素：界面上影響用戶交互和操控體驗的元素合集。

          

          
    根據這兩個組件的復雜性，所有 VR 應用程序都可以沿兩個軸定位。

          

          
    在左上象限中的 VR 應用有類似模擬器的東西，例如過山車的 VR 應用，這種應用具有完全成形的環境，但根本沒有交互。你只是被鎖在了車里。

          

          
    

          

          
    在右下角的象限中，應用程序具有一個更好的界面，但比較少或沒有3D環境。三星的 Gear VR 主屏就是一個很好的例子。

          

          
    

          

          
    設計場所和景觀等虛擬環境需要熟練使用3D建模工具，許多設計師平時無法接觸到這些元素。但是，UX 和 UI 設計人員有很大的機會將他們已有的技能應用于設計虛擬現實的用戶界面。

          

          
    我們所做的第一個完整 VR 的 UI 設計是 The Economist 的應用程序，與 VR 制作工作室 Visualize 合作。我們做設計，Visualize 創建內容并開發應用程序。

          

          
    

          

          
    我們在之后文章中將此應用作為一個工作示例，現在我們將介紹設計 VR 應用程序的方法，然后再介紹設計 VR 界面的細節。您可以從 Oculus 網站下載Gear VR 的 Economist 應用程序。

          

          
    二、VR UI設計的第一步-回顧傳統流程

          

          
    盡管大多數設計師已經熟悉了設計移動應用程序的工作流程，但還不太清楚設計 VR 界面的流程。當面對第一個VR應用程序設計項目時，我們首先要做的是合乎邏輯。

          

          
    傳統工作流程到全新領域

          

          
    當我們第一次使用三星的 Gear VR 時，我們注意到它與傳統移動應用有很多相似之處。VR 應用程序與傳統應用程序有著相同的工作流程：幫助用戶與界面進行交互。

          

          
    現在請記住。鑒于與傳統應用的相似性，設計師花費數年時間改進的久經考驗的移動應用工作流程不會浪費，這些流程仍然可用于制作 VR UI。這讓你比你想象的更接近 VR！

          

          
    在如何設計 VR 界面之前，讓我們回過頭來看看傳統移動應用的設計過程。

          

          
    1. 線框

          

          
    首先，我們將進行快速迭代，定義交互和總體布局。

          

          
    

          

          
    2. 視覺設計

          

          
    在此階段，功能和交互已經完成。我們把視覺規范與設計應用于線框圖，并制作出漂亮的界面。

          

          
    

          

          
    3. 設計文檔

          

          
    在這里，我們將屏幕組織成流程，繪制屏幕之間的鏈接并描述每個屏幕的交互。我們將此稱為應用程序的設計文檔，它將被用作開發人員的主要參考。

          

          
    

          

          
    現在，我們如何將此工作流程應用于虛擬現實的設計當中呢？

          

          
    三、開始VR UI設計

          

          
    1. 畫布的尺寸

          

          
    最簡單的問題可能也是最具挑戰性的。面對360度的畫布，人們可能很難知道從哪里開始。事實證明，UX 和 UI 設計者只需要關注整個空間的某個部分即可。

          

          
    我們花了幾周時間試圖弄清楚什么樣的畫布尺寸適用于 VR 設計。當您使用移動應用程序時，畫布大小取決于設備的大小：iPhone 6為1334×750像素，Android大約1280×720像素。

          

          
    要將移動應用程序工作流應用于 VR UI，首先必須確定合適的畫布大小。

          

          
    以下是扁平化時360度環境的樣子。這種視圖叫做等角矩形投影。在3D虛擬環境中，這些投影圍繞球體纏繞，以模仿現實世界。

          

          
    

          

          
    整個投影的水平寬度是360度，垂直180度。我們可以用它來定義畫布的像素大?。?600×1800。

          

          
    

          

          
    使用這么大的尺寸可能是一個挑戰。但因為我們主要對 VR 應用程序的界面設計感興趣，所以我們可以專注于這個畫布的一部分。

          

          
    基于邁克·阿爾格（Mike Alger）對舒適觀察區域的早期研究，我們可以找出一個合適的部分來展示界面。

          

          
    感興趣的區域占360度環境的九分之一。它位于圖像的中心，大小為1200×600像素。

          

          
    

          

          
    讓我們總結一下：

          

          
    「 360度視圖 」：3600×1800像素

          

          
    「 UI視圖 」：1200×600像素

          

          
    

          

          
    四、測試原型

          

          
    「UI視圖」畫布有助于將我們的注意力集中在我們正在制作的界面上，并使設計流程變得更加容易。

          

          
    同時也必須使用「360度視圖」在 VR 環境中的預覽界面。此外為了獲得真實的比例感，使用 VR 頭盔測試界面也是必要的。

          

          
    

          

          
    △ 使用Avocode，您可以輕松直觀地比較設計

          

          
    五、設計工具

          

          
    在開始之前，我們需要以下工具：

          

          
    1. sketch

          

          
    我們將使用 Sketch 來設計我們的界面和用戶流程。如果您沒有，可以下載試用版。Sketch 是我們首選的界面設計軟件，但如果您使用 Photoshop 或其他任何軟件更舒服，也沒問題。

          

          
    2. GoPro VR Player

          

          
    GoPro VR Player 是一款360度內容查看器。它由 GoPro 提供，是免費的。我們將使用它來預覽我們的設計。

          

          
    3. Oculus Rift

          

          
    Oculus Rift 連接到 GoPro VR 播放器，這將使我們能夠測試我們的設計。

          

          
    六、VR界面設計流程

          

          
    在本節中，我們將介紹如何設計 VR 界面。我們將一起設計一個簡單的界面，最多花費5分鐘時間。

          

          
    

          

          
    下載源文件：https://pan.baidu.com/s/1WUUwNLlTJkG82Hxdofaqzg  密碼：09vt，其中包含預設的 UI 元素和背景圖像。如果你想使用自己的設計文件，那也是可以的。

          

          
    1. 設置「360度視圖」

          

          
    首先要做的事情，讓我們創建360度視圖的畫布。在 Sketch 中打開一個新文檔，并創建一個畫板：3600×1800像素。

          

          
    導入文件 background.jpg，并將其放在畫布的中間。如果您使用自己的背景文件，請確保其比例為2：1，并將其大小調整為3600×1800像素。

          

          
    

          

          
    2. 設置畫板

          

          
    如上所述，「UI view」是「360 view」的裁剪版本，我們僅關注 VR 界面。

          

          
    我們創建一個新畫板：1200×600像素。然后，復制畫板到「360 view」中，并將其放在畫板的中間。不要刪除「360 view」畫板，我們同時保留著兩個畫板，以后會用到它們。

          

          
    

          

          
    3. 設計界面

          

          
    我們將在「UI View」畫布上設計我們的界面。我們會盡量簡單一些，首先在視圖上添加一些圖塊。您可以使用 tile.png 文件將其拖到 UI 視圖的中間。

          

          
    復制它，并創建一行三個圖塊。

          

          
    使用 kickpush-logo.png 文件，并將其放在圖塊上方。

          

          
    

          

          
    4. 合并畫板

          

          
    現在來看看有趣的東西。確?！窾I view」畫板位于左側圖層列表的「360view」畫板上方。

          

          
    將「UI view」畫板拖動到「360 view」畫板的中間。將「360 View」畫板導出為 PNG；「UI view」將位于其上方。

          

          
    

          

          
    5. 在VR中測試它

          

          
    打開 GoPro VR Player，并將剛剛導出的「360 View」PNG 拖到窗口中。使用鼠標拖動圖像以預覽360度環境。

          

          
    我們完成了！是不是很簡單？

          

          
    如果您的機器上安裝了 Oculus Rift，則 GoPro VR 播放器應該可以檢測到它并允許您使用 VR 設備預覽圖像。根據您的配置，您可能需要在 MacOS 中做一些顯示設置。

          

          
    

          

          
    七、VR設計中需要注意的因素

          

          
    1. 低分辨率

          

          
    VR 頭盔的分辨率非常糟糕？這不完全正確，其實它相當于手機的分辨率。但是，考慮到設備距離您的眼睛5厘米，顯示器看起來并不清晰。

          

          
    為了獲得清晰的 VR 體驗，我們需要一個8K的顯示屏，這是一個15,360×7680像素的顯示屏。相信這種設備早晚會普及。

          

          
    2. 文本可讀性

          

          
    由于顯示器的分辨率較低，會導致所有精美的 UI 元素都會看起來像素化。這意味著，首先，文字難以閱讀，其次，直線部分會出現鋸齒。所以盡量避免使用大段文字和特別復雜的 UI 元素。

          

          
    八、收尾工作

          

          
    1. 設計文檔

          

          
    還記得我們的移動應用中的流程圖嗎？我們現在將這種做法也應用到 VR 界面。用我們已經做好的界面組織成一個易于理解的流程圖，這非常有益于開發人員理解我們設計的應用程序的整體架構。

          

          
    

          

          
    2. 動效設計

          

          
    設計一個漂亮的 UI 是一回事，但讓他動起來又是另外一回事了。我們決定以二維視角來處理它。

          

          
    基于我們的 Sketch 文件，我們使用 Adobe After Effects 和 Principle 為界面設計動畫。雖然輸出的不是真實的3D體驗，但它足以指導開發團隊了，且能幫助我們的協作者在流程的早期階段了解我們的愿景。

          

          
    

          

          
    △ 你剛剛設計了第一個 VR UI。真棒！

          

          
    我們知道你在想什么，「這很酷，但真實的 VR 應用程序會復雜的多?！故堑?，當然是。但重點在于我們可以在多大程度上將我們當前的 UX 和 UI 的經驗應用于這種新媒介？

          

          
    九、VR UI可以走多遠？

          

          
    1. 新的交互體驗

          

          
    一些 VR 體驗非常依賴虛擬環境，然而傳統界面的確已經不是用戶控制應用程序的最佳方式了。在這種情況下，您可能希望用戶直接與環境本身進行交互。

          

          
    想象一下，你正在為一家豪華旅行社制作應用程序。您希望以最生動的方式將用戶轉移到潛在的度假目的地。因此，您邀請用戶佩戴耳機并在時髦的切爾西辦公室開始體驗。

          

          
    要從辦公室轉移至目的地，用戶需要選擇他們想去的地方。他們可以拿起一本旅行雜志，輕輕松松瀏覽它們，直到它們被某一頁吸引。或者，桌面上可能會有一系列有趣的物品，根據用戶選擇的不同，將用戶帶到不同的位置。

          

          
    這確實很酷，但也有一些缺點。為了達到完美的效果，你需要一個更先進的帶手持控制器的 VR 頭盔。不過，像這樣的應用程序要比傳統的應用程序花費更多的精力來開發。

          

          
    2. 革命萬歲

          

          
    現實情況是，對于大多數公司而言，這些沉浸式的體驗在商業上還不可行。除非您擁有幾乎無限的資源，例如 Valve 和 Google，否則創建類似于上述體驗的產品可能成本太高，風險太大且過于耗時。

          

          
    這種體驗非常出色，可以帶你到媒體和技術的最前沿，但通過新媒體將產品推向市場并不太好。

          

          
    通常，當一種新形式出現時，它會是一個小眾產品。隨著時間的推移，成本的下降，有足夠的人去學習和市場的資本注入，它就會成為應用廣泛的產品。

          

          
    隨著 VR 頭盔變得越來越普及，將會有越來越多的公司將 VR 融入他們與用戶的互動當中。

          

          
    從我們的角度看，相比于手機、平板，VR 用戶界面本質上是更直觀的，并且更接近用戶，隨著科技和市場的發展，VR 將會帶來更大的價值。

          

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

          
            
          
              
                評論(0)
                瀏覽(3354)
              
                          
          
          
          
                      
          
            
            
          UI設計經驗｜4個UI設計界面規范的實戰總結
          
            
          
               博博                                            
          
            
          
    UI設計經驗｜4個UI設計界面規范的實戰總結

          

          
    UI設計導師芳姐 2018-07-18 19:32:40

          

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

          

          
    
          
        
          
            UI設計經驗｜4個UI設計界面規范的實戰總結
        
          
        
          
            設計規范的共性
        
          
        
          
            不同的規范雖然內容差別很大，但是對比一下它們的目錄，卻又很多相似之處，通常包含：布局、組件、配色、圖標這四部分。
        
          
        
          
            組件里的分類無非是導航、菜單、表單、列表、表格、按鈕、彈出框諸如此類，我就不一一列出了。
        
          
        
          
            設計規范有哪幾類？
        
          
        
          
            總體看來，我發現這三類設計規范出現概率很高：
        
          
        
          
            1、給產品經理看的
        
          
        
          
            IOS和早些年的Android（現在已經統一改用Material Design）設計規范就屬于給產品經理看的，里面寫的東西大多圍繞如何選擇大的方向、哪種處理方式更加合理展開的，界面細節卻沒有詳細介紹。
        
          
        
          
            這種規范適合用來做演講，內容不多，都很有道理，參雜這很多創新的功能。
        
          
        
          
            而拿著它做設計卻很痛苦，因為它不告訴你如何才能達到理念中所勾勒的那個目標，圖標、尺寸、陪色、字體……很多東西都不明確。
        
          
        
          
            2、給設計師看的
        
          
        
          
            這種規范通常的好處是內容很豐富、圖例很多、建議比較詳細，能夠讓設計師以此為基礎發揮自己的創造力。
        
          
        
          
            Material Design就屬于這一類，而且里面很多1:1的范例可以直接拿來做參考這點非常感人。
        
          
        
          
            但這種規范也有不足之處。一是它缺乏針對具體場景的規則，常常把所有可能用到的元素都拿出來一一細說，然而卻不告訴你應該在什么場合使用什么。
        
          
        
          
            二是容易理想化，因為做這種規范的人通常是純粹的設計師，所以里面很多設計想法未必有足夠的可實現性，或是一些創意未必經得過實踐的考驗。
        
          
        
          
            Material Design里面很多看起來簡單的設計其實是很難實現的，例如用分辨率敏感的dp取代像素單位其實大部分情況下很難實現。
        
          
        
          
            UI設計經驗｜4個UI設計界面規范的實戰總結
        
          
        
          
            Material Design的文本框中，說明文字會變換位置和大小，排多了看起來會很亂。
        
          
        
          
            3、給程序員看的
        
          
        
          
            這類不太關心布局、交互、配色等細節，而是告訴讀者他們能做出什么東西，怎么做出那些東西。
        
          
        
          
            這類規范筆我原本預想的要多很多，其中令我印象最深刻的是Windows Phone的設計規范。
        
          
        
          
            程序員的隊友都稱贊Windows的設計規范有多好多好，只有我覺得用起來無比痛苦。
        
          
        
          
            現在想來，Windows Phone的設計規范雖然稱之為設計規范，區別于Windows Phone的開發規范，但它完全是個教程序員如何實現各種界面的指南。
        
          
        
          
            產品經理可能還可以用它來看看頁面類型，對設計師來說卻沒有太大幫助。
        
          
        
          
            這種規范對于不需要設計師的場景還是非常有幫助的，比較相比前兩種，這種的可實現性非常高。
        
          
        
          
            設計規范的選取
        
          
        
          
            我認為上文提過的三種設計規范都很重要，且適用于不同的場合。
        
          
        
          
            第一類給產品經理看的規范適合設計初期，確定理念、報告思路階段。
        
          
        
          
            第二類給設計師看的規范適合在設計定型階段，這個時候界面具體長什么樣已經確定了，但是未來的實施過程還會帶來一些不確定因素。
        
          
        
          
            第三類規范適用于開發階段，根據界面來規范代碼，能夠大大提升前段的開發效率。
        
          
        
          
            設計規范的常見遺漏
        
          
        
          
            由于第一類規范的內容要求不多，所以這里的遺漏主要針對后面兩類。
        
          
        
          
            1、文本格式
        
          
        
          
            設計師常過分專注于畫圖，而忘記了文字也應該有所規范。例如，日期可能的格式有很多。
        
          
        
          
            例如“YYYY年MM月DD日”、“YYYY年M月D日”、“YYYY/MM/DD”等等。
        
          
        
          
            再比如說單位，是用“大?。?00M”、“大?。?00兆”還是“大小（M）：100”呢？
        
          
        
          
            這些文本格式定義起來并不花時間，可是如果沒有規范的話，可能同一個東西在每個頁面的展示方式都不一樣，對用戶來說也挺煩的。
        
          
        
          
            2、特殊狀態
        
          
        
          
            做設計和做規范的區別是，做設計時，只有在知道某個東西有某個狀態時，才會去設計那個狀態；
        
          
        
          
            做規范時，通常要假定所有數據和操作都有狀態，不同東西在不同地方的同類狀態最好能夠統一。
        
          
        
          
            所有操作都可能失效，不管是按鈕、鏈接、輸入框、下拉菜單……什么情況在失效時顯示失效狀態，什么時候完全隱藏該操作，這些都是可以統一考慮設計的東西。
        
          
        
          
            所有的操作都可能出錯，尤其是輸入框的出錯率極高。如果出錯了，如何告訴用戶哪里錯了？如何糾正？由此還可以聯想到，如何在一開始就避免用戶犯錯？
        
          
        
          
            所有擺放數據的地方都有可能沒有內容，也許是列表為空，也許是字段為空。這種情況該如何明確又美觀地告訴用戶這里沒有內容不是網絡問題也不是系統問題？
        
          
        
          
            UI設計經驗｜4個UI設計界面規范的實戰總結
        
          
        
          
            △ 頁面沒有內容的顯示效果
        
          
        
          
            所有內容都有可能出現異常，網絡不穩定、格式不支持、系統出錯等。這種狀況如何明確又美觀地告訴用戶可能是哪里出現問題，如何補救？
        
          
        
          
            成功也需要有成功的狀態，有些時候頁面不止一項任務，第一項成功了，第二項失敗了，用戶走到第三項時不一定還記得第一項是成功的還是失敗的。
        
          
        
          
            3、多級多選和過量
        
          
        
          
            一個靈活的界面規范能夠應對大部分的內容變化。例如導航和菜單的項目數量和級數通常是不確定的，下拉選框也不一定只能勾選一項內容。
        
          
        
          
            更靈活的情況還有，一篇文章可能長達數十屏，這時該自動識別文章內的標題并生成目錄，還是分頁展示？
        
          
        
          
            4、使用指南
        
          
        
          
            使用指南是設計過程中通常被拖到最后才想起來的東西，在規范里也常被忽視。其中最重要的是用戶首次使用時看到的操作指南。
        
          
        
          
            這種操作指南可能不只在首頁出現，并且未來可能隨著設計的變更而變更，所以這種首次使用的操作指南是很有必要做成規范的。
        
          
        
          
            UI設計經驗｜4個UI設計界面規范的實戰總結
        
          
        
          
            △ 首次使用的操作指南
        
          
        
          
            此外，使用過程中，在關鍵時候出現的操作提示也可以有規范。例如用戶進入一個新功能時，可能會出現該功能的介紹。
        
          
        
          
            5、尺寸適配
        
          
        
          
            響應式界面已經被說了這么多年了，而被明確放在規范里的，除了Material Design之外還真是很難找到了。
        
          
        
          
            如果你想了解響應式界面，可以看我之前的文章《設計響應式界面該清楚哪些》。
        
          
        
          
            響應式界面有很多分類和實現方式，不論是視覺、交互還是前段都有所涉及，每個頁面和元素都可能根據實際情況需要特殊處理，這也是為什么響應式設計很難定制規范。
        
          
        
          
            UI設計經驗｜4個UI設計界面規范的實戰總結
        
          
        
          
            △ 響應式界面：如果是頁面是容器，內容就像水一樣
        
          
        
          
            除了整個頁面的適配之外，小的組件也最好是可能變化尺寸的。例如同一張圖表，可能被放在一個很空曠的頁面，也有可能被放在一個很擁擠的頁面。
        
          
        
          
            需要調整尺寸時，哪些可以縮放哪些不能縮放，對其的中心是什么……這些如果能夠明確，設計將會變得越來越像拼圖。
        
          
        
          
            除了整個頁面的適配之外，小的組件也最好是可以自動調整尺寸。例如同一張圖表可能被放在一個很空曠的頁面，也有可能被放在一個很擁擠的頁面。
        
          
        
          
            組件需要調整尺寸時，哪些可以縮放哪些不能縮放，對其的中心是什么……這些如果能夠明確，設計將會變得越來越像拼圖。
        
          
        
          
            6、動效
        
          
        
          
            動效也火了很久了，但是似乎還是停留于表面，缺少一套可依賴的標準。動效師并不好當，既要有超高的編碼能力，又要有敏感的美學神經。
        
          
        
          
            也許就是因為這么困難，才導致大部分設計規范即便包含動效這一目錄，里面填充的內容也非常模糊不清。
        
          
        
          
            7、音效
        
          
        
          
            大部分應用是沒有音效的，因為音效很容易讓人厭煩，而且節奏不好把控。但是對于音樂、視頻等媒體應用，音效的發揮空間卻很大，至今尚未開發。
        
          
        
          
            撇開這些不談，如果有音效，何時使用何種、多大音量、時長多少、震動模式（手機）時需不需要震動反饋，很多東西都可以考慮。
        
          
        
          
            8、手勢
        
          
        
          
            和鍵盤的快捷鍵一樣，偏愛觸屏手勢的也大有人在，而且手勢也能讓產品更加獨特。如果允許使用手勢，這部分也可以有所規范。
        
          
        
          
            9、國際化
        
          
        
          
            如果界面上的語言種類不止一種，那么如果文字轉換后過長或過短怎么辦？用戶在看不懂當前語言的情況下如何切換語言？
        
          
        
          
            不同的語言該選擇什么字體才不至于太難看（例如中文的默認字體通常是宋體）？
        
          
        
          
            10、小眾人群
        
          
        
          
            雖然我們最關心的還是主流用戶，但是很多小眾人群組合起來也是可以構成一定分量的。例如，觸屏應用能不能給左手使用者舒適的體驗？
        
          
        
          
            桌面應用能不能夠讓沒有鼠標或是沒有鍵盤的人使用？色盲和色弱能區分界面上的色塊？視力較差的人能不能放大字。
        
          
        
          
            希望以上內容對你學習UI設計有幫助，覺得可以請轉發支持一下，持續分享更多UI設計優秀文章。
        
          
        
          
            
          
                藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
            
          
            
          
                
          
          
            
          
        
          
    
          

          
            
          
              
                評論(0)
                瀏覽(5022)
              
                          
          
          
          
                      
          
            
            
          國外極簡商城APP UI界面設計欣賞，別告訴我你不會“抄”
          
            
          
               博博                                            
          
            
          
    國外極簡商城APP UI界面設計欣賞，別告訴我你不會“抄”

          

          
    UI巴巴 2018-07-05 21:02:31

          

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

          

          
    
          
        
          
            相對于其他類型的APP，商城APP設計難度比較高，因為電商APP業務比較復雜，既要展示完整的業務功能，又要保證用戶體驗，非?？简濽I設計師的設計功力。所以小編精心挑選了幾款比較優秀的電商APP界面設計作品，希望對設計師有借鑒意義，里面的一些精髓還是值得一“抄”。 
        
          
        
          
            1、極簡的設計，適用安卓平臺，跟其它設計不一樣的是篩選按鈕放在底部。
        
          
        
          
            國外極簡商城APP UI界面設計欣賞，別告訴我你不會“抄”
        
          
        
          
            2，商城的登錄頁和產品信息流頁面。
        
          
        
          
            國外極簡商城APP UI界面設計欣賞，別告訴我你不會“抄”
        
          
        
          
            3，安卓平臺的商城app首頁。
        
          
        
          
            國外極簡商城APP UI界面設計欣賞，別告訴我你不會“抄”
        
          
        
          
            4，極簡設計的商城app。
        
          
        
          
            國外極簡商城APP UI界面設計欣賞，別告訴我你不會“抄”
        
          
        
          
            5，卡片式的產品翻頁設計。
        
          
        
          
            國外極簡商城APP UI界面設計欣賞，別告訴我你不會“抄”
        
          
        
          
            6，漸變色的運用，不對稱的排版。
        
          
        
          
            國外極簡商城APP UI界面設計欣賞，別告訴我你不會“抄”
        
          
        
          
            7，商城產品列表頁設計。
        
          
        
          
            國外極簡商城APP UI界面設計欣賞，別告訴我你不會“抄”
        
          
        
          
            8，服裝類商城，篩選器的設計。
        
          
        
          
            國外極簡商城APP UI界面設計欣賞，別告訴我你不會“抄”
        
          
        
          
            9，生鮮類商城app的設計。
        
          
        
          
            國外極簡商城APP UI界面設計欣賞，別告訴我你不會“抄”
        
          
        
          
            以上商城app設計案例里有產品頁界面設計，也有商城首頁的ui設計。電商APP的設計不能只滿足表面的視覺層面，還要關注業務的流程，這樣設計出來的APP才能吸引更多用戶訪問和購買你的產品。
        
          
    
          

          

          
    
          
        
    
          

          

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

          


          
            
          
              
                評論(0)
                瀏覽(5141)
              
                          
          
          
          
                      
          
            
            
          交互設計之設計心境：創造情緒板的7個動機
          
            
          
               博博                                            
          
            
          
    交互設計之設計心境：創造情緒板的7個動機

          

          
    人人都是產品經理 2018-08-19 14:05:13

          

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

          

          
    
          
        
          
            本文將致力于稱為情緒板的技術。讓我們來看看情緒板是什么，以及他們在設計師的工作流程中是如何幫助的。enjoy~
        
          
    
          
交互設計之設計心境：創造情緒板的7個動機 
    
          
        想象一下你努力工作，花了很多時間來創建一個詳細的原型，然后一個客戶拒絕它甚至不接近他想要的。聽起來很熟悉，不是嗎？至少每一個設計師都經歷過這樣一個不愉快的局面。也許現在每個人都希望得到一些相關的建議，如何避免這種情況，但真正說沒有一個完美的決定。
    
          
    
          
        然而，有幾種方法有助于降低客戶拒絕的風險，并節省設計師的時間和勇氣。今天的文章致力于稱為情緒板的技術。讓我們來看看情緒板是什么，以及他們在設計師的工作流程中是如何幫助的。
    
          
    
          
        什么是情緒板？
    
          
    
          
        情緒板技術不僅在設計領域流行，而且在許多創造性的專業人員中流行。情緒板是確實的板（數字或材料），從照片到各種肌理，人們填充不同種類的東西以至于能將想法和概念形象化。
    
          
    
          
        與線框和原型不同，情緒板不顯示未來項目的詳細圖片。它們意在傳遞正確的情緒，并帶來產品期望的情感。
    
          
    
          
        情緒板是一個有用的工具，幫助設計師有效地與客戶和團隊成員合作。紙板可以在一個緊湊的時間框架內輕松地被創建，并把抽象的想法變成現實。這樣，設計師可以有效地與他人分享他們的想法，因為視覺材料總是比流暢的說法更好。
    
          
交互設計之設計心境：創造情緒板的7個動機 
    
          
        如何創建情緒板？
    
          
    
          
        情緒板是一個很好的方法來實驗調色板，字體和風格，以及規劃一個項目的視覺層次。每個人都自己決定在情緒板中包含哪些組成部分。UI/UX設計師通常使用各種樣本以至于可以來描述界面元素的特征。讓我們來看看情緒板常見的幾種類型。
    
          
    
          
        自由拼貼
    
          
    
          
        設計師經常收集免費高清的圖片，方便他們在項目或其他地方使用這些素材。這些收集品可能有助于情緒板的創作。將美麗的照片組成的自由拼貼是傳遞設計理念的一種有效方式。此外，拼貼可以用插圖，字體和顏色案例來構成。
    
          
    
          
        創建這種類型的情緒板是最快的，也是最容易的。但是，如果客戶比較關注細節，他們可能并不會對將來項目中的這些拼貼感興趣。
    
          
交互設計之設計心境：創造情緒板的7個動機 
    
          
        參考收集
    
          
    
          
        靈感來源和想法可視化的另一種方法是找高質量的參考。網上有很多資源，如Behance和Dribble，在那里設計師可以通過免費瀏覽的方式獲取靈感和還有一些實際項目的示例。由一個相同風格或任何其他特性聯合起來的設計作品可以很容易地說明一個新項目的想法。此外，這樣的情緒板可以幫助客戶有效地理解一個概念，因為他們可以看到類似的參考，并能夠大致想象出他們的產品會是什么樣子。
    
          
    
          
        模版畫板 
    
          
    
          
        這些情緒畫板更像是原型和線框圖。他們的目標是展示產品的結構和視覺層次。不同之處在于模版畫板上的UI元素沒有線框圖中的原型或示意圖那么詳細。把隨機的插圖和照片來當做界面的構成元素，并以此來展示（數字）產品的布局。此外，可以用這種方式選擇圖像，從而更容易的確認合適的配色。這種方法比原型更快，因為它不需要細節。
    
          
交互設計之設計心境：創造情緒板的7個動機 
    
          
        為什么UI/ UX設計師應該創建情緒畫板？
    
          
    
          
        我們中的許多人可能注意到，在設計工作流程中，線框和圓形總是被描述為基本階段，而很少人提到情緒畫板。有些人認為他們是在浪費時間，或是認為這只是一種“娛樂”。經管如此，仍然有很多人把畫板作為每個創意過程的一部分。但是他們為什么要選擇這項技術呢？在這里，我們收集了設計師的原因清單。
    
          
    
          
        1.節省時間和精力
    
          
    
          
        情緒畫板的第一個且很大的有點是它不需要花太多的時間就能完成。這意味著，在幾小時或者更少時間內，設計師就可以創建一個視覺指南，為客戶提出一個概念。情緒畫板可以很容易地編輯，這樣既省時又省力。
    
          
    
          
        這樣的視覺指南是一個很好的基礎，可以快速的跳轉到下一個階段——原型階段。此外，如果客戶對結果不滿意且想要一個新方案，設計師也不會變得神經質，因為他們不用花一整天的時間來創建一個詳細的演示。
    
          
    
          
        2. 獲取靈感
    
          
    
          
        當然，設計師不能總是依賴靈感，因為他們有工作要做，然而，如果創造者收到啟發，事情就能更有效的進行。情緒畫板是一個尋找創意和熱情的好方法。美麗的照片和插圖有助于找到正確的情緒和風格。此外，如果可能，你可以試著通過你周圍的東西來創建一個情緒畫板當做素材使用。據說手工對創造性思維有很大的影響。所以為何不試一試呢？
    
          
    
          
        3. 找到一個對的顏色配色板
    
          
    
          
        一個拼貼內可以包含照片、插畫和顏色形成布置引人入勝的樣品。在一個板上混合不同顏色的圖片，即使UI元素還沒有準備好，設計者也可以用調色板進行實驗。
    
          
    
          
        4. 加強與客戶的溝通
    
          
    
          
        當產品處于抽象概念階段時，設計師和客戶有時很難在討論時相互理解。例如，雙方可以以不同的方式看到某種風格，從而引起爭論。這就是為什么使用一些視覺參考如情緒板總是一個好主意
    
          
    
          
        5. 少說話，多展示
    
          
    
          
        繼續上面的觀點，應該說任何長的報告都不能比視覺呈現更好地解釋你的計劃和想法。在客戶的腦海中，文字無法成形，但視覺材料是一個可靠的指導，幫助客戶深入深入細節并正確理解你的想法。
    
          
    
          
        在早期階段說明你的想法，這樣客戶可以看到你的計劃以及他們的產品是如何成形的。
    
          
    
          
        6. 為設計找到一種風格
    
          
    
          
        如果一個創意團隊沒有收到客戶關于設計風格的指示，任務就落在設計師的肩上。要了解一種或另一種樣式如何工作，不必為它們中的每一種構建詳細的原型。添加到情緒板不同的紋理，實驗類型的插圖，測試字體，并改變顏色。用情緒板來嘗試選項比用一個接一個地改變原型更快、更方便。
    
          
    
          
        7. 讓客戶參與流程 
    
          
    
          
        獲得客戶信任的方法之一是讓他們覺得自己深入參與了一個項目。因此，在這個階段，如果他們愿意，他們可以積極參與風格和樣本的選擇。在非設計師的情況下，做模型是一種很簡單的技巧。
    
          
    
          
        可以建議客戶對照片和圖片進行拼貼，如果不是新客戶，也可以提供參考。通過這種方式，設計師可以輕松地了解客戶的品味和偏好，并了解他們對項目的期望。
    
          
    
          
        數字設計項目的情緒板的例子
    
          
    
          
        為了更實際地介紹這個問題，我們想向您展示由Tubik設計師Dima Panchenko編寫的用于用戶界面設計項目的擴展情緒板集。他還做了一些常規筆記向客戶展示了情緒板，這對溝通的過程和選擇了項目的概念有積極的影響。
    
          
    
          
        1. 用于設置客戶對屏幕總體風格概念的偏好的情緒板
    
          
交互設計之設計心境：創造情緒板的7個動機 
    
          
        2. 情緒板呈現出項目需求所對應的風格上的眼光
    
          
交互設計之設計心境：創造情緒板的7個動機 
    
          
        
          
            藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
        
          
        
          
            
          
          
        
          
    
          

          

          
            
          
              
                評論(0)
                瀏覽(3673)
              
                          
          
          
          
                      
          
            
            
          幾個案例解析：如何一步步做出合理的策劃方案
          
            
          
               博博                                            
          
            
          
    幾個案例解析：如何一步步做出合理的策劃方案

          

          
    人人都是產品經理 2018-08-19 15:01:59 

          

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

          

          
    
          
        
          
            做產品方案的時候，我們經常會走進死胡同或者跑錯路，最后不論是開發還是市場，對結果都不滿意，產品自然就成了背鍋俠！但是往往我們出方案的時候，多想一些問題，或許結果就不一樣，跟新人交流的時候，發現一些能力需要可以單獨訓練，有意識的去理解一些東西，長期積累就會有自己的一套解決問題的思路。
        
          
    
          
幾個案例解析：如何一步步做出合理的策劃方案 
    
          
        1. 辨別真偽的能力
    
          
    
          
        辨別真偽也就是老生常談的真偽需求的能力，在產品經理的行業里，經常會進行需求的評審，需求的界定，看這個需求是否是真的有效
    
          
    
          
        舉個例子
    
          
    
          
        行業：外賣行業
    
          
    
          
        案例：打包費審核的功能
    
          
    
          
        功能出發點：解決商家亂設打包費的需求
    
          
    
          
        解讀：如果從這個角度來講，打包費審核完全沒必要，原因有
    
          
    
            
        
          • 
            未必所有的商家都亂設打包費，只是個別現象
        
            • 
        
          • 
            及時設置了打包費審核，后臺審核了，也沒辦法解決，除非后臺做強制性的更改或下架商品的功能
        
            • 
        
          • 
            打包費是商家自主行為，如果商家惡意設置打包費，是給自己添堵
        
            • 
        
          • 
            如果真想解決此問題，在商家上傳商品的時候設置打包費的選項，一個餐品打包費最多是多少
        
            • 
        
          • 
            或許極個別的商家的打包費真的會比較高，可以在商家管理后臺做好打包費配置即可，從源頭控制
        
            • 
    
          
    
          
        很顯然，要在后臺做一個打包費審核的功能，還需要讓人專門處理此業務，對系統來說，是降低效率又不見得有效果的，所以，界定為偽需求。那么既然存在這樣的問題，可替代方案如下：
    
          
    
            
        
          1. 
            商家添加商品時打包費又兩個選擇【收打包費】【不收打包費】，打包費為行業標準，1元/份餐品；
        
            2. 
        
          2. 
            對于大型的打包盒，比如說探魚這些商家，打包費可以開放設置（大型連鎖或者知名品牌可以認定為不需要通過打包盒來賺取利潤）。
        
            3. 
    
          
    
          
        辨別真偽的能力不僅僅體現在能辨別出來，更多的是能夠用更靈活的方式來解決來自運營、消費者產生的問題，且不增加過多的額外工作。
    
          
    
          
        2. 找到合適定位的能力
    
          
    
          
        合適定位的能力，這個說的有點虛，用通俗的話來講，就是找個抄的對象。在國內想要做一個App有大量的抄襲模仿對象，各大知名廠商已經做了很多的研究，剩下的就是模仿和創新。能不能找到合適的模塊去進行創新，這個就比較重要。
    
          
    
          
        案例1：外賣行業，推薦商家
    
          
    
          
        功能出發點：外賣行業的推薦商家，很多事按照細分的行業來做的，比如說美團跟餓了么的【必吃菜品】【品質聯盟】這些，但是對消費者來說，這真的是我想要的選擇么？
    
          
    
          
        解讀：從消費者的心理出發，我去找吃的，可能出于幾點
    
          
    
            
        
          • 
            找新鮮：看看這附近有什么新鮮的店鋪開業或者新的口味，外賣一個月都是那幾家，早就膩了
        
            • 
        
          • 
            找實惠：外賣分量不夠，10塊錢管飽的那種最好
        
            • 
        
          • 
            速度快：能告訴我最快的是哪家么？
        
            • 
    
          
    
          
        其次還有可能
    
          
    
            
        
          • 
            這兩天身體不舒服，想吃點口味淡的
        
            • 
        
          • 
            我是湖南湖北人，我想吃點重口味的
        
            • 
        
          • 
            ……
        
            • 
    
          
    
          
        因此，從這類具有標示性的標簽入手，會更有效果。此類功能類似于一點點的餐牌設計以及lofter的標簽設計，將商家分配不同的標簽跟消費者的消費場景對應上，交叉進行推薦，比如說一個商家有很多種口味，那對應的消費者人群也會多，消費者通過對應標簽可以快速找到對應的商品，對消費者和商家都是互利的，我們經常會遇到一個外賣店鋪有幾十種餐品，找半天還是不知道吃啥。
    
          
幾個案例解析：如何一步步做出合理的策劃方案 
    
          
        （配個截圖，此功能已實現，后續看數據情況，再做追蹤）
    
          
    
          
        順便說一下，之前餓了么有個版本放大對餐品的顯示，做餐品的推薦，后來又改回來，具體是什么因素，不確定，但那也是一種嘗試。
    
          
    
          
        案例2：荔枝FM飛機稿
    
          
    
          
        出發點：那是很早以前的一個版本，因為不好用，所以就干脆做一個交互飛機稿，當時做的時候有以下幾個因素：
    
          
    
            
        
          • 
            體驗不好，最古老的版本體驗非常不爽（詳情可以戳這里：http://www.woshipm.com/ucd/209199.html）
        
            • 
        
          • 
            當時在做交互設計，就嘗試用新的交互設計思路去設計
        
            • 
    
          
    
          
        解讀：
    
          
    
          
        當時荔枝FM算是國內比較早做電臺的，同期出了喜馬拉雅聽，剛開始也沒有荔枝FM那樣火，但從交互上，主要由兩個點：
    
          
    
            
        
          1. 
            模擬電臺操作：荔枝FM當時還是走擬物化設計（新進入互聯網的可能覺得是歷史），那從FM收音機的角度來說，都有一個旋鈕，或者是老式的隨身聽，因此在主頁的界面設計以及播放界面設計都有參考古老隨身聽的樣式，既然復古，我們就徹底點
        
            2. 
        
          2. 
            數據整理：在當時做荔枝FM的飛機稿時，主要做的是數據層的整理，把繁雜的內容數據變得有序可循，讓用戶和博客可以更快找到合適自己的內容
        
            3. 
    
          
    
          
        對于合適的定位可以理解為：每個事物或許有自己固有的長相，但或許我們找到合適的邏輯后，只要抓住根本，那最后怎么玩，還是大家說了算，打破陳規，才更好玩。為什么音樂軟件就一定要有那么大的播放界面；為什么訂餐軟件就一定要宣傳店鋪，不能是商品？
    
          
    
          
        3. 解決問題的能力
    
          
    
          
        這個就老生常談了，解決問題的能力體現在對系統的掌握程度和開發自由度兩個層面，產品經理實質是提供解決方案的，任何需求到手后，我們需要分析如何快速解決該問題。
    
          
    
          
        案例1：招聘面試流程
    
          
    
          
        出發點：銷售類崗位進行招聘時，都是一大批一大批的面試，一個人可能同時面試很多崗位，一個公司會面試很多個求職者，因此提率，對求職者和公司都是最大的需求
    
          
    
          
        解決方案：排隊叫號，跟銀行排隊一樣，針對這個場景，我們梳理了核心的問題
    
          
    
            
        
          • 
            面試人員取號
        
            • 
        
          • 
            面試人員查看各崗位當前排隊情況及投遞請求
        
            • 
        
          • 
            企業招聘人員查看簡歷并選擇是否面試，對面試的人進行初步評論
        
            • 
        
          • 
            叫號及數據導出
        
            • 
    
          
    
          
        針對以上四個問題，設計出如下流程（省略取號的環節，主要核心的流程是企業的發送通知循環以及面試后的符合不符合操作循環）
    
          
幾個案例解析：如何一步步做出合理的策劃方案 
    
          
        從流程圖可以發現，核心邏輯并不復雜，解決了通知求職者來面試的需求以及對求職者進行評價需求即可；除此之外還可以做一些其他的功能，如求職者可以看到當前排隊情況，根據實際情況進行簡歷投遞，避免出現大量等待情況，可預知自己還要多久可以面試，在這時間內是否可以投遞其他公司，進行多項選擇；對于企業解決各種紙質簡歷分辨不清，電子檔簡歷，電子記錄每一個求職者和操作，可以清楚知道今天面試記錄，電子檔案，更清楚，提高雙方的效率。
    
          
    
          
        4. 了解數據的能力
    
          
    
          
        對于數據，很多人應該不會陌生，如何從雜亂的數據找到規律，怎么處理數據之間的關系？
    
          
    
            
        
          1. 
            一級頁面到二級頁面的流失率和轉化率
        
            2. 
        
          2. 
            每個頁面轉化功能的設計及數據統計
        
            3. 
        
          3. 
            數據解讀
        
            4. 
    
          
    
          
        最近在做小程序相關的項目，把騰訊的數據統計貼上來:
    
          
    
          
        訪問趨勢類：
    
          
    
            
        
          • 
            time 時間
        
            • 
        
          • 
            session_cnt 打開次數
        
            • 
        
          • 
            visit_pv 訪問次數
        
            • 
        
          • 
            visit_uv 訪問人數
        
            • 
        
          • 
            visit_uv_new 新用戶數
        
            • 
        
          • 
            stay_time_uv 人均停留時長 (浮點型，單位：秒)
        
            • 
        
          • 
            stay_time_session 次均停留時長 (浮點型，單位：秒)
        
            • 
        
          • 
            visit_depth 平均訪問深度 (浮點型)
        
            • 
    
          
    
          
        訪問分布：
    
          
    
            
        
          • 
            access_source_session_cnt 訪問來源分布
        
            • 
        
          • 
            access_staytime_info 訪問時長分布
        
            • 
        
          • 
            access_depth_info 訪問深度的分布
        
            • 
    
          
    
          
        訪問留存
    
          
    
            
        
          • 
            visit_uv_new 新增用戶留存
        
            • 
        
          • 
            visit_uv 活躍用戶留存
        
            • 
    
          
    
          
        訪問頁面：
    
          
    
            
        
          • 
            page_path 頁面路徑
        
            • 
        
          • 
            page_visit_pv 訪問次數
        
            • 
        
          • 
            page_visit_uv 訪問人數
        
            • 
        
          • 
            page_staytime_pv 次均停留時長
        
            • 
        
          • 
            entrypage_pv 進入頁次數
        
            • 
        
          • 
            exitpage_pv 退出頁次數
        
            • 
        
          • 
            page_share_pv 轉發次數
        
            • 
        
          • 
            page_share_uv 轉發人數
        
            • 
    
          
    
          
        總結
    
          
    
          
        產品經理從拿到需求開始就需要對需求進行分解，判斷到底什么樣的方案可以解決此問題，并結合當前系統的一些功能點，給出最佳的方案；在交互設計的時候是參考競品還是微創新，就看實際業務需求；最后就是核心業務梳理，一個功能的核心業務是什么，還有哪些可以搭配讓功能更完善的，考慮進去，做產品是一個分解、組合、刪減、再組合的過程！
    
          
    
          
        
          
    
          
    
          
        
          
            藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務 
        
          
        
          
            
          
           
        
          
    
          
    
          
        
          
    
          
    
          
        
          
    
          

          
            
          
              
                評論(0)
                瀏覽(3852)
              
                          
          
          
          
                      
          
            
            
          面向中小企業SaaS的權限管理系統
          
            
          
               博博                                            
          
            
          
    面向中小企業SaaS的權限管理系統

          

          
    人人都是產品經理 2018-08-19 15:02:17

          

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

          

          
    
          
        
          
            本文基于面向某個垂直行業的SaaS系統的設計經驗，抽象出一套適合中小企業的權限管理體系，目標是最大限度保留系統彈性的同時，把系統復雜度和開發成本盡可能降低。enjoy~
        
          
    
          
面向中小企業SaaS的權限管理系統 
    
          
        面向企業級的SaaS（軟件及服務）系統，由于企業用戶的規模和內部管理模式千差萬別，設計一套具備足夠彈性、符合絕大部分目標企業用戶需求的權限管理系統，是一個很大的挑戰。
    
          
    
          
        我們可以看到，市面上面向多個行業的綜合性SaaS系統，例如銷售易、紛享銷客等，由于它們的目標客戶跨越了多個行業、多種規模，這些企業具備各種各樣的內部管理風格和模式，在權限系統的管理上，往往做得非常復雜，不僅具備部門、角色、職位、數據等各個維度的權限管理，各個功能模塊還有自己獨立的權限管理，雖然具備最大的彈性，卻給企業的系統管理帶來較大的負擔。
    
          
    
          
        提煉的三個核心原則：
    
          
    
            
        
          • 
            企業-管理員-普通賬號三級權限
        
            • 
        
          • 
            功能和數據權限分離
        
            • 
        
          • 
            部門和角色分離
        
            • 
    
          
    
          
        圍繞上述三個基本原則，我們力圖在滿足中小企業需求的前提下保持足夠的彈性，并嚴格控制復雜度和開發成本。詳細描述如下。
    
          
    
          
        1. 權限從上到下分為三個層級：企業賬號（老板賬號）、管理員賬號、普通賬號
    
          
    
          
        對于中小企業來說，公司的實際控制人，往往是公司的創始人或自然人大股東，因此企業賬號的使用者以及對應綁定的手機號碼，都是公司的實際控制人，他應該掌握最核心、權限最大的企業賬號，所以也可以稱為“老板賬號”。
    
          
    
          
        但是在實際場景中，公司的實際控制人并不會直接管理公司的業務支撐系統，因此，需要在系統首次部署時，創建好企業賬號，并由企業賬號授權給某一個或多個系統管理員，由系統管理員去完成日常的角色創建、員工導入等工作。系統管理員，對應的一般就是HR或行政部門的管理人員。當然，企業賬號的權限高于管理員賬號，如果是小微型企業，也可以由企業賬號直接替代管理員賬號的功能。
    
          
    
          
        除了企業賬號和管理員賬號之外，其他各級員工所持有的賬號，都屬于普通賬號。普通賬號的部門、角色、數據等權限的設置，一律由系統管理員配置。
    
          
    
          
        三個權限層級示意圖如下：
    
          
面向中小企業SaaS的權限管理系統 
    
          
        在實際系統中的核心業務步驟如下：
    
          
    
          
        （1）企業購買系統時，創建一個企業賬號，這個企業賬號綁定的手機號碼為公司實際控制人的手機號碼。該手機號碼必要時可以解綁（例如公司實際控制人變更），由于該功能觸發頻率很低，因此不需要在前端功能中實現，只需要在購買協議中寫明，“購買企業可以通過書面方式提出企業賬號手機號碼綁定變更需求”即可。
    
          
    
          
        （2）在部署和培訓階段，可指導企業賬號持有人創建一個或多個管理員賬號，該賬號一般授權給行政總監或人力資源總監，后續配置即由管理員賬號進行。
    
          
    
          
        （3）管理員賬號持有人需要接受系統培訓，掌握部門創建、角色創建、功能和數據權限分配等基本操作。管理員所有操作都必須記錄在案，供企業賬號持有人監督，且管理員操作觸發異常行為規則（如大量分配高等級權限等）時，系統會通過短信方式通知到企業賬號持有人，確保企業賬號對管理員的全方位掌控。
    
          
    
          
        （4）企業賬號可隨時將管理員賬號禁用或設定為離職，但管理員賬號不可對企業賬號進行任何配置或操作。
    
          
    
          
        （5）企業賬號默認擁有所有權限。
    
          
    
          
        2. 功能權限和數據權限分離
    
          
    
          
        功能權限，定義為可見、可以操作的功能范圍。例如某一部分菜單，或者某個頁面里的各種操作。
    
          
    
          
        數據權限，定義為若干個數據類型里的具體可見范圍，例如“客戶”就是一個數據類型，它的權限舉例如“無權限”、“我的客戶”、“我所在部門的客戶”、“我所在部門及下級部門的客戶”。
    
          
    
          
        通過功能權限和數據權限的分離，我們可以做到以下場景：需要開拓和維護客戶的角色集合，都可以擁有“客戶”這個菜單的權限，但不同的角色進入“客戶”菜單的列表時，看到的客戶范圍各不相同，極端情況是看不到任何客戶。且不同角色在同一個客戶頁面上，能進行的操作也不同，例如有的角色可以新建客戶，有的卻不行，這就要由功能權限來控制。
    
          
    
          
        可見，通過功能權限和數據權限的分離和配合，我們在具體的權限分配上有了非常大的彈性，且在技術層面的后臺系統的設計上，也非常合理、清晰。
    
          
    
          
        而在具體設計上，需要保證以下4點：
    
          
    
            
        
          1. 
            正確區分功能和數據，入口性和操作性的都應該歸類為功能
        
            2. 
        
          2. 
            正確對數據進行分類，避免存在分類后的某些數據存在交集
        
            3. 
        
          3. 
            數據分類到多細的顆粒度，需要由行業特性決定
        
            4. 
        
          4. 
            數據權限區分為查看、編輯和刪除
        
            5. 
    
          
    
          
        示例圖如下，由于涉及具體產品，對某些文字進行了打碼：
    
          
面向中小企業SaaS的權限管理系統面向中小企業SaaS的權限管理系統 
    
          
        3、部門和角色分離
    
          
    
          
        部門的定義，自然就是公司行政組織架構下的部門。
    
          
    
          
        在本設計方案中，角色等同于職位，而在許多大型的SaaS系統中，為了更大的靈活性，往往會把角色和職位分開，但根據我們的判斷，對于中小企業，設定角色一個就夠了，職位當然還存在，但僅僅是一個不涉及權限管理的文本title了。
    
          
    
          
        以一個銷售公司來說，角色可以包括：“渠道專員”、“渠道總監”、“銷售專員”、“銷售經理”、“總經理”等等。
    
          
    
          
        所謂的部門和角色分開，就是不同的部門可以有相同的角色，例如如果有渠道一部、渠道二部，則這兩個渠道部的員工的角色都可以設定為“渠道專員”，這兩個部門的管理者都可以設定為“渠道經理”。再配合功能和數據權限，則進一步配置“渠道專員”具有“渠道”菜單的功能權限，其能夠查看的渠道數據權限范圍則僅為“我的”，而“渠道經理”同樣具有“渠道”菜單的功能權限，但其能夠查看的渠道數據權限的范圍則擴大為“部門”。
    
          
    
          
        具體設計上：
    
          
    
            
        
          1. 
            最大部門即為公司
        
            2. 
        
          2. 
            管理員賬號和普通賬號均可禁用或設置為離職
        
            3. 
        
          3. 
            不同部門可以配置相同角色
        
            4. 
        
          4. 
            相同角色的功能權限和數據權限是一樣的
        
            5. 
    
          
面向中小企業SaaS的權限管理系統 
    
          
        4. 權限系統和其他功能設計的關系
    
          
    
          
        總結完權限系統三個核心的基本原則后，我們還需要指出一點：權限系統的設計方案，在整個系統中絕不是孤立的，它能否實現設計目標，并和整個系統完美配合，還需要做到以下幾點：
    
          
    
          
        首先，菜單和功能的設計，必須是最小顆粒度，否則就和數據權限產生沖突。例如：我們只需要一個“客戶”菜單即可，不同角色在“客戶”菜單里能干什么事情，由功能權限和數據權限配合進行控制，但切不可出現“我的客戶”+“全部客戶”兩個菜單，這明顯和數據權限有根本沖突，且也是一種不優美、不合理、擴展性差的設計。
    
          
    
          
        其次，數據的分類，必須符合業務需求，且劃分合理。有些數據都是公開的可以不歸入數據權限進行管理，所有角色默認都有即可；有些數據需要進一步細分，例如同樣以“客戶”舉例，在某些公司的業務規則中，就需要將客戶的基本信息和聯系信息分開控制，管理層可以看客戶基本信息，但只有客戶負責人才可以看聯系信息，這種情況就需要將客戶的數據權限分為“客戶基本信息”和“客戶聯系信息”兩個。
    
          
    
          
        最后，權限變更的記錄和所有賬號的行為軌跡記錄一樣重要。權限系統本質是進行權力的限制，沒有監管的權力必定是會失控的。在出現問題的時候，必須同時配合權限變更的記錄、角色變更的記錄和賬號的行為軌跡記錄進行追責和存證，確保維護企業的合法權益。
    
          
    
          
        總結
    
          
    
          
        在合理設計的前提下，權限系統也并非越復雜越好。只有符合目標客戶需求并具備最大彈性的權限系統，才是最好的。
    
          
    
          
        藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
    
          
    
          
        
          
    
          

          
            
          
              
                評論(0)
                瀏覽(4332)
              
                          
          
          
          
                      
          
            
            
          「網易蝸牛閱讀」和「微信讀書」的寫書評功能分析
          
            
          
               博博                                            
          
            
          
    「網易蝸牛閱讀」和「微信讀書」的寫書評功能分析

          

          
    人人都是產品經理 2018-08-19 16:05:00

          

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

          

          
    「網易蝸牛閱讀」和「微信讀書」的寫書評功能分析 
    
          
        一、目的 
    
          
    
          
        三、用戶 – 場景 – 需求分析
    
          
「網易蝸牛閱讀」和「微信讀書」的寫書評功能分析 
    
          
        小結（這個模塊是做什么的？為什么？）： 
    
          
    
          
        從寫書評方說：
    
          
    
            
        
          1. 
            為領讀人/書評家/作家提供了一個新的發布自身書評/作品的平臺，且通過簽約等合作形式為他們提高了收入，同時為他們開拓了新的增加粉絲，擴大影響力，強化IP的新方式；
        
            2. 
        
          2. 
            為作家/書本運營方/媒體機構提供了相對于其他電子書app來說更為專業的推廣渠道；
        
            3. 
        
          3. 
            為閱讀者（尤其是有寫觀后感習慣的）提供了更專業、完整、體系化的內容記錄與發布方式，以及獲取認同，尋求社交，與書友互動交流的新機會。
        
            4. 
    
          
    
          
        從看書評方來說：
    
          
    
            
        
          • 
            閱讀者可以在閱讀前去通過書評快速全面了解一本書（零碎時間的泛讀），為要不要深入精讀提供參考；可以在閱讀前通過觀察別人對此書的解讀，帶著自己的問題與思考再去有目的性閱讀；可以在閱讀時，體系化的記錄自己的想法；可以在閱讀后尋找他人解讀中的不同點或共同點，加深自身思考，以及完善自身的想法。
        
            • 
        
          • 
            找書者可以通過次主打的導讀特色功能，通過專業人士分享的書單或由讀過的人分享的想法，找到更值得信賴的內容向導。
        
            • 
    
          
    
          
        從運營方來說：
    
          
    
            
        
          1. 
            以書評特色作為產品特色推廣，吸引有寫觀后感習慣的電子書閱讀群體，為對寫書評有愛好或者以寫書評為業的群體提供新的平臺，滿足拉新需求。
        
            2. 
        
          2. 
            通過書評領讀，為用戶挑選書籍提供大量專業參考滿足留存需求。
        
            3. 
        
          3. 
            以領讀人帶起書評風潮，以PGC促進UGC，以及通過普通用戶對領讀人的申請，滿足激活需求。
        
            4. 
        
          4. 
            在書評中插入書籍入口，方便用戶閱讀購買，滿足轉化需求。
        
            5. 
    
          
    
          
        四、業務流程、業務邏輯梳理
    
          
    
          
        功能流程： 
    
          
「網易蝸牛閱讀」和「微信讀書」的寫書評功能分析 
    
            
        
          1. 
            入口一：領讀 -> 右上角寫書評按鈕 -> 寫書評；
        
            2. 
        
          2. 
            入口二：我的 -> 我的書評 -> 右上角寫書評按鈕 -> 寫書評；
        
            3. 
        
          3. 
            入口三：選擇書籍 -> 閱讀書籍 -> 右上角寫書評按鈕 -> 寫書評；
        
            4. 
        
          4. 
            入口四：選擇書籍 -> 書評欄 -> “寫書評，獲時長獎勵‘輸入框 -> 寫書評。
        
            5. 
    
          
    
          
        四個入口分別代表四種場景：
    
          
    
            
        
          • 
            入口一為領讀人直接發表文章提供便利；
        
            • 
        
          • 
            入口二是方便內容發布者對于自己的書評進行編輯管理；
        
            • 
        
          • 
            入口三提供閱讀中隨時記錄想法，書評素材的方式；
        
            • 
        
          • 
            入口四的獎勵文案鼓勵大家加入寫書評，加入閱讀，且為閱讀者提供參考。
        
            • 
    
          
    
          
        業務邏輯： 
    
          
「網易蝸牛閱讀」和「微信讀書」的寫書評功能分析 
    
          
        小結： 
    
          
    
          
        通過業務邏輯的分析可以看到，「網易蝸牛平臺」，“書評功能”，書評發布方以及書評閱讀方四方形成一個完整的循環，首先平臺通過優秀領讀人的引進，為閱讀方提供內容，并與之互動；再通過激勵引導，由PGC帶動UGC，讓閱讀方成為發布方，讓用戶生產內容，并提供申請領讀人的渠道；然后發布的內容再次與其他閱讀方互動，形成一個完整的循環生態系統。
    
          
    
          
        五、功能點對比 
    
          
「網易蝸牛閱讀」和「微信讀書」的寫書評功能分析 
    
          
        小結： 
    
          
    
          
        相同點：通過閱讀中，書本詳情頁進入；輸入文字，輸入標題，添加筆記/標注，插入書籍；字體，副標題，符號，私密發布，分享功能。（基本功能） 
    
          
    
          
        不同點： 
    
          
    
            
        
          • 
            「網易蝸牛讀書」：標題的必要性、添加圖片、多本書籍插入；多樣化的字體排版選項、PC編輯、保存到草稿箱、獎勵、撤銷功能。（專業化需求較強） 
        
            • 
        
          • 
            「微信讀書」：添加表情；引用、星級評分。（較為注重簡單，直接，有趣） 
        
            • 
    
          
    
          
        六．總結 
    
          
    
          
        抄不抄？ 
    
          
    
          
        不抄，如果發現UGC內容越來越多，以及專業化需求提高，可以考慮借鑒「網易蝸牛讀書」中寫書評的多樣化編輯功能去完善寫想法功能。
    
          
    
          
        原因： 
    
          
    
          
        （1）產品定位 
    
          
    
          
        主打特色可以看出產品定位，以及發展方向的不同。兩者同時對于領讀這一模塊下了很大的功夫，但玩法不同，「網易蝸牛讀書」通過專業領讀人（內容分享 & 引流導購）發布的專業書評，去引導用戶閱讀，降低用戶的防備心，所以寫作門檻較高。
    
          
    
          
        而「微信讀書」則無此需求，以好友作為切入點，通過好友在看的書，進行熟人引讀，把用戶防備心降到，能讓用戶無成本接受，但同樣容易導致內容參差不齊。
    
          
    
          
        （2）社交屬性 
    
          
    
          
        「網易蝸牛讀書」以PGC為主，專業領讀帶動社群發展，看書評人與書法發布方本身可能是粉絲關系，也可能無任何關系。而「微信讀書」以UGC位置，好友之間的想法碰撞占到大多數。
    
          
    
          
        （3）用戶驅動方式 
    
          
    
          
        「網易蝸牛讀書」以其特色時長閱讀，以及興趣導向，領讀人粉絲引進為主。而「微信讀書」則有很大部分基于好友之間的競爭關系，通過虛榮心驅動。
    
          
    
          
        所以對于「微信讀書」來說，暫時不需要花較大成本引入專業的PGC內容，性價比不高，與產品定位契合度不高。
    
          
    
          
        本文由 @大明 原創發布于人人都是產品經理。未經許可，禁止轉載
    
          
    
          
        題圖來自Unsplash，基于CC0協議
    
          
    
          
        
          
            
          
                藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
            
          
            
          
                
          
          
            
          
        
          
    
          

          
            
          
              
                評論(0)
                瀏覽(3562)
              
                          
          
          
          
                      
          
            
            
          適合做后臺的UI匯總，懂程序不懂UI的你還在煩惱怎么美化后臺界面
          
            
          
               博博                                            
          
            
          
    適合做后臺的UI匯總，懂程序不懂UI的你還在煩惱怎么美化后臺界面

          

          
    年輕時的碼云 2018-06-15 18:39:08

          

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

          

          
    
          
        
          
            
          
                算是比較全的合集，送給大家，資源獲取在文末（有驚喜哦），這次福利很大，趕快關注哦（資源限時開放....）！
            
          
        
          
        
          
            適合做后臺的UI匯總，懂程序不懂UI的你還在煩惱怎么美化后臺界面 
        
          
        
          
            1，layui/ layuiAdmin
        
          
        
          
            layui（諧音：類UI) 是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。layui 首個版本發布于2016年金秋，她區別于那些基于 MVVM 底層的 UI 框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是為服務端程序員量身定做，你無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。
        
          
        
          
            大家有機會多支持閑心。。。。
        
          
        
          
            不過后臺UI是要授權的哦
        
          
        
          
            適合做后臺的UI匯總，懂程序不懂UI的你還在煩惱怎么美化后臺界面 
        
          
        
          
        
          
            適合做后臺的UI匯總，懂程序不懂UI的你還在煩惱怎么美化后臺界面 
        
          
        
          
            2，dwz富客戶端框架 - jUI
        
          
        
          
            DWZ富客戶端框架(jQuery RIA framework)，是中國人自己開發的基于jQuery實現的Ajax RIA開源框架。 DWZ富客戶端框架設計目標是簡單實用、擴展方便、快速開發、RIA思路、輕量級。
        
          
        
          
            比較成熟，應用比較廣泛，官網有整合的應用可以借鑒
        
          
        
            
            
          • 
                DWZ框架 + ThinkPHP 實現小組工作日志系統
            
            • 
            
          • 
                dwz4j企業級Java Web快速開發框架(Hibernate+Spring+Struts2) + jUI整合應用
            
            • 
            
          • 
                dwz4j企業級Java Web快速開發框架(Mybatis + SpringMVC) + jUI整合應用
            
            • 
            
          • 
                ThinkPHP + jUI整合應用
            
            • 
            
          • 
                Zend Framework + jUI整合應用
            
            • 
            
          • 
                YII + jUI整合應用
            
            • 
        
          
        
          
        
          
            適合做后臺的UI匯總，懂程序不懂UI的你還在煩惱怎么美化后臺界面 
        
          
        
          
            3，B-JUI 前端管理框架
        
          
        
          
            B-JUI客戶端框架(Best jQuery UI)，是基于Bootstrap樣式及jQuery庫實現的Ajax RIA開源框架。
        
          
        
          
            B-JUI客戶端框架擴展方便、簡單易用，很多情況下只要熟悉HTML語法，使用HTML屬性就可以輕松用Ajax開發項目。對于javascript不太熟悉的程序員是非常方便的，他們只需要關注后端業務邏輯的實現就行了，前端頁面上只需要簡單的寫點HTML代碼。
        
          
        
          
            本框架基于Bootstrap前端樣式及jQuery庫開發，提供豐富的各類組件及UI，封裝有多種組件，及相關的Ajax請求調用，并且都以jQuery標準插件的方式組合在一起，所以非常方便進行二次開發或再擴展。
        
          
        
          
            兼容性： 
        
          
        
            
            
          • 
                IE8.0+, Chrome[最佳], Firefox, Safari。（IE8 未詳細測試，估計問題不大，但一些CSS3的效果就不要想了，如圓角、動畫什么的）
            
            • 
            
          • 
                本框架不適用于需要兼容IE6、7的開發者或使用者。
            
            • 
            
          • 
                PS. 未考慮兼容IE6和IE7，一是因為Bootstrap3.2不支持，二是因為目前主流系統已是WIN7(IE8+)，三是帶WebKit內核的瀏覽器大量出現，如360瀏覽器、搜狗瀏覽器、百度瀏覽器等。
            
            • 
        
          
        
          
        
          
            適合做后臺的UI匯總，懂程序不懂UI的你還在煩惱怎么美化后臺界面 
        
          
        
          
            H+ 后臺主題UI框架
        
          
        
          
            H+是一個完全響應式，基于Bootstrap3.3.6版本開發的扁平化主題，她采用了主流的左右兩欄式布局，使用了Html5+CSS3等現代技術，她提供了諸多的強大的可以重新組合的UI組件，并集成了的jQuery版本(v2.1.4)，當然，也集成了很多功能強大，用途廣泛的jQuery插件，她可以用于所有的Web應用程序，如網站管理后臺，網站會員中心，CMS，CRM，OA等等，當然，您也可以對她進行深度定制，以做出更強系統。
        
          
        
          
            提醒：是收費的
        
          
        
          
        
          
            適合做后臺的UI匯總，懂程序不懂UI的你還在煩惱怎么美化后臺界面 
        
          
        
          
            H-ui.admin 
        
          
        
          
            H-ui.admin是用H-ui前端框架開發的輕量級網站后臺模版 采用源生html語言，完全免費，簡單靈活，兼容性好 讓您快速搭建中小型網站后臺，拿來即用。
        
          
        
          
        
          
            適合做后臺的UI匯總，懂程序不懂UI的你還在煩惱怎么美化后臺界面 
        
          
        
          
            jQuery MiniUI_快速Web開發
        
          
        
          
            jQuery MiniUI - 專業WebUI控件庫。
        
          
        
          
            它能縮短開發時間，減少代碼量，使開發者更專注于業務和服務端，輕松實現界面開發，帶來絕佳的用戶體驗。
        
          
        
          
            jQuery MiniUI致力降低企業應用的開發成本，豐富的UI控件、高度的穩定性、強大的擴展能力和平滑的版本升級能力，可滿足大部分業務場景需求。
        
          
        
          
            缺點：收費的！
        
          
        
          
        
          
            適合做后臺的UI匯總，懂程序不懂UI的你還在煩惱怎么美化后臺界面 
        
          
        
          
            請輸入描述
        
          
        
          
            EasyUI
        
          
        
          
            easyui是一種基于jQuery的用戶界面插件集合。
        
          
        
          
            easyui為創建現代化，互動，JavaScript應用程序，提供必要的功能。
        
          
        
          
            使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。
        
          
        
          
            easyui是個完美支持HTML5網頁的完整框架。
        
          
        
          
            easyui節省您網頁開發的時間和規模。
        
          
        
          
            easyui很簡單但功能強大的。
        
          
        
            
            
          • 
                大家百度去官網下載即可
            
            • 
        
          
        
          
        
          
            適合做后臺的UI匯總，懂程序不懂UI的你還在煩惱怎么美化后臺界面 
        
          
        
          
            TOP-JUI 
        
          
        
          
            b-jui的作者基于easyui開的的，比easy調用簡單，很不錯的UI，可惜收費，不過不算太貴
        
          
        
          
            TopJUI基于版EasyUI構建，在使用TopJUI的過程中，除了可以使用TopJUI提供的組件功能外，你還可以根據實際情況調用EasyUI的原生組件功能，滿足各種復雜的業務功能需求開發
        
          
        
          
        
          
            Amaze UI 后臺管理模板
        
          
        
          
            Amaze UI 以移動優先（Mobile first）為理念，從小屏逐步擴展到大屏，最終實現所有屏幕適配，適應移動互聯潮流。
        
          
        
          
            組件豐富，模塊化Amaze UI 含近 20 個 CSS 組件、20 余 JS 組件，更有多個包含不同主題的 Web 組件，可快速構建界面出色、體驗優秀的跨屏頁面，大幅提升開發效率。
        
          
        
          
            不過這個模板現成的東西比較少，復雜功能還需要自己去完善
        
          
        
          
        
          
            適合做后臺的UI匯總，懂程序不懂UI的你還在煩惱怎么美化后臺界面 
        
          
        
          
        
          
            LigerUI 
        
          
        
            
            
          • 
                使用簡單，輕量級
            
            • 
            
          • 
                控件實用性強，功能覆蓋面大，可以解決大部分企業信息應用的設計場景
            
            • 
            
          • 
                快速開發，使用LigerUI可以比傳統開發減少極大的代碼量
            
            • 
            
          • 
                易擴展，包括默認參數、表單/表格編輯器、多語言支持等等
            
            • 
            
          • 
                支持Java、.NET、PHP等web服務端
            
            • 
            
          • 
                支持 IE6+、Chrome、FireFox等瀏覽器
            
            • 
            
          • 
                開源，源碼框架層次簡單易懂。
            
            • 
        
          
        
          
        
          
            適合做后臺的UI匯總，懂程序不懂UI的你還在煩惱怎么美化后臺界面 
        
          
        
          
            win10-UI
        
          
        
          
            Win10-UI是一款win10風格的后臺UI框架。它使用了豐富的win10桌面元素，包括桌面圖標、窗口化子頁面管理、開始菜單、動態小磁貼等組件，兼容主流現代瀏覽器及移動端的屏幕尺寸，適合快速開發后臺管理系統的前端界面。
        
          
        
          
            風格不一樣，還是挺不錯的
        
          
        
          
        
          
            國外還有很多 bootstrap 后臺UI
        
          
        
          
            Ace Admin，Metronic等等
        
          
        
          
        
          
            今天小編就分享到這里
        
          
        
          
            評論回復相關需求，小編會第一時間私信您 
        
          
        
          
            或者私信回復“后臺UI”，自動獲取資料，都是小編的血汗哦，本資源只開放一段時間，趕快獲取哦（是私信不是評論哦，評論無法自動回復） 
        
          
        
          
            如果你是初級程序員可以研究別人的代碼提高技術，如果你喜歡搞網盟或者外包，可以讓你快速建站，還等什么趕快關注吧，我們會持續輸出相關資源
        
          
        
          
        
          
            資源來自互聯網 僅供學習研究之用，不得用于商業，請在24小時內刪除！
        
          
        
          
            版權歸原作者及其公司所有，如果你喜歡，請購買正版。
        
          
        
          
            
          
                
          
                    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
                
          
                
          
                    
          
          
                
          
            
          
        
          
    
          

          
            
          
              
                評論(0)
                瀏覽(6114)
              
                          
          
          
          
              
          

  

          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



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