首頁

插畫在UI設計中的運用

藍藍設計的小編

插畫在UI設計中的運用到處可見，比如：App引導頁、Banner廣告、H5宣傳頁、App啟動頁、loading頁、404頁、支付狀態(tài)頁、各大電商平臺的雙十一、雙十二節(jié)日廣告等等。UI插畫在設計中增加情感，使表達更加清晰、貼切、符合場景，讓設計更具說服力。

本文用三步教你打造扁平插畫，除了非常實用的教程，文中談到的一些思考更是能給大家?guī)碓S多幫助。

評論(0) 瀏覽(3216)

網(wǎng)頁的轉發(fā)與重定向

seo達人

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

在web開發(fā)中，轉發(fā)與重定向有很大的區(qū)別。

直觀看來，轉發(fā)不會發(fā)生URL址的變換，而重定向則會發(fā)生URL的改變。

這僅僅只是一種表象。HttpServlet中的request對象和response對象是在用戶請求網(wǎng)頁時由服務器根據(jù)瀏覽器傳過來的參數(shù)封裝生成的。一旦從瀏覽器請求過來，服務器響應回去那么request和response的也就到了生命的終點了。

當使用轉發(fā)的時候，瀏覽器僅僅請求一次但是服務器端可能經歷了多次的跳轉。服務器端執(zhí)行時發(fā)生了轉發(fā)那么服務器就停止正在執(zhí)行的任務，去指定轉發(fā)給定地址的任務。

而使用重定向的話，瀏覽器則會項服務器發(fā)生多次請求。在服務器端執(zhí)行代碼的時候，發(fā)現(xiàn)發(fā)生了重定向，那么它就會通知瀏覽器，去訪問另一個URL。瀏覽器就會向被發(fā)送的URL請求資源。

看一段代碼： 

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>login</title> </head> <body> <form action="myServlet" method="post"> name :<input type="text" name="username"/><br/> <input type="submit" value="submit"/> </form> </body> </html>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    •

這是一段jsp代碼，當點擊提交的時候，會把表單提交給myServlet。

界面長這樣： 
這里寫圖片描述 

public class MyServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = (String)request.getParameter("username");
        request.setAttribute("welcome", "welcome!!!");
        RequestDispatcher rd = request.getRequestDispatcher("welcome.jsp");
        rd.forward(request,response);
    }
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    •

這是MySerlet，當用戶點擊提交表單，服務器就會調用MyServlet的doPost方法，在這個方法里面進行的是頁面轉發(fā)。 

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>welcome</title> </head> <body> <%=request.getParameter("username")%> <br/> <%=request.getAttribute("welcome") %> </body> </html>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    •

這是welcome.jsp的代碼。

提交結果為： 
這里寫圖片描述 
當點擊提交按鈕后后我們可以看一下網(wǎng)絡的請求過程。 
這里寫圖片描述

可以發(fā)現(xiàn)瀏覽器只向服務器發(fā)送了一個請求。

接下來看一下重定向。

如果把MyServlet的代碼改一下。 

public class MyServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = (String)request.getParameter("username");
        request.setAttribute("welcome", "welcome!!!"); //      RequestDispatcher rd = request.getRequestDispatcher("welcome.jsp"); //      rd.forward(request,response); response.sendRedirect("welcome.jsp");
    }
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    •

可以看到結果為： 
這里寫圖片描述

而且瀏覽器項服務器發(fā)送了兩次請求： 
這里寫圖片描述

從上面的結果可以看出重定向后，因為是發(fā)起的另一個請求因此welcom頁面中的內容都是null。而轉發(fā)則由于是同一個request對象和response對象因此既能獲得瀏覽器請求的參數(shù)，還能拿到request總放入的屬性值。

其實從代碼也可以看出來，sendRedirect()方法是HttpServletResponse對象的響應方法，既然調用了響應對象的方法，那么就表明整個請求結束了，服務器端項客戶端返回執(zhí)行結果。而getRequestDispatcher方法是request對象的方法，表明依舊在請求因此不會立即向瀏覽器返回結果，而是繼續(xù)執(zhí)行其轉發(fā)的任務。

有一點需要說明的時，不論forward方法還是sendRedirect方法中傳的URL需要注意，如果以“\”開頭那么，就表示這個URL是現(xiàn)對于servlet容器根的請求，即localhost:8080,如果沒有以“\”開頭，那么表明這個請求地址是相對于當前的請求URL來尋址的。 

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>login</title> </head> <body> <!--這里改成了絕對地址  --> <form action="/myServlet" method="post"> name :<input type="text" name="username"/><br/> <input type="submit" value="submit"/> </form> </body> </html>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    •

當我再次點擊提交的時候： 
這里寫圖片描述

不以”\”開頭的請求地址為： 
這里寫圖片描述

轉發(fā)模型為： 
這里寫圖片描述

重定向模型為：

這里寫圖片描述

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

評論(0) 瀏覽(2865)

設計師必須掌握的交互知識

資深UI設計者

交互設計是什么？
交互設計 Interaction Design 也被成為IXD。交互設計建立起了人與計算機便捷溝通的通道，它的目標是創(chuàng)造可用性和用戶體驗俱佳的產品。作為UI設計師，我們在工作之中經常會對接交互設計師和產品經理，他們具有豐富的交互知識和經驗。那是不是我們作為UI設計師，就只需要專心做好視覺層面的工作而不需要了解交互設計了呢？當然不是，在視覺設計層面更多地考慮布局和交互原則才可以讓我們的界面更友好，視覺設計師是交互設計中非常重要的角色。
用戶體驗
在工作中經常聽到UED（用戶體驗設計）和UCD（以用戶為中心的設計），可見互聯(lián)網(wǎng)行業(yè)非常重視用戶體驗，而用戶體驗絕不僅僅是要樣子好看。有些設計師只關注視覺層面，認為產品戰(zhàn)略等用戶體驗維度和自己的設計無關，那么就會和產品經理等角色處于不同的世界了。“他們?yōu)槭裁匆疫@么改？”、“為什么這里文字要淺一點？”有時不理解對方的思考角度就會造成爭執(zhí)。用戶體驗（User Experience）是用戶使用產品的心理和感受，用戶體驗體現(xiàn)了產品設計以人為本的設計精神。其實早在互聯(lián)網(wǎng)出現(xiàn)之前就有“顧客先點雞就先有雞”、“顧客就是上帝”這種說法，并且西方很多大公司如施樂、聯(lián)合利華等大公司早在互聯(lián)網(wǎng)行業(yè)出現(xiàn)之前就已經開始進行研究用戶體驗了，可見用戶體驗對所有產品是多么的重要。但是讓人摸不著頭腦的是，用戶體驗有時非常地主觀：因為用戶體驗背后影響用戶的因素有人的喜好、情感、印象、心理反應等，有些人明明有摩拜卻要走很遠找OFO，也有人只吃肯德基而不吃麥當勞。這些選擇并不是優(yōu)勝劣汰，而是有背后的原因的。要想讓我們的產品被人喜歡，我們需要研究用戶。
Image title
用戶研究七種方法
但用戶可能是幾百萬人呢！我們面對這樣抽象的群體然后告訴自己要以他們?yōu)橹行脑O計這多么抽象啊。這么多用戶甚至有時用戶自己的聲音也是矛盾的。我們到底怎么樣了解用戶的心聲呢？
用戶畫像
根據(jù)產品的調性和用戶群體，用戶研究團隊可以設計出一個用戶的模型，這種研究的方式被稱為用戶畫像。用戶畫像是由帶有特征的標簽組成的，通過這個標簽我們可以更好地理解誰在使用我們的產品。用戶畫像建立后，每個功能可以完成自己的用戶故事：用戶在什么場景下需要這個功能。這樣，我們所設計的功能就會更接近用戶實際的需要。比如我們現(xiàn)在要設計一個女裝購物應用，那么我們可以做這個用戶畫像：小美，在北京國貿CBD上班，21歲，收入8000，喜歡淘寶購物和電視購物。使用我們產品的目的是為了尋找正品時尚大牌服裝進行網(wǎng)購。小美因為剛畢業(yè)所以一方面喜歡大牌一方面又資金短缺（啟發(fā)：我們的產品是不是要解決這兩個痛點？）小美是時尚OL，審美很高，不喜歡俗氣的設計。（啟發(fā)：界面設計是否考慮不要使用粉粉嫩嫩的顏色而使用大牌的黑白色？）?？?，即使小美并不真實存在，但是她指引了我們的產品設計。接下來，我們還可以給小美增加一個頭像，在做設計時我們想象這個人就是真實存在的用戶，她會對我們的設計有什么看法。當我們完成用戶畫像之后，還可以接著設計用戶故事：小美經常需要在工作場合穿符合工作氣質的衣服，也需要在約會時有晚禮服之類的服裝，可是小美的收入有限，她眼光較高但是對價格過高的服裝無法承擔，她使用我們的APP就是為了尋找正品且價格適中的服裝。那么，小美在哪里用我們的APP呢？這就要為小美繼續(xù)設計一個用戶使用場景了：小美在開會時可能會打開看看、在地鐵里也會瀏覽、在清晨打開衣柜時也會瀏覽?；緛碚f是碎片時間，而且是有著裝需求時。（啟發(fā)：我們是不是需要把字號調大以適應地鐵里顛簸的閱讀環(huán)境？我們是不是需要設計省流量模式免得剛剛畢業(yè)的小美花一筆巨大的流量資費？）
Image title
用戶畫像
用戶訪談
邀約用戶來回答產品的相關問題，并記錄作出后續(xù)分析。用戶訪談有三種形式：結構式訪談（根據(jù)之前寫好的問題結構）、半結構式訪談（一半根據(jù)問題一半討論）、開放式訪談（較為深入地和用戶交流，雙方都有主動權來探討）。用戶訪談設置時要注意：用戶不可以是互聯(lián)網(wǎng)從業(yè)的專業(yè)人員、不可以提出誘導性問題、不要使用專業(yè)術語。用戶訪談適合產品開發(fā)的全部過程。
問卷調查
可分為紙質調查問卷、網(wǎng)絡問卷調查。依據(jù)產品列出需要了解的問題，制成文檔讓用戶回答。問卷調查是一種成本比較低的用戶調查方法。問卷調查適合產品策劃初期對目標人群的投放，另外注意一個問題最好收集10個問卷，也就是如果你有10個問題那么至少要收集100個問卷才是有效的。要知道不是所有人都愿意耐心地填寫問卷，很可能敷衍了事的回答會擾亂我們的判斷。
焦點小組
焦點小組一般有6-12人組成，由一名專業(yè)人士主持，依照訪談提綱引導小組成員各抒己見，并記錄分析。并且在焦點小組的房間里會有一扇單向玻璃窗，用戶是看不到里面有誰的。而在里面坐著的通常是開發(fā)團隊，他們可以清晰地看到用戶是如何吐槽他們的產品的，但是他們沒有權利直接和用戶進行解釋。焦點小組需要特殊的房間和設備，主持人也需要訓練有素，焦點小組特別能夠分析出用戶在沒有我們說明的情況下如何使用我們的產品和對產品的不滿。
可用性測試
通過篩選讓不同用戶群來對產品進行操作，同時觀察人員在旁邊觀察并記錄，可用性測試的要求是用戶不可以是互聯(lián)網(wǎng)從業(yè)者而應該是真實產品的用戶群體。但是可用性測試一般要有一個可用的軟件版本或者原型供人測試才可以，在軟件開發(fā)的前期不適合用這個方法。
眼動測試
使用特殊的設備眼動儀來追蹤用戶使用產品時眼睛聚焦在哪里，盲區(qū)是哪里。比如一個網(wǎng)站通過眼動測試可以知道用戶的視覺會自動屏蔽網(wǎng)站的常見廣告位置，這時如果希望提高廣告的點擊，就需要把廣告位放置于用戶聚焦時間較長的位置。眼動測試的設備比較專業(yè)，通常在小公司較難開展。
用戶反饋和大數(shù)據(jù)分析
根據(jù)市場提供的反饋和數(shù)據(jù)得出客觀的判斷和合理的推測。用戶反饋也是用戶研究的一個重點，用戶反饋主要是用戶通過產品的反饋入口主動向開發(fā)者提出的意見。
有了這些方法，我們就能更好地了解用戶和接近用戶了。但是要注意，用戶研究也是有陷阱的。比如：填寫問卷和參與調研的用戶可能并不是核心用戶；提交用戶反饋的用戶之外可能有更多沉默的用戶等。總之用戶研究是一個必要的手段，但是仍然需要產品團隊來對產品的方向做出決斷。
用戶如何使用產品
使用場景
剛才我們介紹了用戶使用的場景是根據(jù)產品的功能和平臺決定的。電腦的使用場景是正襟危坐，手持鼠標。而移動端則是隨時隨地使用，我們的用戶可能在地鐵里、在廁所里、在吃飯時、在上課中怕老師看到把手機藏在桌洞里、在工作中領導巡視后偷偷瞄、在輾轉反側睡不著的時候沒有開燈地瀏覽等。這時我們要為用戶考慮，如果他們在使用我們產品的各種場景中有什么需要，是不是需要省流量、是不是需要調整字號、是不是需要過濾藍光、是不是需要護眼模式、是不是不方便看視頻、是不是需要緩存視頻、是不是界面目前單手不太友好、是不是掃二維碼時需要個手電功能、是不是需要語音提醒、是不是需要清除訪問記錄。一個不考慮用戶使用場景的產品一定是會遭到吐槽的。很久之前我聽同事在吃飯時抱怨過“大爺?shù)?，也不搞個提示，早晨在地鐵里用4G看流量以為是在家用WIFI，結果看了一集《甄嬛傳》花了80塊錢”、“哎？你是不是早晨開會時玩游戲了？你的比分都給我們推送了哈哈哈”。
Image title
我的產品中的用戶使用場景表格
操作手勢
網(wǎng)頁設計所處的電腦端目前主要還是依靠鼠標點擊來操作。鼠標點擊的最小單位甚至可以是一像素。而移動端不太一樣，移動端設備中我們使用手指來操作界面。一般來說，手指點觸區(qū)域最小尺寸為7×7 mm，拇指最小尺寸為9×9 mm。也就是在我們@2x設計中為88px（或44pt）。這個神奇地88PX在移動端應用很廣泛：很多表單單項的高度是88ox、導航欄高度也是88px等等。那您可能會說，也不對吧，有些界面上的圖標看上去沒有88px啊。是的，但是那只是視覺，我們可以通過增加圖標點擊區(qū)域的方式（比如給60像素大小的圖標左右增加22像素的透明區(qū)域）來讓圖標更好點擊。千萬在設計時不要把操作區(qū)域放得特別近，可以把所有點擊區(qū)域用88px標記看是否有重疊的情況，避免點擊一個圖標時誤點另一個圖標。除了點擊區(qū)域，移動端還可以利用各種手勢來進行各種操作的設計。主要的手勢有：
Image title
單點觸碰（Tap）：點擊用來選擇一個元素，類似鼠標的左鍵，是最常用的手勢。
拖曳（Drag）：點擊某個元素然后拖拽進行移動，類似現(xiàn)實生活中移動物體的感覺。
快速拖曳（Flick）速度很快的拖曳操作。
滑動（Swipe）：水平或垂直方向的滑動，比如翻閱相冊和電子書翻閱的手勢。
雙擊（Double-Click）：快速點擊一個物體，通常會在放大、縮小操作中使用。
捏（Pinch）：兩根手指頭向內捏，捏的動作會使物體變得更小，通常在縮小操作中使用。網(wǎng)易新聞客戶端中正文頁面即可通過捏的動作來縮小字號。
伸展（Stretch）：兩根手指向外推，現(xiàn)實中這種操作會使物體向外拉伸，元素可能會變得更大，通常會在放大操作中使用。網(wǎng)易新聞客戶端中正文頁面可以通過伸展放大字號。
長按（Touch and hold）：手指點擊并按住會激發(fā)另一個操作。比如朋友圈的相機圖標長按可只發(fā)文字。但是注意，長按不是一個常態(tài)操作，所以一般不太建議用戶進行該操作。但長按操作又是有需要的，所以會把刪除、只發(fā)文字狀態(tài)等操作隱藏其中。
除了用戶使用場景、點擊區(qū)域、手勢，那么還有一個影響我們設計的使用情況，就是用戶怎么拿手機很重要。用戶可以：單手拿手機、雙手拿手機、直向拿手機、橫向拿手機。我們需要考慮這些可能發(fā)生的特征進行手勢互動的規(guī)劃與設計。比如OFO為了讓單手（說不定是左手還是右手）操作方便，主要按鈕在下方并且做的很大，左右手都可以輕松點擊。而微信的很多按鈕也都是大長條，方便左右手的觸發(fā)。橫屏使用場景一般是游戲、視頻等，所以一般的APP并不支持橫屏操作（微信、支付寶、微博均不支持橫屏操作），
Image title
格式塔：我們如何認知？
我們發(fā)現(xiàn)有些用戶在使用設計好的界面時找不到一些重要的功能按鈕?！捌婀郑窒砉δ懿痪驮诟喟粹o里面嗎？”、“用戶怎么連這個也找不到啊”你也許會說。我們要來了解一下用戶是如何認知我們設計好的界面的。在初高中考試的時候您一定見過完形填空這種格式吧，“格式塔”源自德語“Gestalt”，意即“整體”、“完形”的意思。格式塔心理學認為，我們在觀察的時候會自動腦補出一些邏輯和含義來，會讓觀察對象變成一個完整的、整體的、常見的形狀。
＂研表究明，漢字的序順并不定一能影閱響讀，比如當你完看這句話后之，才發(fā)這現(xiàn)里的字全是都亂的。＂研究格式塔心理學對我們做互聯(lián)網(wǎng)產品和設計有什么用呢？掌握格式塔的理論我們就可以讓用戶按照我們安排的“劇本”來交互和操作界面了。我們可以讓用戶比較容易地根據(jù)固定位置找到提交按鈕、我們也可以讓用戶不經過太多思考在殺毒軟件中點擊殺毒按鈕等。格式塔心理學對于我們做好表現(xiàn)層是非常有利的。格式塔原理主要有格式塔五大律和格式塔三大記憶律兩個知識點。
接近律 law of proximity
格式塔心理學認為，人們認知事物的時候，會依靠它們的距離來判斷它們之間的關系。兩個元素越近就說明它們之間關系更強。但是接近也是有對比的，在復雜的設計中，我們要一邊考慮它們之間內部的邏輯關系一邊來排版。
Image title
A組和B組因為接近律而產生不同地閱讀順序
Image title
距離更近的信息暗示了他們有內在的邏輯關系
相似律law of similarity
認知事物時，刺激要素（比如大小、色彩、形狀等要素）相似的元素我們傾向于把它們聯(lián)合在一起或者認為它們是一個種類。比如，我們能輕易的分辨出撥號頁面中撥號鍵和按鍵群的區(qū)別。
Image title
相似的元素暗示了他們屬于一個種類
Image title
類似外形的單元會被我們人腦默認為同一屬類
閉合律law of closure
就算沒有外形的約束，我們也會自動把圖形腦補完全。比如半個形狀或者有缺口的形狀我們不會認為是一條線，而是一個完整的形狀。閉合是指一種完形的認知規(guī)律。
Image title
左邊的圖中我們會認為是圓形有缺口而不是一條曲線
右邊的圖形中我們會認為是圓形被三條線截斷了而不是四個圖形
Image title
界面設計中露出一半內容，閉合律讓我們感知右邊還隱藏著更多內容
連續(xù)律law of continuity
在知覺過程中人們往往傾向于使知覺對象的直線繼續(xù)成為直線，使曲線繼續(xù)成為曲線，也就是視覺的慣性。利用連續(xù)律我們可以讓用戶操作界面時不經過思考就點擊一個固定的位置。
Image title
深諳連續(xù)律的流氓軟件
成員特性律law of membership character
如果我們有很多同樣的按鈕，如何讓某個更重要的按鈕突出但是仍然讓用戶感知還是按鈕呢？那就要用到成員特性律了。成員特性律賦予了集體中某一個元素特殊的一些刺激元素從而突出它。
Image title
獨特的外形暗示了它與別的元素有不同的功能
Image title
撥號頁面中撥號鍵與微博發(fā)布微博圖標都與其他按鈕不同
記憶律：我們如何記憶？
接著格式塔五大律還有專門研究用戶記憶的格式塔記憶律。格式塔心理學家沃爾夫對遺忘問題所作的經典性研究得出了格式塔的三大記憶律。沃爾夫實驗時要求實驗體觀看樣本圖形并記住它們，然后在不同的時間里根據(jù)記憶把它們畫出來。結果發(fā)現(xiàn)實驗體在不同的間隔時間畫出來的圖像都有不同。有時再現(xiàn)的圖畫比原來的圖畫更簡單更有規(guī)則，有時原來圖畫中顯著的細節(jié)在再現(xiàn)時被更加突出了。還有的比原來的圖像更像某些別的我們都很熟悉的圖案了。沃爾夫把這三種記憶規(guī)律稱之為格式塔三大記憶律：“水平化”、“尖銳化”、“常態(tài)化”。
Image title哪個圖形才是正確的？（圖片來源：網(wǎng)絡）
水平化leveling
水平化是指在記憶中我們趨向于減少知覺圖形小的不規(guī)則部分使其對稱；或趨向于減少知覺圖形中的具體細節(jié)。
尖銳化sharpening
尖銳化是在記憶中與水平化過程伴隨而行的。尖銳化是指在記憶中，人們往往強調知覺圖形的某些特征而忽視其它具體細節(jié)的過程。在有些心理學家看來，人類記憶的特征之一，就是客體中最明顯的特征在再現(xiàn)過程中往往被夸大了。
常態(tài)化normalizing
常態(tài)化是指人們在記憶中，往往根據(jù)自己已有的記憶痕跡對知覺圖形加以修改，即一般會趨向于按照自己認為它似乎應該是什么樣子來加以修改的。
Image title
情感化設計是什么？
了解格式塔會讓我們把界面做得符合用戶的心理預期，讓用戶能夠明顯地找到他應該找到的操作。可是用戶好像還是不開心，因為用戶覺得界面不好看。您是不是也會陷入這樣的矛盾：可用性重要還是美感更重要？怎么樣能夠讓我們設計的界面又好用還漂亮呢？情感化設計由唐納德·A·諾曼博士提出，指的是設計中情感在所處于的重要地位以及如何讓用戶把情感投射在產品上來解決可用性與美感的矛盾。情感化設計是在抓住用戶注意、誘發(fā)情緒反應以提高執(zhí)行行為的可能性的設計。比如紅色且巨大的購買按鈕能夠無意識地抓住用戶的注意、可愛萌萌的卡通可以緩解用戶網(wǎng)絡不好時的焦慮等等。情感化設計有三個水平，它們是遞進關系，分別是：本能水平（重視設計外形）、行為水平設計（重視使用的樂趣和效率）、反思水平設計（重視自我形象、個人滿意、記憶）。
Image title
本能水平
我們都是視覺動物，對外形的觀察和理解是出于我們本能的。本能水平的設計就是刺激用戶的感官體驗，讓別人注意到我們的設計。這個階段的設計會更加關注外形的視覺效果。比如各大電商網(wǎng)站的專題頁面設計，更加注重抓眼球和外觀的刺激。
行為水平
行為水平是功能性產品需要注重的。一個產品是否達到了行為水平，要看它是否能有效地完成任務，是否是一種有樂趣的操作體驗。優(yōu)秀行為水平設計的四個方面：功能，易懂性，可用性和物理感覺。比如好用的記事本APP等。
反思水平
反思水平的設計與用戶長期感受有關，這種水平的設計建立了品牌感和用戶的情感投射。反思水平設計是產品和用戶之間情感的紐帶，通過互動給用戶自我形象、滿意度、記憶等體驗，讓用戶形成對品牌的認知，培養(yǎng)對品牌的忠誠度。馬洛斯理論把人的需求分成生理需求、安全需求、社交需求、尊重需求和自我實現(xiàn)需求五個層次。我認為反思水平的設計就是提供給用戶歸屬感、尊重、自我實現(xiàn)。比如Google每逢節(jié)日就會有一些符合節(jié)日化的設計、網(wǎng)易嚴選的空狀態(tài)也會有品牌感的體現(xiàn)等。
Image title
淘寶空狀態(tài)中的情感化設計
情感化設計的表達
Image title
畫面 畫面是情感化設計的重點，讓錯誤頁面或者空狀態(tài)都成為一幅可愛的插畫。
應景 讓用戶在我們的產品中體驗到一些和真實世界一樣的氛圍變化。
游戲感 沒有人喜歡做任務。試著讓用戶完成的任務變成游戲吧。比如每次登陸加金幣，有足夠的金幣就可以獲得什么稱號。
沖突 沖突非常能夠勾起人的情緒，營造一個競爭或者對抗的氛圍，讓用戶感覺自己置身在一個比賽或者格斗中一樣。
講故事 給產品和無聊的圖像一些故事內容，畢竟沒有人討厭講故事。
隱喻 用一些大家理解，隨處可見的事物表達一些無趣、生澀的概念。
互動 給用戶和其他用戶多制造互動機會，比如排行榜、推薦等，不要讓用戶感覺孤獨。
交互八原則
當我們了解了產品五要素（產品設計的維度問題）、格式塔心理學（用戶如何認知的問題）、情感化設計（如何讓用戶滿意的問題）后，我還要給您介紹一大堆地交互原則。這些交互原則會幫助我們設計出更好用的界面，當然也可以幫助我們講出這樣設計的原因。不拿出一些理論怎么能夠讓別人信服你的設計，對不對？
費茨定律（Fitts’Law）
費茨定律指的是：光標到達一個目標的時間，與當前光標所在的位置和目標位置的距離（D）和目標大?。⊿）有關。它的數(shù)學公式是：時間 T = a + b log2(D/S+1)。這個定律是由保羅.菲茨博士（Paul M. Fitts）提出的所以得名。菲茨定律在很多領域都得到了應用，特別是在互聯(lián)網(wǎng)設計中尤為深遠。我們利用費茨定律估算用戶移動光標到鏈接或者按鈕所需的時間，時間越短越。比如有一個按鈕在左下角，我們的操作可以細分為兩個階段：第一個階段大范圍移動到左下方向，然后再做微調到達這個按鈕之上。所以這個時間受按鈕和鏈接所在位置與按鈕和鏈接大小影響，也就是說我們在做設計時要考慮光標默認會放在哪里、我們的鏈接按鈕是不是太小了。
Image title
費茨定律說明距離越短、目標大小越大，那么光標到達目標越快
Image title
費茨定律在網(wǎng)頁設計中的使用
Image title
OFO和蘋果音樂APP都將按鈕放置手指最容易點擊的區(qū)域并且按鈕足夠大
?？硕桑℉ick’s Law）
希克定律是指一個人面臨的選擇（n）越多，所需要作出決定的時間（T）就越長。它的數(shù)學公式是：反應時間 T=a+b log2（n）。在我們的設計中如果給用戶的選擇更多，那么用戶所需要做出決定的時間就越長。比如我們給出用戶菜單-子菜單-選項，那么用戶可能會很糾結；如果我們簡化成菜單-選項，就會減少用戶做選擇的時間。
Image title
用戶反應時間和選擇數(shù)量的關系
Image title
我們應該減少用戶的選擇
7±2法則
讓我們先玩?zhèn)€游戲，請記憶下面的文字，一分鐘后移開視線：
掙 多 久 可 貓 風 師 裊 崩 六 酒 望
現(xiàn)在閉上眼睛想一下剛才的文字您能回憶幾個？大概是五個到九個之間。1956年美國科學家米勒對人類短時記憶能力進行了研究，他注意到年輕人的記憶廣度大約為5到9個單位之間，就是7±2法則。這個法則對我們做界面設計的啟迪就是如果希望用戶記住導航區(qū)域的內容或者一個路徑的順序，那么數(shù)量應該控制在七個左右，比如蘋果和站酷網(wǎng)站的導航個數(shù)。另外，移動端底部Tab區(qū)域最多也是五個，而頁面中的八大金剛圖標也是八個。
Image title
蘋果、站酷、Dribbble等網(wǎng)站導航數(shù)量全部是7±2
泰思勒定律（Tesler’s Law）
這個定律是說產品固有的復雜性存在一個臨界點，超過了這個點過程就不能再簡化了。我們只能將這種復雜性轉移。比如我們如果發(fā)現(xiàn)頁面的功能是必須的，但當前的頁面信息過載，那么就需要將次要的功能收起或者轉移。
Image title
Dribbble網(wǎng)站導航將更多功能收起在一個表示更多的圖標內
防錯原則
一個表單是需要填寫完畢后方可提交的。但是用戶有時會漏填或者忘記填寫，這是用戶點擊提交會怎么樣？很可能有些選項會被清空（比如密碼選項基于安全考慮會清空cookies）那么用戶還得重新填寫。這時解決辦法是在用戶沒填寫完之前把按鈕設置一個看起來不能點擊的樣式，用戶想提交時彈窗：您還有內容沒有填寫完哦，然后把用戶定位在沒填寫完的項目，讓那個表單高亮。（是不是真的做到以用戶為中心啦？）再比如推特只允許用戶填寫140個字，但用戶一寫爽了往往會超出140個字那怎么辦？解決辦法是給他在旁邊倒數(shù)還能寫幾個字?？?，這些都是我們?yōu)榱朔乐褂脩舨僮鞒霈F(xiàn)錯誤所做的努力，防錯設計就是要減少錯誤操作所帶來的災難。錯誤的提示當然需要設計師的設計了。可是也許您不知道有些錯誤提示含糊，用戶并不知道到底錯的是哪里，下一步該怎么辦。比如僅僅登錄功能就可能會有用戶名錯誤、密碼錯誤、網(wǎng)絡超時、連續(xù)三次輸入密碼錯誤、用戶名為空等不同的錯誤，而有些產品僅僅給出“出錯了”，那么用戶當然會不知所措了。正向的例子比如一次我在登錄Google Mail時輸錯了密碼，它提示“密碼輸入錯誤，提示：您在1個月前改過密碼”。
Image title
BOO！APP輸入密碼時卡通會蒙住眼睛，輸錯時也會有提示
奧卡姆的剃刀法則（Occam’s Razor）
奧卡姆的剃須刀法則主要就是說我們做產品時功能上不可以太繁瑣，應該保證簡潔和工具化。比如產品中為用戶提供了收藏功能是否就不需要喜歡了？提供了喜歡是否不需要點贊了？一定保證功能上的克制。
Image title
QQ將更多功能收起到了頭像和加號圖標中
防呆原則
有一個著名的交互書籍叫作《Dont make me think》，翻譯過來就是不要讓我思考。這句話一直在我做設計時響起：不要認為用戶是專家！不要認為用戶是專家！有時我們會覺得，點擊漢堡包圖標當然就是菜單?。∵@個按鈕長按不就會調出XX功能了嘛。但是我們忘記了普通用戶可能并不理解什么是漢堡包圖標、什么是抽屜式導航、什么是長按、雙指滑動。更何況普通用戶并不會研究我們的APP，在他們眼中我們的產品只是眾多工具中的一個，我們何德何能認為自己的產品是值得用戶花時間學習的？一定要把交互和設計做得簡單，并且讓用戶在別的地方“學習”過。每個頁面強調一個重要的功能而不要讓用戶做選擇題。這些都是有效防呆的好方法。防呆和不要讓我思考都講的是我們的設計要自然而然。
Image title
運動APP KEEP 的頁面中總有一個按鈕是突出的
防止不耐煩原則
用戶是很容易不耐煩的，你還記得你多少次看著視頻加載條罵人嗎？如果我們需要用戶等待載入信息，一定要給一個有情感化的設計提示，避免用戶產生焦慮。 比如很多游戲（比如決戰(zhàn)平安京、王者榮耀等）加載時都會出現(xiàn)主角跑步的小動畫，美團等APP下拉刷新時也會有幾幀的動畫來安慰用戶。動畫要好于蘋果默認提供給開發(fā)的“轉菊花”，因為卡通形象更有親和力。但是好像還不夠，用戶需要掌控感，“哎？它一直加載，是不是死機了？”為了防止用戶沒有掌控感，我們可以為用戶設計加載條或者加載提示。加載狀態(tài)條很遺憾很多都是假的甚至是重復的，原因是其實要判斷加載了多少M的素材的代碼更占資源！我們本來想安慰用戶等待加載的時間竟然會變得更長，那當然不行啦。于是很多時候我們會做一個假的加載狀態(tài)條來安撫用戶，我想您一定看過反復加載的加載條吧！加載條下的文案其實也是可以變得非常有情感化設計感受的，比如通常是：加載場景資源、加載素材這樣的文案，但是有些APP需要很長加載時間時會給出這樣的文案：導演正在準備、女主角準備化妝了、攝像師打開了燈光。是不是更加好玩啦？
Image title
美團和網(wǎng)易嚴選的加載動畫
總結
交互知識其實關鍵還要在應用和分析。一方面，我們可以在工作中積累經驗，不斷地思考如何和同事配合一起研究提高產品在使用時的體驗；另一方面，我們也要經常積累一些產品使用時發(fā)現(xiàn)的交互。建議大家平時可以收集你覺得不錯的情感化設計或者微交互，比如發(fā)現(xiàn)餓了么在下雨天送貨時會有電閃雷鳴和雨滴的設計；OFO和滴滴打車在不同節(jié)日也會把地圖找車里的圖標換成節(jié)日相關的圖標；BOO！APP在輸入密碼時小怪獸會捂住眼睛；WPS在晚上寫作時（沒錯就是現(xiàn)在）會提示你開啟過濾藍光的護眼模式等等。一個好的設計師一定是懂得交互的設計師，也應該是非常細心的設計師，也應該是懂得為用戶著想的設計師。

評論(0) 瀏覽(2726)

JavaScript自己整理的基礎-01

seo達人

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

1.JavaScript 簡介：

JavaScript是互聯(lián)網(wǎng)上最流行的腳本語言，所有現(xiàn)代的HTML都使用JavaScript。既然是腳本語言，那么它的特點就有一下三種：

    （1）弱類型；

    （2）解釋型語言（不需要編譯）；

    （3）逐行執(zhí)行，一行代碼錯誤，其后的代碼塊都不會繼續(xù)執(zhí)行；

    （4）<script>標簽可直接嵌入到HTML文件中，位置是任意的，通常放在被修飾內容下面或者head標簽中，但寫成單獨的js文件有利于結構和行為的分離

2.JavaScript 內容（附圖）：

    

       其中ECMAScript是JavaScript的核心；

       DOM是文檔對象模型（使用js操作網(wǎng)頁）；

       BOM是瀏覽器對象模型（使用js操作瀏覽器）

3.JavaScript 信息的輸出：

    （1）alert( )方法：以提示框的形式在頁面輸出 ，例;

[javascript] view plain copy
  1. <script>  
  2.     alert("hello,javascript")  
  3. </script>  

    （2）console.log( )方法：在控制臺輸出信息，例：

[javascript] view plain copy
  1. console.log("hello,javascript")  

    （3）document.write( )：將內容直接寫在HTML頁面中，例：

[javascript] view plain copy
  1. document.write("hello,javascript")  

4.JavaScript 變量：

    與 Java不同，ECMAScript 中的變量無特定的類型，定義變量時只用 var 運算符，可以將它初始化為任意值，變量的初始化格式：var 變量名 = 變量值；例：

[javascript] view plain copy
  1. var a = "hello";  
  2. var b = 123;  

    如果要定義多個變量，那么可以用將多個變量寫在一行，用逗號進行分隔；例：

[javascript] view plain copy
  1. var a = "你好",  
  2.     b = 123,  
  3.     c = "hello";  

    變量名字的變量規(guī)則：    

    （1）由字母、數(shù)字、下劃線、$符號構成

    （2）不可以以數(shù)字開頭，不建議以下劃線開頭；

    （3） 嚴格區(qū)分大小寫；

    （4）不可以是關鍵字和保留字

5.JavaScript 數(shù)據(jù)類型：

    JavaScript可以分為原始數(shù)據(jù)類型，引用數(shù)據(jù)類型兩種：

    （1）原始數(shù)據(jù)類型：Number，String，Boolean，undefined，null

    Number：數(shù)值型，就是數(shù)字，包含正數(shù)、負數(shù)、整數(shù)、小數(shù)、0、NaN、Infinity（正無窮）、-Infinity（負無窮）；

    注意：NaN：not  a  number的縮寫，表示該值不是一個數(shù)值（也屬于Number）

    String：字符串：用雙引號""或單引號''包起來的0個或多個字符，如果引號中什么也沒有，那么這個字符串被稱為空字符串

    Boolean：布爾型：包含true：表示真（成立）和false：表示假（不成立）兩個值

    undefined：表示變量未定義，或變量被定義出來，但是沒有被賦值

    null：表示一個變量沒有指向任何一片存儲空間，即變量存在，但是里面是空的，類似于Undefined

    （小提示：在Chrome瀏覽器控制臺輸出時，會發(fā)現(xiàn)Number類型為深藍色，String為黑色，Boolean為淺藍色，undefined和null都為淺灰色）

    （2）引用數(shù)據(jù)類型：

    Object（對象），Array（數(shù)組），Date（日期），RegExp（正則）。。等等

    （3）如何查看一個變量的數(shù)據(jù)類型（typeof 運算符）：        

             數(shù)值型數(shù)據(jù)：返回值為number   

[javascript] view plain copy
  1. console.log(typeof 123)   //輸出number  

             字符串型數(shù)據(jù)：返回值為string

[javascript] view plain copy
  1. console.log(typeof "你好")  //輸出string  

             布爾型數(shù)據(jù)：返回值為boolean

[javascript] view plain copy
  1. console.log(typeof true/false)    //輸出boolean  

             Undefined：返回值為undefined

[javascript] view plain copy
  1. console.log(typeof undefined)   //輸出undefined  

             Null：返回值為Object（歷史遺留問題，說明null也是一個對象）

[javascript] view plain copy
  1. console.log(typeof null)     //輸出object  

             NaN：返回值為number

[javascript] view plain copy
  1. console.log(typeof NaN)    //輸出number  

6.JavaScript 數(shù)據(jù)類型的轉換：

    （1）在使用加法（+）運算符時，任何數(shù)據(jù)與字符串類型數(shù)據(jù)相加都為字符串類型數(shù)據(jù)；

[javascript] view plain copy
  1. console.log("你好" + 123)    //輸出"你好123"  

        注（簡單理解）： 在JavaScript 中空字符串""轉換為false，非空字符串轉換為true（除“0”，“1”外）；

                false轉換為 0 或“0”，true轉換為 1 或“1”；

                做邏輯判斷的時候，null，undefined，""(空字符串)，0，NaN都默認為false；

                ==在比較的時候可以轉換數(shù)據(jù)類型，===是嚴格比較，只要類型不匹配就返回false；

                    其實 == 的比較確實是轉換成字符串來比較但，但是在布爾型轉換為字符串之前，要先轉換成 Number

[javascript] view plain copy
  1. console.log("123" == true)    //輸出false  
  2. console.log("1" == true)     //輸出true  
  3. console.log("" == true)     //輸出false  
  4. console.log(1 == true)     //輸出true  
  5.   
  6. console.log("" == false)    //輸出true  
  7. console.log('123' == false)   //輸出fasle  
  8. console.log('0' == false)    //輸出true  
  9. console.log(0 == false)    //輸出true  
  10.   
  11. console.log('1' == 1)     //輸出true  
  12. console.log('0' == 0)     //輸出true  
  13. console.log(-true)     //輸出-1  

（2）parseInt：將字符串轉換成整數(shù)（只識別字符串中的數(shù)值）：

        注：會忽略字符串中的前后空格（當數(shù)值后的空格后面還有數(shù)值時，將不會再識別）；

               能夠正確識別正負號，即保留正負號；

               在轉換時，遇到非數(shù)值型的字符就會停止轉換；

               如果字符串的第一個字符是非數(shù)值型的，那么轉換的結果為NaN；

[javascript] view plain copy
  1. console.log(parseInt("123"))    //輸出123  
  2. console.log(parseInt(" 1 2"))    //只會輸出1  
  3. console.log(parseInt(-123))     //輸出-123  
  4. console.log(parseInt("hello"))    //輸出NaN  
  5. console.log(parseInt(true))       //輸出NaN  
  6. console.log(parseInt("123hello"))    //輸出123，后面非數(shù)值型不會識別  
  7. console.log(parseInt(" 1 "))     //輸出1，忽略空格  

（3）parseFloat：將字符串轉換成小數(shù)（識別小數(shù)點，注意事項同上）

[javascript] view plain copy
  1. console.log(parseFloat("123.55"))    //輸出123.55  
  2. console.log(parseFloat(".1hello"))    //輸出0.1  

（4）Number：將其它類型的數(shù)據(jù)轉換成數(shù)值型，注意被轉換的數(shù)據(jù)必須是純數(shù)值構成，否則無法轉換，其它注意事項同上

[javascript] view plain copy
  1. console.log(Number(true))   //1  
  2. console.log(Number(false))    //0  
  3. console.log(Number(null))    //0  
  4. console.log(Number("123hello"))    //NaN  
  5. console.log(Number("12.22"))    //12.22  
  6. console.log(Number(undefined))    //NaN  

（5）頁面中的信息框：

        alert（），彈出個提示框，只有確定；

[javascript] view plain copy
  1. window.alert("今天天氣很好")  

        confirm（），彈出個確認框，有確定和取消；

[javascript] view plain copy
  1. window.confirm("今天心情也很好")  

        prompt（），彈出個輸入框，可以輸入內容；

[javascript] view plain copy
  1. window.prompt("password","請輸入密碼")  

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

評論(0) 瀏覽(3212)

想要用好留白？這篇文章幫你從頭開始梳理

資深UI設計者

留白對于設計的價值，已經得到相當廣泛的認可了。留白的存在讓其中的元素得到更好的凸顯，有了留白才有強調，它們從來都是一體兩面，焦不離孟。今天的文章，我們來聊一下留白的使用技巧和最佳實踐。

設計中的留白

留白本身通常還被稱為負空間，它們可以在網(wǎng)頁布局中各個元素之間，還可以在特定 UI元素的內部。留白賦予了頁面呼吸感，而它本身并不一定非得是白色的空白區(qū)域。留白界定了 UI元素本身的空間邊界，而借助格式塔原理，它還可以創(chuàng)造視覺上的聯(lián)系。

因此，留白是一種重要的、功能強大的設計元素，它對于創(chuàng)造積極的用戶體驗有著重大的影響。 交互設計基金會的 Mads Soegaard 是這么說的：“留白就像一塊畫布，它是將不同設計元素融合到一起的背景，又讓這些元素通過對比襯托脫穎而出。”

在諸多的平面設計領域當中，負空間都發(fā)揮著無法替代的作用。無論是設計LOGO、平面插畫還是字體的時候，留白的使用關系著整個設計的表現(xiàn)力。就像下面的博客插圖，負空間的運用讓整個畫面顯得更加生動。

無論是在網(wǎng)站設計還是 UI設計當中，設計師都需要借助留白來提升界面和導航的可用性。布局元素周圍的留白或者負空間通常被稱為宏空間，而它們之間的留白和內部的負空間，則被稱為微空間。

理清概念

留白和負空間雖然是兩個不同的說法，但是兩者表述的是同一個東西。之所以有兩個不同的說法，是因為兩個名稱是來源于不同的兩個領域。

留白是來自排版印刷設計領域，因為頁面的背景通常是白色的，而文本和圖片周圍的區(qū)域也多是白色的空白，因此有留白之說。而負空間這個說法是源自于攝影，吸引人注意的視覺主體被稱為正空間，而相應的留白就成了負空間。

需要注意的是，留白并不一定非得是白色的，可以是其他的顏色，甚至是其他的圖案。

留白為何如此重要

當你進入一個擠滿各種物品和人的房間，到處都是東西和人，找到特定的東西肯定是一個非常艱難的事情。相應的，在干凈的地面上，擺放的唯一的物品肯定是非常醒目的，你不需要花費任何力氣就能注意到它。這也是留白發(fā)揮作用的原理所在。

雖然客戶可能會要求設計師在頁面上盡可能多地塞滿各種元素和功能，這樣可以節(jié)省空間。但是，實際上這是一個最常見的錯誤的做法：用戶并不需要在網(wǎng)頁上一次完成全部的工作。更重要的是，太多的元素會分散用戶的注意力，用戶會難以找到真正想要的信息。正如同 Aarron Walter 所說：“你想讓用戶注意到所有事情的時候，他們會感知不到任何東西的。”

對于設計而言，負空間的價值是非常高的，我們隨便總結一下，都有很多：

  • 它讓頁面的可閱讀性得到了提升；
  • 它增強了視覺層次；
  • 它使得元素和元素之間的關系更加清晰，更容易被感知，而不需要借助表格、框架這樣的附加手段；
  • 它為頁面增加了呼吸感，而不至于導致混亂；
  • 它讓用戶更容易將注意力集中到核心元素上，減少分心；
  • 它提升了頁面的風格，讓設計更加優(yōu)雅。

看看這個城市指南的著陸頁吧，負空間在背景中扮演了非常重要的角色，更重要的是，圖片中的元素和前景的文本標題之間有所互動，這也同樣是借助負空間的方式來呈現(xiàn)，呈現(xiàn)出一種和諧而有趣的設計效果。

影響留白的核心因素

合理的使用留白能夠讓界面的用戶體驗提升不少。

可讀性和清晰度：如果和元素之間沒有足夠的留白，會變得難以閱讀，用戶需要花費額外的精力來進行分辨。不合理的留白設計會讓用戶感到緊張，想要讓用戶感到自然，需要讓留白恰到好處，令布局顯得足夠自然。如同音樂中的韻律感一樣，設計中的韻律感是通過留白的變化來呈現(xiàn)的。

品牌化：如果你熟悉LOGO的設計，你會發(fā)現(xiàn)設計師借助元素周圍的留白來營造氛圍提升感覺，留白的功能性在品牌設計上有著非常顯著的體現(xiàn)。打破留白的設計規(guī)則，對于整體是有害的。

強化屬性：留白的運用能夠強化屬性，比如新聞博客平臺會更加密集地呈現(xiàn)信息，甚至會借助動態(tài)的數(shù)據(jù)呈現(xiàn)和較為致密的布局來營造一種資訊的密集感和平臺的調性。

視覺層次：富有層次感的留白設計能夠創(chuàng)造出視覺層次，并且讓用戶注意到特定的元素和信息。

留白對于視覺的影響主要體現(xiàn)在以下的幾個方面：

  • 文案和內容
  • 圖形元素
  • 導航
  • 視覺識別

接下來看看幾個案例。這是 The Big Landscape 的首頁，沒有表單，沒有視覺框架，僅僅借助留白來平衡所有的設計元素。設計師構建出了清晰的層次結構，并且允許用戶一瞥即可看清所有的內容塊，這樣的設計看起來是清晰而有條不紊的，而且充滿呼吸感。白色的背景和簡約的布局讓整個界面充滿了實體雜志的質感， 而這也相對視覺化地告知用戶這是一個在線的數(shù)字雜志。

另外一個是移動端的APP Upper。整個應用的留白都是使用黑色來進行填充的，在視覺上，黑色的留白和核心的視覺元素構成了鮮明的對比，從而起到了凸顯的作用。整個設計留白充足，用戶不會錯過關鍵的部分，也不會分心，布局的組織性極強，可讀性也都毫無問題。設計師確保了整體的優(yōu)雅性，也讓布局更加具有美學特征。

需要考慮的問題和隱患

1. 術語紊淆

和不熟悉設計術語的客戶進行溝通的時候，應該盡量讓他們明白負空間/留白的含義和功能。對于非設計從業(yè)者而言，很多時候確實不能很快接受「屏幕中需要留下更多的留白」這樣的概念。對于黑色或者深色的背景，這類客戶可能會有不好的聯(lián)想，事實上并非如此。在進行足夠深入的溝通之后，盡量將這些關鍵點灌輸給客戶，避免術語和概念上的誤讀。

2. 希望減少留白，增加頁面和內容

其實這個是幾乎所有的設計領域都會面臨的問題?？蛻魰Ｍ覂仍O計師在一面墻擺滿柜子而不是給兩個剩余的地方留白，而建筑設計師也常常需要建筑周圍有足夠的留白，確保呼吸感，提供更好的服務。設計師需要和客戶溝通，了解哪些部分更重要，哪些部分次重要，而哪些內容是可有可無的，分清層級，進行篩選。留白有助于營造更加協(xié)調的布局，讓信息和功能的可用性更強。

3. 優(yōu)先級不夠高

如果深思熟慮的信息架構和界面并不匹配，留白并不是萬能的解決方案。你需要在考慮界面設計之前，就確定用戶獲取信息的方式，然后再進行設計。在確定風格之前，先要梳理清楚用戶流程，否則，再好的負空間設計也不足以發(fā)揮出它應有的功能。

評論(0) 瀏覽(2746)

UI設計改稿經驗總結

博博


UI大課堂 2018-02-01 00:00:39

提到這個話題有兩層不同的討論方向，在工作中對公司項目進行設計改版和利用業(yè)余時間進行自由主題的改版練習。這次我們主要以后者為出發(fā)點進行討論，其目的是為了給部分設計師在利用自己業(yè)余時間上面探索出一個新的方向。在工作項目中進行UI設計改版分為團隊發(fā)起和自我發(fā)起，這個我們下一次一起來討論。

UI設計師的自我提升來源于多方面的綜合體現(xiàn)，工作項目中的實戰(zhàn)經驗、團隊協(xié)作的互補學習、項目沉淀與反思、碎片化閱讀的查漏補缺、業(yè)余時間的自我驅動、閱讀帶來的知識沉淀等等。如何充分利用自己的業(yè)余時間是被很多初入行業(yè)的設計師所忽略的，一晃三五年過去了，卻發(fā)現(xiàn)自己找不到更多的作品用來豐富簡歷，很快便進入了瓶頸期。

面對未來的自己可能會出現(xiàn)這樣的情況，我們一起提前探討一下這個話題，以 UI設計改版為突破口展開我們的話題，希望帶給即將入行和剛入行的設計伙伴兒一個新的方向。

目錄

1、UI改版的目的，從不做無意義的事情；

2、制定時間規(guī)劃，是為了治療懶?。?

3、如何挑選改版產品，再也不是選“美”了；

4、體驗，這是你的第一次深度探尋；

5、功能梳理，理清流程好開工；

6、競品分析，做好知己知彼；

7、素材采集，打開禁錮的思維；

8、體驗，走了一圈才發(fā)現(xiàn)你可以更好；

9、交互設計，實現(xiàn)你心中的更好；

10、設計風格推導，符合產品的設計趨勢運用；

11、界面設計，碎片化積累；

12、審核，尋找導師；

13、調整優(yōu)化，不放過任何一個細節(jié)；

14、包裝，整理設計思路；

15、分享，設計交流。

正文

1、UI改版的目的，從不做無意義的事情

工作中的項目參與對UI設計師的專業(yè)提升是非常重要的，由于很多公司都處于高速發(fā)展的階段，項目的周期很緊張，都希望每個支援板塊能夠具備更高的效率，推進項目更快的完成迭代上線。在設計板塊，很多成熟的平臺也是愿意花費更高的福利待遇引進資深及以上級別的設計師支持項目的運轉，那么設計師的進階之路便是你在職場中穩(wěn)中求進的關鍵。

在真實的場景中，有一部分設計師也存在著以下情況：

  • a. 項目參與度低，沒有更多的機會發(fā)揮自己的專業(yè)；

  • b. 公司產品迭代緩慢或者視覺支持較小，空余時間較多；

  • c. 沒有機會在項目中嘗試一些新的設計語言；

  • d. 自學 UI 中，沒有真實項目能夠發(fā)揮；

  • e. 增強設計效率和產品設計思維等能力。

如果你擁有以上的情況之一，利用自己的業(yè)余時間進行 APP 設計改版將會給你帶來更多的提升空間，不但可以通過練習增強自己的設計效率，也能體驗更加豐富的產品設計。在改版中也能不斷加強一些交互或者產品的思維，可以讓你在以后的工作項目中不局限在視覺層面，具備更多的產品思考，做出更合理的設計。

UI設計改稿經驗總結

2、制定時間規(guī)劃，是為了治療懶病

如果你想要改變現(xiàn)狀，也拿出前所未有的熱度值，那就趁熱打鐵吧，制定一份時間表是必須的，千萬別忽略它的重要性，如果你不按照這個時間計劃去推進，可能這個熱度值將會被懶寶寶不斷地熄滅^_^。

制定時間規(guī)劃不僅可以合理的利用好自己的業(yè)余時間，也能更好的按照這個規(guī)劃表去逐步的推進這次改版項目，把一個大的事項拆分為若干的小事項，每天推進一部分，一次改版設計很快就在不斷的推進中被完成。

APP 改版時間規(guī)劃表大家可根據(jù)自己的習慣設置，表格形式還是簡單的文字記錄都可以，進度把控需要結合自身情況而定，確保其有效性。

UI設計改稿經驗總結

3、如何挑選改版產品，再也不是選“美”了

面對應用商城里面海量的 APP 產品，你是否有點不知所措，如果選擇一個自己從來不玩的 APP，改版的時候對產品的服務模式、功能架構、交互邏輯等都是比較陌生的，需要一定的時間進行學習。如果選擇一些大型的產品，由于其自身的設計團隊就是非常的專業(yè)，你很難從中發(fā)現(xiàn)可以優(yōu)化的點，即使勉強進行改版，也會發(fā)現(xiàn)自己設計得不如原版的好，進而打擊自己的自信心。

通過上面的分析，我們在挑選改版產品的時候，需要結合自身的一些情況先做出一定的預判，然后再去挑選現(xiàn)階段相對比較符合的產品進行改版練習。

a. 挑選自己接觸過的直接產品或者間接產品；

b. 對 APP 里面所提供的產品或者服務比較認可或者沒有一定的排斥感；

c. 挑選無論是視覺層面還是交互層面都有一定優(yōu)化空間的產品，別輕易嘗試精品；

d. 如果身邊有朋友使用過的產品優(yōu)先考慮，因為可以成為你調研數(shù)據(jù)的來源；

e. 選擇陽光積極型的產品，不做傳遞負能量或者違反規(guī)定的產品；

f. 初次嘗試 APP 改版設計，從輕量級的產品入手，可以控制練習時間和自己的駕馭度。

UI設計改稿經驗總結

4、體驗，這是你的第一次深度探尋

當你確定自己改版的 APP 對象以后，我們就開始做一次體驗吧，這是你的第一次深度探尋。體驗情況根據(jù)設計師對該產品的熟悉程度而定，你需要通過不斷的進行操作把自己從小白用戶升級到專家級用戶。

這個過程需要你對產品有一個很深入的了解，不只是熟悉主流程操作邏輯，對一些偏冷門的功能操作也要非常的熟悉，如果是需要注冊使用的產品，一定不要忽略注冊會員以后的體驗。最終達到的級別是你可以向身邊任何一位朋友輕松的進行推薦和演說，能夠通過你的講解讓他輕松地學會使用該產品。

UI設計改稿經驗總結

5、功能梳理，理清流程好開工

當你對改版 APP 進行第一次深度體驗之后，利用思維導圖軟件繪制出整個產品的功能結構圖，思維導圖軟件種類很多，大家自行選擇，我常用的是 MindNode。第一次進行功能梳理無需進行增刪處理，真實還原產品現(xiàn)有功能即可，其目的是整理自家“倉庫”，做到心中有數(shù)。

在進行功能梳理的時候，如果遇到操作復雜的功能需要備注信息，以便自己后期預覽時能夠快速理解其含義。如果是第一次做功能結構圖越詳細越好，這將有助于你充分理解每個功能傳達的含義。

UI設計改稿經驗總結

6、競品分析，做好知己知彼

深度體驗完改版 APP 之后，做了功能結構圖，此時你對所需要改版的 APP 以及這個行業(yè)的產品都有一定的認知，此時你再去體驗直接競品和間接競品必然是以一個專家級用戶的水平去探尋。在體驗過程中需要結合改版產品的功能進行對比，可能第一遍體驗無法很好的進行對比，所以需要至少體驗 3 次以上才能很好的得出對比的結論。

體驗產品時需要注意的幾個維度：

  • a. 不要急于進行總結，先進行至少 3 次以上體驗；

  • b. 先看整體布局再分析局部細節(jié)；

  • c. 重點功能交互形式需要提取出來進行對比；

  • d. 主界面的各版塊布局設計需要進行對比；

  • e. 配色分析，作為改版時的配色優(yōu)化指導；

  • f. 圖標和組件庫的分析，找出細節(jié)的優(yōu)化方向。

進行競品體驗時，盡可能多的找出差異化的設計形式，作為改版 APP 優(yōu)化的指導方向。由于作為 UI 設計師進行 APP 改版練習更多是視覺優(yōu)化為主，交互優(yōu)化為輔，所以我們需要在相同模塊上面找出更多不同的設計樣式，作為視覺優(yōu)化的方向。

如果你自身交互能力較好，也可以以交互優(yōu)化為主，視覺優(yōu)化為輔，這個可以結合自身情況選擇。在進行競品體驗的時候也要根據(jù)優(yōu)化目的的不同，著重的轉移體驗的重心。

UI設計改稿經驗總結

7、素材采集，打開禁錮的思維

通過競品體驗你會總結出改版 APP 各個模塊的差異化，相同的功能模塊各自產品的交互形式、布局樣式、視覺風格都存在各自的差異。此時，你對改版 APP 中的很多設計都一個初步的優(yōu)化清單，你需要再深入一步，因為競品的設計樣式不一定就是值得借鑒的，我們需要尋找更多的靈感，打開自己禁錮的思維。

通過國內外的一些設計平臺、素材網(wǎng)站等我們可以去采集更多的設計樣式作為靈感借鑒，日常的一個采集收藏習慣也就變得尤為重要了，作為一個優(yōu)秀的 UI 設計師，我們需要養(yǎng)成這樣的習慣。個人平時經常訪問的設計平臺有站酷、UI中國、致設計、Dribbble、Behance等，采集收藏靈感會經常用Pinterest和花瓣，都是一些大家經常訪問的平臺，所以不是別人知道你所不知的優(yōu)秀平臺，而是你沒有他的良好習慣。

UI設計改稿經驗總結

8、體驗，走了一圈才發(fā)現(xiàn)你可以更好

采集完一些靈感素材之后，我們又回到體驗改版 APP 的起點，走了一圈之后你會發(fā)現(xiàn)改版 APP 中很多你可以入手優(yōu)化的方向，比起第一次體驗，你會更加有信心能夠做出一個不一樣的設計作品。再次進行產品體驗的時候，你需要帶著腦海中處理相同功能板塊的不同設計表現(xiàn)形式進行思考，尋找出更好的設計表現(xiàn)形式來解決這個功能模塊。

在構思優(yōu)化樣式的時候，可以繪制一些簡單的草圖，以防后期進行交互輸出的時候遺漏靈感細節(jié)。在進行設計優(yōu)化的時候先從靈感庫中尋找較為符合的樣式進行思維嵌套，然后再發(fā)散思維，融入自己原創(chuàng)性的思維，形成自己的原創(chuàng)思路。

UI設計改稿經驗總結

9、交互設計，實現(xiàn)你心中的更好

通過前期的準備工作，我們即將進入重要的設計部分，大家不要忽略前期的準備階段，只有思路成熟且清晰，后面的設計工作才能更加順暢。

作為 UI 設計師最終輸出的必然是高保真的視覺稿，那么交互原型設計是為了快速的把自己的思路展現(xiàn)出來，所以不局限于原型軟件的繪制，哪怕是紙上的草圖繪制也是可行的方案。最終的交互稿是給自己看的，所以能看懂就能達到最終的目的。

如果你考慮后期進行作品包裝展示時，希望能展示出交互思維，那你花點時間適當?shù)膶Φ捅Ｕ娼换ピ瓦M行繪制也是不錯的選擇，也能鍛煉自己原型制作軟件的操作能力^_^。

UI設計改稿經驗總結

10、設計風格推導，符合產品的設計趨勢運用

在開始進入界面視覺設計時，我們需要對整體 APP 設計做風格推導，這將直接關系著最終界面呈現(xiàn)的效果。如果你是一位對行業(yè)趨勢關注的設計師，各種設計趨勢呈現(xiàn)在你腦海中，你需要進行篩選，結合改版產品的屬性選擇合適的設計語言去表達，切不可為了趨勢而犧牲產品定位。

在進行風格確定的時候，顏色的選擇也占據(jù)一定的因素，我們可以選擇改版 APP 現(xiàn)有的主色進行優(yōu)化，也可以進行推翻重選。如果是重新選擇配色方案，我們可以通過情緒版的方式在身邊朋友或者各種群里進行。也可以與競品形成視覺差異化，選擇一些形成對比的配色方案，方式很多，大家根據(jù)自己的條件和思路自行展開。

確定好配色方案之后，我們需要考慮設計的表現(xiàn)形式，無論是何種設計形式都需要符合產品的屬性。比如大標題、大圓角卡片、大投影等設計表現(xiàn)形式會在視覺層面帶來不錯的效果，卻需要考慮信息量的因素，如果本身改版 APP 就屬于信息量很大的產品，在選擇時就要綜合考慮。根據(jù) APP 的風格定位，比如文藝類、娛樂類、兒童類等，那么設計的風格也會對產品風格定位起到一定的影響。

UI設計改稿經驗總結

11、界面設計，碎片化積累

當你打開設計軟件進行界面設計的時候，剩下的就是“滿血復活”的激情，為了能夠充分利用好業(yè)余時間，我們需要把數(shù)十個界面分配到具體的日程中，的利用碎片化的時間進行積累。規(guī)定自己一天完成兩個界面，就要嚴格執(zhí)行，只有這樣你才能具備超強的戰(zhàn)斗力。

提到界面設計很多設計師會糾結在軟件的選擇上面，總會問老司機們你們用什么軟件，其實軟件的選擇并不是問題，它只是一個工具，用的順手即可，現(xiàn)在很多軟件都能帶來最終的目的。隨著很多輕量級的軟件不斷豐富多樣，軟件的操作也更加簡單便捷，只要你充分的利用互聯(lián)網(wǎng)資源，軟件的學習只是熟練度的問題，設計的思路與技巧才是需要更多的學習、研究和總結。

UI設計改稿經驗總結

12、審核，尋找導師

歷盡艱辛你收獲了希望，一套 APP 改版設計作品初步完成，接下來你需要尋找到一位導師，俗話說當局者迷，你自己構思出來的東西需要得到驗證，尋找一位資深的設計老司機給你指點作品，將會給你的成長帶來很大的幫助。他們會站在更高的專業(yè)角度給你指出一些優(yōu)化建議，也能使你的作品更加成熟。

導師在哪里？

  • a. 可以是身邊的同事，別以為導師一定是大神，旁觀者的意見都是具有一定的思考價值；

  • b. 通過一些設計交流群尋求意見，建群的意義其實就是交流設計（可是現(xiàn)在演變?yōu)闀痴勅松?(ㄒoㄒ)/~~）；

  • c. 通過設計平臺尋找那些活躍的老司機，只要是真誠的設計交流，他們都會樂于分享；

  • d. 機緣巧合下加上的大神微信或者QQ，平時要注意不要群發(fā)小廣告去騷擾他們，他們關鍵時候會樂于給你專業(yè)性的指點；

  • e. 相信你能找到更多的方法，尋求幫助。

UI設計改稿經驗總結

13、調整優(yōu)化，不放過任何一個細節(jié)

通過不同形式的意見反饋，我們即將面臨一次調整優(yōu)化，在眾多的反饋意見中，我們也不能盲目的進行修改。我們要做有思考能力的設計師，去分析這些修改意見，遇到意見相左的修改建議要結合自己前期的調研進行把控，因為提意見的人不一定能像你一樣熟悉產品，可能存在一定的主觀性。

選擇性的進行修改，也要保持自己的自信度，適度的自信可以增強你對作品的信任度，我們不能總是質疑自己的能力，只要保持不斷努力學習的心態(tài)，有時候也要相信自己的專業(yè)能力，相信自己就能給作品帶來自信度，你的需求方才能被你的專業(yè)意見所引導。

UI設計改稿經驗總結

14、包裝，整理設計思路

作品包裝總是會被很多設計師所忽略，在進行作品展示的時候也比較隨意，沒有充分利用作品包裝的優(yōu)勢傳達出作品自身的價值。我們將作品展示出來進行交流時，需要通過適當?shù)陌b把作品更好的一面清晰的傳遞給讀者。

在進行作品包裝的時候，可以加入自己的設計思路輔助傳達出作品背后的故事，讓讀者更容易走進你的作品。通過包裝把原本單調的獨立界面進行解剖，利用整體布局、局部提煉、細節(jié)展示、文案描述、思路整理等形式，讓作品呈現(xiàn)效果更加豐富多樣。

作品包裝中一些簡單的設計技巧：

  • a. 作品包裝設計中的版面布局需要舍得，適當加大留白會給版面更強的呼吸感；

  • b. 局部提煉，對界面設計中的一些視覺表現(xiàn)力強的樣式提取出來獨立展示，豐富作品的細節(jié)展示；

  • c. 精心挑選樣機，讓作品展示效果更佳，有時候也可以自己繪制更加簡練的樣機模型；

  • d. 設計組建選擇性展示，增刪挑選的組建讓布局更加整體，視覺效果更加協(xié)調，整體組合形成塊面感；

  • e. 利用對比突出重點，不要使整體布局都處于平面化；

  • f. 裝飾元素的運用，可以利用輔助圖形、短線等進行設計裝飾；

  • g. 加強頭圖設計的視覺表現(xiàn)，提高讀者的注意力。

作品包裝設計分為平臺型作品包裝和作品集包裝，也是需要我們設計師加以重視的一個板塊，以后我們單獨進行這方面的研究分享。

UI設計改稿經驗總結

15、分享，設計交流

此時，你已經完成了這次 APP 改版之旅，恭喜你擊敗了懶寶寶，相信下一次你會具備更強的自我驅動力。完成一次作品你可以選擇封印在冰冷的硬盤，也可以選擇分享給更多的設計朋友，大家互相學習和討論，個人比較傾向于后者。

評論(0) 瀏覽(3314)

MIUI10上手體驗：“蘋果味”十足，操作更加順滑

博博


天極網(wǎng) 2018-06-04 18:18:17

5月31日，小米在發(fā)布會上推出一代操作系統(tǒng)——MIUI10。近日，小編順利通過了MIUI10的內測申請，于是將手里的小米5第一時間更新，一起來看看官方給新系統(tǒng)定義的幾大更新亮點吧。

MIUI10上手體驗：“蘋果味”十足，操作更加順滑

首先，在更新MIUI10內測版之后，老旗艦手機小米5煥然一新，變得流暢許多。此次新系統(tǒng)主要是針對全面屏做的設計，具體表現(xiàn)在狀態(tài)欄和多任務的排版上，UI設計結合了Andrid P和iOS風格，整體比較清新。在點按之后，圖標會變成藍色，開關按鈕采用了翻頁的形式，而且可以容納的數(shù)量也比以前多了。雖然在風格上進行了大量的修改與整合，不過最終還是沒能逃脫“蘋果味”。

MIUI10上手體驗：“蘋果味”十足，操作更加順滑

小編覺得MIUI10最大的變化就是多任務面板，之前的MIUI9、MIUI8等版本均為橫向布局，而此次MIUI10變?yōu)榱丝v向布局，交互方式上有些變化。官方宣稱這是可以在一塊屏幕上看到更多的多任務。其實就是迎合了全面屏的理念，而又不想太過抄襲蘋果的多任務，最終就出現(xiàn)了這樣的產物。說實話，小米5上的MIUI10多任務面板不是很好看，但是使用效果還不錯，多任務左右滑動是關閉，長按就有分屏，鎖定和設置三個按鈕。

MIUI10上手體驗：“蘋果味”十足，操作更加順滑

接下來是本次新增的駕車模式和小愛同學。之前MIUI9也有語音助手，不過稍顯“智障”，并沒有太多實用性。MIUI10上，小愛同學增加了訓練計劃，可也設定提問他要回答的答案，實用性大大增強。駕車模式應該是廣大司機朋友最關注的功能，全新的駕車模式在小愛同學的幫助下，可以做到邊開車邊回復消息，同時還能保證開車的安全性，非常實用。

MIUI10上手體驗：“蘋果味”十足，操作更加順滑

再來說說小編遇到的問題吧，因為是MIUI10內測第一批版本，BUG多也是可以理解的。剛小米5升級MIUI10后，雖然操作確實很順滑，不過頭疼的BUG使得系統(tǒng)整體性沒那么強。有幾個BUG甚至把傳統(tǒng)的16:9手機當成18:9的手機來顯示。需要提升的地方還有很多，比如消息通知會跑到下面來，就像有虛擬的劉海，還有充電的時候電量小圓圈也只能顯示四分之一，還有改不了熱點的名字和密碼。

MIUI10上手體驗：“蘋果味”十足，操作更加順滑

最后總結一下這幾天的使用體驗，MIUI10系統(tǒng)的外觀設計與流暢性自然不必多說，提升蠻大的。最讓小編印象深刻的還是殺后臺情況，3G內存的小米5在MIUI9系統(tǒng)下殺后臺現(xiàn)象非常嚴重。在MIUI10下，這種情況改善了許多，使用時沒有以前那么“虛”，強烈推薦老旗艦手機升級。另外，小編發(fā)現(xiàn)“小愛同學”貫穿在了MIUI10中，許多地方都能見到AI智能的身影，相比MIUI9“聰明”了許多。總的來說，內測版MIUI10的升級非常到位，煥然一新的UI設計以及交互方式，提升顏值的同時也提高了檔次。

評論(0) 瀏覽(2898)

UI按鈕設計發(fā)展史

藍藍設計的小編

當我們在網(wǎng)上購物，提交我們個人信息都需要用到按鈕。網(wǎng)頁UI設計的增長很快，風格似乎也是一個月一變。最近幾年，我們經歷過從文 本鏈接到擬物化設計再到扁平化瀑布流設計。導航是網(wǎng)頁設計中最重要的元素，并且按鈕是最重要的行為工具。

評論(0) 瀏覽(3299)

request中跟路徑有關的api的分析

seo達人

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

           最近重在研究struts的源碼，其中涉及到了request中的幾個api，看了文檔后還是覺得不清楚，所以在自己原來的工程中

測試了一下各個api的具體效果。在這里跟大家分享一下。

            這是我具體測試的代碼：

           這是我servlet配置的路徑：

            以下是訪問這個ProductServlet后控制臺打印的結果：

            從以上我們可以發(fā)現(xiàn)：

    1.getRealPath(....)，這個方法是返回給定資源的磁盤絕對路徑，簡單來說，就是以盤符開頭的路徑

    2.getRequestURI(....)與getRequestURL(....)這個兩個方法，從名字上來說，一個是返回url（統(tǒng)一資源定位器）一個是返回

uri（統(tǒng)一資源標識符，用來唯一的標識一個資源），那么url跟uri有什么區(qū)別呢？比較結果后我們就知道，URL中包含URI，URL是

帶協(xié)議，帶端口號的。

    3.getContextPath(....)這個方法，其實就是用來返回工程名，或者說工程路徑，看結果我們一目了然

    4.getServletPath(.....)這個方法，從結果中，我們可以分析得出，它其實就是在工程目錄下，訪問我們servlet的路徑，或者說

servlet相對于我們工程的路徑，在或者說，它就是我們在配置文件中配置的路徑，但是不包括后面具體的請求資源名

    5.getPathInfo(.....)，這個方法其實就是返回我們具體請求資源的名稱，或者說，相對于我們的servlet而言的請求路徑

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

評論(0) 瀏覽(3033)

如何做好電商類App？來看這份對新版淘寶的設計思考！

資深UI設計者


電商類 App 是日常使用頻次非常高的應用，它們的每一次更新改版不僅是業(yè)務的拓展、用戶需求的滿足，同時也是消費趨勢的引領與跟隨。

近期淘寶 App 的許多頁面都有了較大的改動，在分析淘寶改版的基礎上，通過幾個關鍵頁面的分析對比淘寶、京東、蘇寧易購三大綜合類電商平臺的產品設計，希望此篇文章能讓大家對電商類 App 的產品設計有更深的認識。

一、淘寶改版

前陣子淘寶進行了改版，這次改版循序漸進，并做了較多的 A/B 測試。

1. 主要改版頁面

上圖是淘寶幾個主要改版頁面。從視覺上看，很明顯的大圓角卡片、去線條，整體風格統(tǒng)一輕質化。大圓角卡片追隨了 iOS11 的風格（App Store 中尤為突出），卡片使信息更加聚焦，模塊感更強；圓角卡片本身也比原先的卡片式增加了更多細節(jié)；大圓角卡片親和力高，更加活潑，也符合淘寶人群的定位。

上圖為5個 tab 的頁面，這次統(tǒng)一了頭部的顏色，強調了品牌，統(tǒng)一性方面也得到了提升。

以下是從單個頁面的角度進行改版分析。

2. 個人首頁

△ 舊版圖為除夕的截圖，顏色方面先不討論

新舊版本的對比，可以看出88會員、卡券包優(yōu)先級提高，會員信息更加集中、突出。這也印證了這兩年會員機制的火熱，拉新成本和難度都越來越高的情況下，鞏固老用戶才能帶來更多的價值。

新版的卡片式很突出，去掉了大部分的線條，轉而用塊面來代替線條表達層級關系。

「我的訂單」部分 icon 樣式發(fā)生了變化（7. 7. 2 版），從填充式轉變?yōu)榫€條式，突出了 icon 右上角的數(shù)字，但這一點在測試版本中又改回來了（后面討論）。

88會員和物流這兩塊內容滾動呈現(xiàn)，真正是動效解決問題，從時間軸來解決信息量大而空間局限的問題，同時動態(tài)效果增加了用戶吸引度。

在測試版中，這個頁面主要看到兩個點的變化，一個是 icon 改為原來的填充式，一個是動效滾動的節(jié)奏。

icon 的問題個人猜想是因為體量與重要性、位置的問題，線條式的體量弱于填充式。在「我的淘寶」頁面中，最重要的信息是「我的訂單」，因此需要一定的突出。另外在測試版里，「我的訂單」的上面固定的廣告位放置了旅行青蛙的廣告，此位置的突出性導致其弱化了底下的「我的訂單」，占用了原先「我的訂單」的 C 位，因此測試版考慮到更全的場景（有廣告），從而將 icon 的樣式換回了體量大的填充式。

動效滾動是上面說的88會員和物流，7. 7. 2版本里兩個滾動是同時進行的，而7. 7. 8的測試版中兩個滾動是錯開的。上下同時滾動會讓人有些混亂，會讓人認為這兩塊的信息是相互關聯(lián)的。

3. 店鋪首頁

這一塊做的 A/B 測試。店鋪頁面的改動較大，導航做了較大調整。新版將常用操作和重要功能放到了底部固定；二級導航中的內容讓商家自定義選擇，從而滿足不同店鋪的需求；新版一級二級導航較舊版層級關系明確了許多。

再來說說這次的 A/B 測試，這次的測試時間比較長（從7. 7. 2到目前的7. 8. 2都在，目測到8. 0應該會給出一個結果）。店鋪頁在導航上的大改動，會在一定程度上對已經形成習慣的老用戶造成沖擊，對頁面重新適應和學習，有點類似于前攝抑制（在認知心理學上指之前學習過的材料對保持和回憶以后學習的材料的干擾作用）。新版設計的目的一是方便用戶初期快速學習，二是中后期快速使用。對于中后期的快速使用就需要一段時間的鋪墊來獲得數(shù)據(jù)。該次測試應該是區(qū)分各種不同的用戶，簡單來說測試新用戶、老用戶分別對于新舊版本的學習，以及他們對新版本熟悉之后的使用。

4. 物流詳情

這一塊可以說是樣式上的大改。用可視化來表現(xiàn)包裹正處的位置以及即將進行的操作，增強用戶感知（降低理解難度），進一步提升對商品信息的把控感。比原先僅僅是文字展示而言生動了許多，樣式接近外賣等待中的訂單頁面?？梢暬倘豢梢哉故靖嗟男畔?，但是在用戶非訓練的情況下信息傳遞的速度未必比文字要更快，不同的人對圖形的理解也會有所偏差。不過介于外賣 App 的頁面已經對很多用戶進行了教育，相信這種理解上不會有太大難度。但是依然要在后續(xù)優(yōu)化中逐漸突出信息的重點。

物流詳情頁除了樣式的巨大變化，還有一個特點就是場景化細分，不同的場景做出了差異化。例如僅僅是物流詳情頁，根據(jù)不同的場景：發(fā)貨未攬件 – 已攬件未配送 – 快遞員配送中 – 到達菜鳥驛站/其他快遞點 – 已簽收等，頁面突出的信息均有所區(qū)別。已攬件時突出快遞信息，配送時突出配送員信息等。

從場景細分做差異化，讓用戶獲取當前最需要的信息這件事的出發(fā)點無疑是很好的，但是從上圖中，僅是快遞信息這一類信息，就出現(xiàn)了三種樣式（如上圖），并且位置也不統(tǒng)一。如果用戶是購買了幾件不同店家的商品，這時快遞員打電話來說我是XX快遞的，快遞給你放在了某某地方，這時我想知道這是啥商品的時候，于是我就打開了物流詳情，來找快遞信息，發(fā)現(xiàn)快遞信息居然不在原來的地圖底下了，找了好一會才發(fā)現(xiàn)放到了快遞員下方。這個例子也就是說在非常見場景下獲取某個信息時可能需要付出額外的學習成本。

不過在7. 7. 8的測試版本中，又將快遞信息的樣式減為兩種，算是一種妥協(xié)。本人認為，場景細分出發(fā)點是好的，但在樣式和位置兩點中，最好至少有一點是固定不變的，這樣才不會過多增加用戶的學習成本，也能涵蓋一些小概率場景。

5. 動效

這兩張圖都是店鋪頁面頂部的動效，當用戶向下滑動頁面時，頂部的信息會出現(xiàn)變化，也算是細分場景的一種，通過動效的方式完美過渡，過渡的流暢感會讓用戶對該平臺增加些許好感。

我的淘寶這一頁的動效解決問題在上面有說到，右邊的有好貨頁面，當用戶在滑動頁面時，攻略推薦一欄的圖片有依次展現(xiàn)的效果，吸引眼球，小有驚喜。

總結來看，淘寶改版的設計角度可以總結為：設計追隨目標，品牌、會員突出，追隨設計趨勢，細分場景，可視化展現(xiàn)和流暢動效。另外淘寶對設計、測試的態(tài)度上來說，設計解決實際問題，設計需要驗證，測試要嚴謹。

二、淘寶與其他競品

這里只選了京東和蘇寧易購兩個與淘寶進行了幾個關鍵頁面比較，以下主要從視覺的角度談一下有哪些問題，這里幾乎不牽扯業(yè)務、頁面跳轉等問題。

1. 首頁

淘寶：整體看起來沒有什么硬傷，沒有用卡片風格。

京東：這邊也是繼淘寶改版后不久改版上線。這邊首屏的 icon 這一塊的卡片式生硬，大有為了卡片而卡片既視感，京東秒殺這塊的整齊度不高，也有些左重右輕。「每日逛」這種裝飾性較強的風格也與整體卡片式簡潔風格不符?！笘|家小院」樓層次級標題的顏色跳躍，大有喧賓奪主之感。

蘇寧易購：目前還沒有改版。掌上搶這樓層整齊度不高，和京東類似，同時缺少層次感，部分有漸變部分沒有，非常不統(tǒng)一?！腹鋵嵒荨箻菍右曈X不平衡，而且信息層級很有問題。

2. 搜索結果頁

風格：淘寶這頁用了無框設計，省去了中間的分割線，商品圖片尺寸較大；從左到右，圖片尺寸越來越小，分割線從無到細到粗，整體效果上淘寶和京東效果比易購的好。

標簽：在標簽的處理上，易購的標簽非常強，在頁面上非常突出，喧賓奪主；京東的標簽弱化，與淘寶類似，但完全不同類的標簽樣式相同（秒殺與自營），會讓人覺得有些混亂。

圖文編排：淘寶和京東都沒有硬傷，比較和諧，但易購的圖片和文字大小間距比例不和諧，圖片與線框無論在視覺效果上還是像素上都沒有對齊；易購底部沒有適配 iPhone X。

3. 分類頁

風格：淘寶用了明顯的卡片，去線條；而京東也用了卡片，卡片感微弱，是為了統(tǒng)一性而做；易購仍然是線框區(qū)分，整體區(qū)分效果不佳。

品牌：淘寶和京東在文字的處理上沒有用更多的色彩，而易購的色彩運用得非常多，削弱品牌感，且沒有帶來任何優(yōu)勢。

4. 商品詳情頁

此頁面我僅從節(jié)奏感這一個角度來看，上圖已經標出了每個頁面的節(jié)奏感給我的感受。淘寶整體的節(jié)奏感比較好，輕重緩和；京東和易購在節(jié)奏感上做的都有些問題，重節(jié)奏之間無輕節(jié)奏的調和會缺乏呼吸感。

5. 購物車

風格效果：淘寶沒有用卡片風格；京東用了卡片，導致大量留白，同時沒有帶來任何優(yōu)勢，蘇寧易購整體稍顯擁擠，沒有亮點。

圖文編排：淘寶整體非常和諧；京東圖片均使用了白底，這點很好保持了統(tǒng)一性；京東使用了大量的設計細節(jié)，字號、粗細、字體、顏色等等非常豐富，但整體效果并沒有很理想，稍顯瑣碎與凌亂；蘇寧易購的文字大小與間距處理不和諧而帶來擁擠感。

其他細節(jié)：京東標簽不同于搜索結果頁的弱化，而是非常強化，導致視覺焦點混亂，個別按鈕非常小，操作不便；易購標簽處理上比京東收斂；易購底部 tab 與其他部分沒有區(qū)分，浮框像廣告，效果不佳，數(shù)量修改框的描邊太硬，比例不和諧。

6. 個人首頁

整體風格：淘寶和京東都是明顯的卡片式，蘇寧易購是廣義上的卡片式。

這里主要說一說易購的問題：首屏出現(xiàn)「我的專場」的大片不平衡色塊非常不合適，部分 icon 效果不佳，另外有一些內容上的 bug。

7. 訂單

淘寶和京東的訂單頁個人認為沒有什么硬傷，淘寶有個適配的問題。蘇寧易購的問題比較多，首先是頂部「常購清單」中沒有商品的 bug，然后是圖片與購物車等地方的風格不符，商品之間分割線有時有有時無，間距有問題等等。

三、總結

綜合上面具體頁面的分析可以看出淘寶在 UI 設計上的優(yōu)勢：追隨設計趨勢、統(tǒng)一性、排版和諧等。

關于統(tǒng)一性這一點，可能有人說京東做的更好，因為它幾乎所有頁面都用了卡片風，而淘寶沒有。個人認為，設計風格是次于設計目標的，如果這種設計風格不能很好滿足該頁面的設計目標，建議還是以設計目標為重；如果仍然強制使用該風格的話，會得不償失。淘寶的做法是把卡片這種風格歸類為輕質化風格，除了卡片以外，還有去線條、色塊等等設計語言，因此并非強調一定要使用卡片形式。

評論(0) 瀏覽(3216)

日歷

鏈接

個人資料

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

存檔