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

          首頁

          產品分析方法之:情緒版在設計中的運用

          ui設計分享達人

          視覺設計師可能會花很長時間產出了精致的,高品質的設計,得到的卻是用戶或客戶的一句話:“這不是我想要的!”

          視覺設計師可能會花很長時間產出了精致的,高品質的設計,得到的卻是用戶或客戶的一句話:“這不是我想要的!”一般來說,在沒有實物前,人們并不清楚自己要的是什么。但是在看到成品后,他們可以輕易地判斷是否符合自己的喜好或期望。因此,在為錯誤的設計方向投入過多前,了解用戶對風格的期望和需求,從而確定整個網站或產品的視覺風格是有必要的。  而情緒版可以很好的解決以上問題。




          什么是情緒版?

          情緒版是一種啟發式和探索性的方法,可以對如下問題進行研究:圖像風格(photography style)、色彩(color palettes)、文字排版(typography)、圖案(pattern)以及整體外觀以及感覺。視覺設計和人的情緒緊密相連,不同的設計總是會引發不同的情感。




          情緒版分為:拼貼式情緒版、參考式情緒版和模版式情緒版



          拼貼式情緒版

          直接將可以運用到項目中的圖片素材拼合在一起。下圖是NIKE MECURIAL系列的一個拼貼式情緒版,里面的圖片都是來自官方的海報、圖片和影像,這些素材都能夠直接運用到我們的設計中。


          參考式情緒版

          將與設計主題風格相關或功能類似的真實項目拼接在一起。下圖是一個以多彩和現代視覺風格的情緒版,里面選取的素材都是真實項目的界面。


          模版式情緒版

          靈感圖片素材和概念控件的結合。概念控件是指概念設計中的一些核心組件,它可以是色彩搭配、按鈕、卡片、圖形或者是信息排版等,它們是概念設計的雛形。


          情緒版作為可視化的溝通工具,可以快速地向他人傳達設計師想要表達的整體感覺。


          設計師要幫助用戶發掘其真正需求,情緒版作為一個工具可以很好的幫助了解用戶所希望展現的調性,從而提高生產效率和滿意度。


          對于設計師:是定義視覺風格和指導設計方向的依據;對團隊:在團隊之間傳遞設計靈感與設計思路,從而使想法充分融合,深化設計。


          1.情緒版可以讓客戶參與我們的設計流程中,提高我們的工作效率。客戶的加入,能夠讓我們更好的了解業務本身以及客戶對項目的期待。盡早的讓客戶參與整個設計流程,還能夠避免在錯誤的設計方向上投入過多。

          2.情緒版是設計與客戶溝通的可視化溝通工具,可以減少設計師和客戶之間由于認知不同導致的溝通障礙。



          情緒版的推導過程







          在制作情緒版過程中,原生關鍵詞的作用相當重要:

          獲得原生關鍵詞是情緒版的第一項工作,一般從內部涉眾(相關的產品和設計人員)及外部用戶兩種渠道獲得。

          自涉眾訪談和用戶研究中,可以收集大量的體驗詞樣本。在獲得這些樣本后,可以內部進行討論,通過歸納整理精簡為幾個關鍵詞。

          原生關鍵詞提取好之后,可以在內部使用情緒版,也可以招募用戶來完成。





          01.明確原生關鍵詞


          訪談及用研結果導入產生原生體驗關鍵詞

          原生關鍵詞(Primary keywords)的產生是一個糅合的過程,它需要綜合企業文化、用戶研究成果、品牌/營銷策略,行業特征、目標用戶群、產品的價值定位等因素來界定,通常,這也會是一個商業決定。

          涉及的訪談受眾可以是產品、運營、交互、視覺、用戶等,根據產品是0—1還是改版現有版本設置不同問題,以改版為案例,產品使用的感受、期望產品更新的樣子等。以此得出的關鍵詞,一般是很抽象的詞匯。例如:親切、熟悉、溫度,一般一個產品的關鍵詞不易過多3~5個為佳。




          項目案例(示例)

          某手機銀行是以服務客戶日常金融業務辦理及投資理財需求為主的綜合金融服務APP。面向30-40歲為主要年齡段的中青年用戶群體。目前產品處于成長期向成熟期過渡。








          02.挖掘衍生關鍵詞


          如果僅通過單純對原生關鍵詞的搜索,很容易導致不同參與者提供圖片素材出現同質化的問題。所以,首先頭腦風暴畫出關鍵詞的思維導圖。一方面,合理地引導調研對象發散思路;另一方面,也在過程中深挖原生關鍵詞在他們心中的定義。


          衍生關鍵詞(Derived keywords)是原生關鍵詞的發散和提煉,主要通過部門內部頭腦風暴或用戶訪談得出。


          將所有“衍生關鍵詞”按照三個維度去分類整理。這個過程的目的是幫助項目組成員從用戶的角度去理解“抽象關鍵詞”的“具象詮釋”。所有的關鍵詞可按照以下三個維度分類:


          訪談對象會根據主觀印象以及過往親身經歷給出一些看法或答案,而很多時候并不可以把訪談對象的答案直接作為關鍵詞,我們需要了解為什么,直到覺得用戶的答疑非常清晰具體,然后提煉關鍵詞。


          例如衍生關鍵詞訪談:

          自由發散問題—看到“品質”你想到了什么?

          引導發散問題—如果“品質”是一種顏色,你覺得是什么?為什么?

          如果“品質”是一種食物,你覺得是什么?為什么?

          如果“品質”是……



          衍生關鍵詞的分析—分維詮釋

          根據原生關鍵詞的的定義,從視覺映射、心境映射、物化映射三個維度去理解“抽象關鍵詞”的“具象詮釋”。





          03.搜集圖片素材


          根據“原生關鍵詞”及發散的“衍生關鍵詞”搜集素材,對應視覺映射、心理映射、物化映射三大維度。在素材搜集時具體以「具象」和「抽象」兩個方向搜集。

          1.搜集圖片

          根據已有關鍵詞,搜集具象圖片(具體的實物場景)—風格感受;根據已有的關鍵詞,搜集抽象圖片(包含色彩、質感、圖形等元素)—設計元素。


          2.素材整理

          將收集到的圖片素材,按照衍生關鍵詞進行分類并提取生成情緒版。


          3.邀請用戶參與情緒版創建



          1.主持人需要不斷詢問被訪者,去探究選擇圖片背后的原因:“為什么你會選擇這張圖片?能否和大家分享一下你的想法?”

          2.注意差異的挖掘。注意挖掘被訪者之間的觀點差異,一百個人心中有一百個哈雷姆特,同一張圖片對于不同被訪者可能會有不同的解釋,如果好幾位被訪者同時選擇一張圖片代表他們各自對某個品牌的感覺,注意詢問他們選擇這張圖片的原因是否一樣。

          3.可以呈現給用戶的圖片有限的,因此,在挑選圖片時,需要內部研究和設計人員協同,根據視覺設計所需要考慮的幾個維度結合已有的關鍵詞進行圖片的篩選。一般來說,在將圖片呈現給用戶之前,內部人員已經明確了每一張圖片所代表的意義,在用戶選擇和訪談結束后,兩方面的數據綜合分析才能獲得最終的結果。





          04.創建生成情緒版


          歸納和整理圖片,進行排版組成情緒版,得到設計主題相關的內容。建立幾個統一風格的情緒版,以便更好的捕捉產品相關的感覺,為探索設計方向提供靈感。 




          05.確定視覺設計策略


          綜合情緒版制定風格

          提取圖片主要顏色,明確主色。結合衍生關鍵詞分析結果,將情緒版中高頻物化紋理和材質提取出來。



          1.色彩提取

          通過對色彩的分析發現,高明度低飽和度的色彩搭配,能讓畫面保持豐富的同時顯得干凈和協調,可以達到「」「簡潔」的效果,例如:鄰近色、類似色、低飽和度對比色。


          電子化情緒版對“色彩分析”是比較方便的

          1.圖片在PS中進行高斯模糊或馬賽克處理,使用顏色滴管提取大色塊;2.圖片導入PS中,選擇存儲為Web所用格式-選擇Gif仿色。當然,現在已經有很多用戶配色方案提取的網站和軟件,這樣更事半功倍。


          通過對情緒版中顏色提取并結合品牌色及對當下流行趨勢的把握,確定如下顏色運用:




          2.圖形提取

          通過對圖形分析發現,基本幾何形具有肯定、純粹的特點,可以很好的體現「品質」與「精簡」的特征。例如:方形、圓形等。


          融入圖形符號 強化視覺語言

          圖標使用深色+漸變色的展現,對比突出、品牌屬性統一、信息層級分明。簡約筆挺的線性圖標更符合平臺信息架構清晰,內容易懂的特征。



          圖標設計




          3.字體提取

          通過對字體的研究發現,中文字體端莊勻稱、字體方正。例如:思源宋體、方正宋體等,英文字體線條簡潔、字形嚴謹。例如:Helvetica、Avenir、DIN等,都比較符合「品質」和「簡潔」的特征。

          筆畫有粗細變化,而且一般是橫細豎粗,末端有裝飾部分,給人正式、正規感覺,既可以區分標題與模塊內容的差別,也可以增加產品的差異化。





          4.構成提取

          通過對構成的研究發現,并置型和九宮格型構成比較嚴謹和秩序,滿版型和通欄型構成,視覺傳達直觀而強烈,給人大方、舒展的感受;這與「」的特征是匹配的。






          5.質感提取

          在質感的選擇方面,大多與當下流行風格趨勢相貼近,例如:圓角卡片、彌散投影、漸變、輕擬物、毛玻璃等,可以有效地表達出「精簡」「品質」的情緒感受。





          總結

          情緒版是一種設計方法論,可以指導設計方向,傳遞設計靈感與思路。

          制作情緒版時,首先要明確原生關鍵詞、然后頭腦風暴挖掘衍生關鍵詞,接著搜集相關圖片并提取生成情緒版,另外訪談用戶收集衍生關鍵詞映射,最后通過情緒版和關鍵詞映射來提取視覺風格。

          在項目前期,我們可以通過情緒板來定義產品整體的設計風格和產品主色調,設計過程中,界面排版、圖標的顏色、形狀和設計細節都可以使用情緒板來定義。

          無論我們做什么樣的設計,情緒板都無疑是一個很好的工具,它不僅可以幫助我們明確設計需求,做出更容易被大眾所接受的設計,也可以幫助我們更好地去與領導和其他需求方溝通,向他們傳達設計的價值主張,最終達成共識,提高設計效率。


          再總結一下情緒板的作用:

          首先:它是整個設計項目的寶貴資源;

          其次:它是低成本的設計工具;

          再次:它是有效溝通的保障;

          最后:它是團隊協作的方法。


          轉自:站酷-體驗為王UX

          JSP的刨根問底

          前端達人

          JSP的刨根問底

          • 一.概念
          • 二.原理
          • 三.腳本
          • 四.內置對象
          • 五.注釋
          • 六.編譯指令
          • 七.動作指令


          • 點擊查看原圖


            這篇文章從一個初學者的角度,復習一波JSP。






            一.概念
            Java Server Pages: java服務器端頁面

            可以理解為:一個特殊的頁面,其中既可以指定定義html標簽,又可以定義java代碼
            用于簡化書寫!?。?br /> 二.原理
            本質是一個Servlet

            三.腳本
            定義:Jsp定義java代碼的方式

            <% 代碼 %>:定義的java代碼,在service方法中。service方法中可以定義什么,該腳本中就可以定義什么。
            <%! 代碼 %>:定義的java代碼,在jsp轉換后的java類的成員位置。
            <%= 代碼 %>:定義的java代碼,會輸出到頁面上。輸出語句中可以定義什么,該腳本中就可以定義什么。
            四.內置對象
            對象名 實現接口或繼承類 作用
            PageContext 當前頁面共享數據,還可以獲取其他八個內置對象
            request HttpServletRequest 一次請求訪問的多個資源(轉發)
            session HttpSession 一次會話的多個請求間
            application ServletContext 所有用戶間共享數據
            response HttpServletResponse 響應對象
            page Object 當前頁面(Servlet)的對象 this
            out JspWriter 輸出對象,數據輸出到頁面上
            config ServletConfig Servlet的配置對象
            expection Throwable 異常對象
            五.注釋
            1.html注釋
            <!-- -->:只能注釋html代碼片段
            2.jsp注釋
            <%-- --%>:可以注釋所有

            六.編譯指令
            作用
            用于配置JSP頁面,導入資源文件

            格式
            <%@ 指令名稱 屬性名1=屬性值1 屬性名2=屬性值2 ... %>
            分類
            1.page
            配置JSP頁面的
            1. contentType:等同于response.setContentType()
            *設置響應體的mime類型以及字符集
            * 設置當前jsp頁面的編碼(只能是高級的IDE才能生效,如果使用低級工具,則需要設置pageEncoding屬性設置當前頁面的字符集)
            2.import:導包
            3. errorPage:當前頁面發生異常后,會自動跳轉到指定的錯誤頁面
            4.isErrorPage:標識當前也是是否是錯誤頁面。
            * true:是,可以使用內置對象exception
            * false:否。默認值。不可以使用內置對象exception
            2.include
            頁面包含的。導入頁面的資源文件

             <%@include file="top.jsp"%>
            3.導入資源
            導入資源

             <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
              prefix:前綴,自定義的
            1
            七.動作指令
            作用
            動作指令與編譯指令不間,編譯指令是通知 Servlet 引擎的處理消息,而動作指令只是運行時的腳本動作。編譯指令在將JSP 編譯成 Servlet 時起作用:處理指令通常可替換成 Java腳本,是 JSP腳本的標準化寫法。

            分類
            指令 作用
            jsp:forward 執行頁面轉向,將請求的處理轉發到下一個頁面。
            jsp:param 用于傳遞參數,必須與其他支持參數曲標簽一起使用。
            jsp:include 用于動態引入一個 JSP 頁面。
            jsp:plugin 用于下載 JavaBean 或 Applet 到客戶端執行。
            jsp:useBean 使用 JavaBean。
            jsp:setProperty 修改 JavaBean 實例的屬性值。
            jsp:getProperty 獲取 JavaBean 實例的屬性值。
            具體細節:
            jsp:forward:
            動作把請求轉到另外的頁面??梢赞D發靜態的HTML頁面,也可以轉發動態的JSP頁面,或者轉發到容器中的servlet jsp:forward標記只有一個屬性page。 page屬性包含的是一個相對URL。 page的值既可以直接給出,也可以在請求的時候動態計算。

            jsp:param
            用于設定參數值,這個指令不能單獨使用 可以與以下三個指令結合使用:
            jsp:include :用于將參數值出入被導入頁面
            jsp:forword : 用于將參數值傳入被轉向頁面
            jsp:plugin : 用于將參數值傳入頁面中javaBean的實例

            jsp:include
            (拿目標頁面插入原有頁面)該動作是一個動態的include指令,也用于帶入某個頁面,他不會導入被include頁面的編譯指令,僅僅導入頁面的body內容插入到本頁面
            該動作把指定文件插入正在生成的頁面。其語法如下:   flush:用于指定輸出緩存是否轉移到被導入的文件中, true:包含在被導入的文件中 false:包含在源文件中
            前面已經介紹過include指令,它是在JSP文件被轉換成Servlet的時候引入文件,而這里的jsp:include動作不同,插入文件的時間是在頁面被請求的時候。j
            sp:include動作的文件引入時間決定了它的效率要稍微差一點,而且被引用文件不能包含某些JSP代碼(例如不能設置HTTP頭),但它的靈活性卻要好得多。
            jsp:plugin

            用于下載服務器端的javaBean或applet到客戶端)
            jsp:plugin動作用來根據瀏覽器的類型,插入通過Java插件運行Java Applet所必需的OBJECT或EMBED元素。

            <jsp:plugin  
              type="bean | applet"   : 被執行的java程序的類型
              code="classFileName" :被執行的文件名,必須以  .class 結尾
              codebase="classFileDirectoryName"   :被執行文件的所在目錄
              [ name="instanceName" ] :給程序起一個名字用來標識該程序
              [ archive="URIToArchive, ..." ] :指向一些要預先載入的將要使用到的類
              [ align="bottom | top | middle | left | right" ] :
              [ height="displayPixels" ]
              [ width="displayPixels" ]
              [ hspace="leftRightPixels" ] 
              [ vspace="topBottomPixels" ]
              [ jreversion="JREVersionNumber | 1.1" ]   :能正確運行改程序必須的JRE的版本
              [ nsplug inurl="URLToPlugin" ]  
              [ iepluginurl="URLToPlugin" ] >
              [ <jsp:params>
              [ <jsp:param name="parameterName" value="{parameterValue | <%= expression %>}" /> ]+
              </jsp:params> ]
              [ <jsp:fallback> text message for user </jsp:fallback> ]  :當不能正確顯示該Applet時,顯示該指令中的文本提示
             <jsp:plugin>
            



            jsp:useBean
            useBean:用于在jsp頁面中初始化一個java實例(如果多個jsp中需要重復使用某段代碼,可以把這段代碼定義成java類在頁面中引用)
            jsp:useBean動作用來裝載一個將在JSP頁面中使用的JavaBean。這個功能非常有用,因為它使得我們既可以發揮Java組件重用的優勢,同時也避免了損失JSP區別于Servlet的方便性。
            jsp:useBean動作最簡單的語法為:<jsp:useBean id=“JavaBean的名稱” class=“package.class"包名.類名” scope=“有效范圍”/>

            這行代碼的含義是:“創建一個由class屬性指定的類的實例,然后把它綁定到其名字由id屬性給出的變量上”。不過,就象我們接下來會看到的,定義一個scope屬性可以讓Bean關聯到更多的頁面,它可接受四個值:request、session、page、application。此時,jsp:useBean動作只有在不存在同樣id和scope的Bean時才創建新的對象實例,同時,獲得現有Bean的引用就變得很有必要。
            獲得Bean實例之后,要修改Bean的屬性既可以通過jsp:setProperty動作進行,也可以在Scriptlet中利用id屬性所命名的對象變量,通過調用該對象的方法顯式地修改其屬性。這使我們想起,當我們說“某個Bean有一個類型為X的屬性foo”時,就意味著“這個類有一個返回值類型為X的getFoo方法,還有一個setFoo方法以X類型的值為參數”。  有關jsp:setProperty動作的詳細情況在后面討論。但現在必須了解的是,我們既可以通過jsp:setProperty動作的value屬性直接提供一個值,也可以通過param屬性聲明Bean的屬性值來自指定的請求參數,還可以列出Bean屬性表明它的值應該來自請求參數中的同名變量。
            在JSP表達式或Scriptlet中讀取Bean屬性通過調用相應的getXXX方法實現,或者更一般地,使用jsp:getProperty動作。
            注意,包含Bean的類文件應該放到服務器正式存放Java類的目錄下,而不是保留給修改后能夠自動裝載的類的目錄。例如,對于Java Web
            Server來說,Bean和所有Bean用到的類都應該放入classes目錄,或者封裝進jar文件后放入lib目錄,但不應該放到servlets下。
            id:javaBean的實例名 class: javaBean的實現類 scope:指定javaBean實例的生存范圍
            page:javaBean僅在該頁面有效 request:javaBean在本次請求中有效 session:
            javaBean在本次session內有效 application:
            javaBean在本應用內一直有效  下面是一個很簡單的例子,它的功能是裝載一個Bean,然后設置/讀取它的message屬性。
            關于jsp:useBean的進一步說明   使用Bean最簡單的方法是先用下面的代碼裝載Bean:   <jsp:useBean id=“name” class=“package.class” />
            然后通過jsp:setProperty和jsp:getProperty修改和提取Bean的屬性。 不過有兩點必須注意。   第一,我們還可以用下面這種格式實例化Bean: <jsp:useBean …>   Body   </jsp:useBean>
            它的意思是,只有當第一次實例化Bean時才執行Body部分,如果是利用現有的Bean實例則不執行Body部分。正如下面將要介紹的,jsp:useBean并非總是意味著創建一個新的Bean實例。
            第二,除了id和class外,jsp:useBean還有其他三個屬性,即:scope、type、beanName。
            id:命名引用該Bean的變量。如果能夠找到id和scope相同的Bean實例,jsp:useBean動作將使用已有的Bean實例而不是創建新的實例。
            class:指定Bean的完整包名。
            scope:指定Bean在哪種上下文內可用,可以取下面的四個值之一:page、request、session和application。  默認值是page,表示該Bean只在當前頁面內可用(保存在當前頁面的PageContext內)。
            request表示該Bean在當前的客戶請求內有效(保存在ServletRequest對象內)。
            session表示該Bean對當前HttpSession內的所有頁面都有效。
            最后,如果取值application,則表示該Bean對所有具有相同ServletContext的頁面都有效。
            scope之所以很重要,是因為jsp:useBean只有在不存在具有相同id和scope的對象時才會實例化新的對象;
            如果已有id和scope都相同的對象則直接使用已有的對象,此時jsp:useBean開始標記和結束標記之間的任何內容都將被忽略。
            type:指定引用該對象的變量的類型,它必須是Bean類的名字、超類名字、該類所實現的接口名字之一。請記住變量的名字是由id屬性指定的。
            beanName:指定Bean的名字。如果提供了type屬性和beanName屬性,允許省略class屬性。

            jsp:setProperty
            jsp:setProperty用來設置已經實例化的Bean對象的屬性,有兩種用法。
            首先,你可以在jsp:useBean元素的外面(后面)使用jsp:setProperty,    …

            第二種用法是把jsp:setProperty放入jsp:useBean元素的內部, …

            jsp:setProperty動作有下面四個屬性:name:表示要設置屬性的是哪個Bean?! roperty:表示要設置哪個屬性。有一個特殊用法:如果property的值是"",表示所有名字和Bean屬性名字匹配的請求參數都將被傳遞給相應的屬性set方法?! alue:value屬性是可選的。該屬性用來指定Bean屬性的值。字符串數據會在目標類中通過標準的valueOf方法自動轉換成數字、boolean、Boolean、byte、Byte、char、Character。例如,boolean和Boolean類型的屬性值(比如“true”)通過Boolean.valueOf轉換,int和Integer類型的屬性值(比如"42")通過Integer.valueOf轉換。  value和param不能同時使用,但可以使用其中任意一個?! aram:param是可選的。它指定用哪個請求參數作為Bean屬性的值。如果當前請求沒有參數,則什么事情也不做,系統不會把null傳遞給Bean屬性的set方法。因此,你可以讓Bean自己提供默認屬性值,只有當請求參數明確指定了新值時才修改默認屬性值。  例如,下面的代碼片斷表示:如果存在numItems請求參數的話,把numberOfItems屬性的值設置為請求參數numItems的值;否則什么也不做?!   ∪绻瑫r省略value和param,其效果相當于提供一個param且其值等于property的值。進一步利用這種借助請求參數和屬性名字相同進行自動賦值的思想,你還可以在property(Bean屬性的名字)中指定“”,然后省略value和param。此時,服務器會查看所有的Bean屬性和請求參數,如果兩者名字相同則自動賦值。  下面是一個利用JavaBean計算素數的例子。如果請求中有一個numDigits參數,則該值被傳遞給Bean的numDigits屬性;numPrimes也類似?! spPrimes.jsp

            20200321215032100.jpg
            jsp:getProperty
            jsp:getProperty動作提取指定Bean屬性的值,轉換成字符串,然后輸出。
            jsp:getProperty有兩個必需的屬性,即:name,表示Bean的名字;property,表示要提取哪個屬性的值。

            END!?。∮惺裁匆庖娍梢蕴岢鰜?!
            長路漫漫,JAVA為伴?。?!
            ————————————————
            版權聲明:本文為CSDN博主「福爾摩東」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
            原文鏈接:https://blog.csdn.net/qq_43688587/article/details/105017469

          label和span標簽設置寬度width無效的解決辦法

          前端達人

          如何用CSS使label標簽等寬?

          <div><label>密碼</label><input type="password" /></div>
          <div><label>確認密碼</label><input type="password" /></div>
          如何對齊呢?加空格的方法不好哦。(因為label中的字數不一樣,所以頁面顯示效果不對齊)
          問題原因及解決辦法:

          label默認為內聯元素,元素前后沒有換行符,并且不可以設置寬度。

          如果要為label設置寬度,則需要改變label的display屬性,使其變為一個塊級元素。

          方法如下:

          1.增加inline-block屬性值,將label標簽變為行內塊元素(css2.1新增)

               {display:inline-block;}

          2.增加width屬性,如將寬度設置為100px
              label{width:100px;display:inline-block;}

          3.添加好后頁面上所有的label標簽會變為100pxv



          JavaScript中的混淆器

          隨著 AJAX 和富界面技術的發展,Javascript 在 Web 應用上的重要性越來越高,Javascript 代碼的復雜性、功能和技術含量也越來越高,對Javascript 代碼保護的需要也越來越迫切。



          壓縮 compress: 去掉空格,換行,注釋等,格式緊湊,節約存儲空間。



          混淆 obfuscate/garble:替換變量名或方法名,讓js不容易看懂。也做到了壓縮的效果。



          加密 encrypt:一般用eval方法加密,效果與混淆相似。也做到了壓縮的效果。



          我們可以通過工具進行混淆,通過工具也是目前最好的方式。推薦一個很好的混淆工具: JSObfuscator By Unest


          20200321102359879.png


          ————————————————

          版權聲明:本文為CSDN博主「劉亦楓」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。

          原文鏈接:https://blog.csdn.net/liuyifeng0000/article/details/105004732




          科學的 UI 配色方法

          資深UI設計者

          各行各業的設計師每天都在和顏色打交道,UI 設計師設計用戶界面也不例外。

          用戶界面是一個設計師用理性思維解決用戶感性需求的窗口。如果對色彩的運用不加以克制,界面可能會顯得花哨而沒有主次;但過于拘謹又容易使界面保守,難以激發用戶情緒。所以如何讓色彩的搭配平衡,是 UI 設計師需要修煉的一課。

          但色彩畢竟是感性的元素,我們總是仰慕一些對色彩天賦異稟的設計師,總能不拘繩墨給作品帶來驚艷的視覺效果。我們難以偷習他們的天賦,但或許你有沒有想過,干脆我們另辟蹊徑,用理性推導來制定一套色彩系統?

          那么今天我用我的項目示例,教給大家一個科學推導顏色搭配的方法。也許能夠帶你發現一些色彩背后的數學秘密。

          區分顏色模式

          在此之前我們需要先熟悉一下顏色模式。

          在 PS 菜單欄的「圖像-模式」下可以看到非常多的顏色模式:RGB、CMYK、Lab 等等。那是因為 PS 是一個需要滿足設計行業水平領域的軟件,要解決各類設計師需求,所以涵蓋的顏色模式非常豐富。

          但 UI 大多數時候需要關注的是線上場景,成果的展示渠道一般是自發光設備。所以弄明白垂直領域軟件 Sketch 中的幾種顏色模式,其實就足夠了,分別是 RGB、HSB 和 HSL。

          RGB 是指通過 R(Red:紅)、G(Green:綠)、B(Blue:藍)三個顏色通道的變化以及它們相互之間的疊加得到各式各樣的顏色。三個通道分別有「0-255」這 256 個值,這些值分別代表著各通道的亮度層級。

          雖然 RGB 在機器表現上很友好,但并不夠人性化。因為人們判斷顏色,往往是通過「這是什么顏色?是不是太鮮艷了?亮了還是暗了?」這樣的感官維度,而很難通過紅綠藍的亮度層級去判斷。所以人們后來基于 RGB 衍生出了 HSB 模式和 HSL 模式。

          HSB 是指通過 H(Hue:色相)、S(Saturation:飽和度)、B(Brightness:明度)來控制顏色。Hue(色相)的取值范圍是色環上 0-360° 的圓心角度;而 Saturation(飽和度)與 Brightness(明度)是在 0-100% 的量占比。

          HSL 中的 H、S 與 HSB 相同,都是指 Hue(色相)、Saturation(飽和度)。但 L 所指的則是 Lightness(亮度)。

          HSL 和 HSB 稍微有一些不同,我們在兩個顏色模式下輸入相同的數值,會發現顏色實際是不一樣的。雖然 H、S 指代的都是色相和飽和度,但 L(Lightness:亮度)與 B(Brightness:明度)分別被認為是「顏色中白色的量」和「顏色中光線的量」。

          Lightness 和 Brightness 的概念要深度研究下去的話其實是計算機算法領域的問題了,感興趣的朋友可以查閱更多資料,但我個人認為對于 UI 來說沒有太大必要。

          關于 HSB、HSL 的使用場景,記住以下兩點即可:

          • 前端 CSS 代碼里支持的是 HSL,而不是 HSB。如果和前端對接時,UI 給到的是 HSB 的色值,那么最終落地的顏色效果會與設計稿有出入。
          • 我們接下來講到的配色推導,是基于 HSB 顏色模式的,因為它更容易理解,數值變化在色系坐標中的產生的結果更加直觀。

          配色推導

          支付寶 Alipay Design 團隊提出過一個配色原則:

          以同色系配色為主導,多色搭配為輔。

          同色系為統一的色相,使用中可以加深品牌色的感知,可以讓界面更有層次,同時可以讓界面保持色彩上的一致性;由于業務的多樣化,我們需要多色搭配為輔;多色的輔助顏色,也可稱之為功能色,可設定不同的任務屬性和情感表達;再搭配中性色黑白灰,賦予更多的變化和層次。兩種配色通過主次、使用比例,可靈活運用在業務的各個場景中,具有非常好的延展性。

          那么知道了這個原則,我們又該如何科學、合理地得出產品的色彩系統呢?接下來我就用我的一個項目示例給大家做講解。

          步驟一:找到符合產品調性的品牌色

          我負責的該項目主要業務與高校支付、繳費相關,所以希望整個產品視覺風格首先要給用戶帶來安全感。又因為主要用戶群體是高校師生居多,新潮、年輕化是主要用戶的一大標簽,所以我們選擇了用飽和度較高的藍色來作為品牌色。

          最終選擇品牌色的 Hex 值為 #1585FF ,HSB = (211,92,100)。

          步驟二:提取24色

          選定了品牌色之后,以品牌色的 H(色相)為基礎,不斷地遞增、遞減 15,在 0-360 之間可以得出 24 個顏色,也就是將 360° 色環分割為 24 份,可以得到 24 色。

          為什么要提取 24 色,并且以 15 為公差呢?

          我們知道,想得到鄰近色、類似色、互補色這一系列的顏色,我們就會使用到色環。

          • 鄰近色:色相差值 15° 以內的顏色為鄰近色;
          • 類似色:色相差值 30° 以內的顏色為類似色;
          • 互補色:色相差值 180° 的顏色為互補色。

          而 24 色色板是幫助我們提取輔助色的便捷工具。

          步驟三:找到同色系配色

          同色系是指與品牌色 H(色相)一致,通過改變 S(飽和度)與 B(明度)變化產生的色組。同色系色組的推導需要借助拾色板坐標。

          我們建立一個基于 S(飽和度)與 B(明度)的平面坐標系,設定當前品牌色為色值為(S?,B?),連接品牌色色值點與右上純白點(0,100)、右下純黑點(100,0),得到兩條線段。

          我們各在兩條線段上均分取得 5 個點坐標(包含首位兩點)。這樣兩條線段一共就會產生 11 個(S,B)坐標值,對應著 11 個同色系色組。

          經過上圖的計算,我們可以得到基于品牌色的同色系色階。

          步驟四:多色搭配

          用于搭配的輔助色應滿足以下兩個條件:

          • 和品牌色有明顯區分:盡量避免所選輔助色感官上給用戶視覺區別與品牌色差距不大,傳遞的調性太過一致;
          • 不能過于突兀:根據色彩原理來說,互補色是最能與品牌色本色產生視覺感官對比的顏色,但可能會有些突兀。為了讓顏色的輔助起到豐富畫面的作用,而不是反而讓整個版面顯得不和諧,所以我們選擇互補色的鄰近色作為輔助色,而不要直接使用互補色。

          于是根據以上條件,基于品牌色可衍生出 3 個輔助色:一個與品牌色傳遞調性有明顯區分的類似色;兩個互補色的鄰近色。

          步驟五:感官明度校準

          經過計算后,我們已經得出了品牌色和三個輔助色。

          可以看出,雖然我們提取出的輔助色明度色值都一致,但因為顏色本身自帶的感官明度屬性有所區別。為了讓輔助色和品牌色的感官明度盡量一致,我們要對第一次提取出的輔助色進行感官明度校準。

          校準方式是:依次在輔助色上疊加一層純黑圖層,將該純黑圖層顏色模式調整為 Hue(色相),就可以通過無彩色系下的明度色值,進行對比。

          這樣我們終于得到以品牌色為基準的 3 個輔助色了。

          步驟六:全色系輸出

          將得到的輔助色依次進行步驟三的計算,可以得到輔助色的同色系色階。

          但因為明度過低時,顏色已經非常接近于黑色,色相在肉眼上幾乎已經趨于一致。所以刪除最左邊的三種同色系顏色。最后得到基于品牌色推導出的全色系色階色板。

          總結

          完成了以上的工作,當然還不算結束。一套標準的色彩系統還會包含中性色規范、顏色的使用規范等等。但相信解決了大部分的需求,剩下的工作也難不倒大家了。畢竟以上的方式只是給大家提供了一個理性科學的方法,色彩的使用最終還是要融合設計師個人的共情能力。

          比如許多產品有了一套自己的色彩方案后,設計師還會根據具體的業務場景去賦予 icon、卡片背景等元素不一樣的色彩方案。

          希望這個方法能夠帶你發現一些色彩背后的數學秘密。

          文章來源:優設    作者:UCD耍家

          大廠設計師的草稿本里畫的都是什么?!

          資深UI設計者

          很多同學投票想看看設計師的草稿本,今天就來滿足大家了!我們來看看六位淘寶設計師的草稿本們,有些是紙質派,有些是電子黨,Here we go!

          草稿本是設計師工作生活必不可少的工具,比起正兒八經的作品集,設計師的草稿本其實也是十分有趣的,它是設計師腦海里千奇百怪想法的隨手記錄。

          Shiyu:本人是被脅迫公開草稿本的卑微設計師

          手繪裝備:iPad Pro+Procreate

          以下是被迫營業現場對話

          △ 給「老同學」的公眾號形象草稿

          老同學:「好久不見~我記得你畫畫挺好的~幫畫個形象唄~我現在在做一個公眾號,需要*&%¥#……你明白吧?你就簡單畫一畫就好~謝謝啦」

          我:「….」

          △ 給「朋友」畫的頭像草稿

          朋友:「好久不見~我記得你之前幫誰誰畫的那個頭像挺不錯的~也幫我畫一個唄~我現在在做blablabla,需要*&%¥#……你明白吧?很簡單吧~謝謝啦」

          我:「….」

          Dajing:我的草稿本就是平時畫畫原型圖或者需要做文檔整理規范的時候拿出來畫畫草圖,對我來說我的草稿本是幫我理清思路的一個很好的助手。

          手繪裝備:A4點格草稿本+馬克筆

           △ 智能配色草稿

          △ 中后臺加框草稿

          Dajing:里面有當時做中后臺框架的時候導航的原型,還有之前做智能配色的時候HSB色環推演的草圖,還有些文檔維度整理草圖,畫出來方便查看也便于直觀梳理自己的邏輯。

          Wanru:畫畫是我記錄生活、尋找靈感的一種方式。

          手繪裝備:MUJI筆記本、水彩、鉛筆、馬克筆等等…

          △ 沖繩旅行水彩

          Wanru:水彩是我最喜歡的繪畫形式,非常浪漫,食物也是我擅長畫的題材。這是在沖繩旅行時的第一頓晚餐,新鮮的海鮮和爽口的啤酒也具有明亮的顏色,讓人忍不住想去表達。燒肉店的杯墊被我帶了回來,日本的平面設計做得很好,是很好的素材~

          △ 電影小漫畫

          用小漫畫記日記的習慣已經很多年了,我是非常喜歡漫威的,這是13年《鋼鐵俠3》上映和兩個朋友看電影的場景。這個場景必須用美漫的風格了!偶爾會嘗試各種畫畫風格。

          △ 隨手小速寫

          偶爾會畫些小速寫,勾一些人物、小物品、小動物,速寫可以很好地練習造型能力。

          Zoey:作為一個熱愛喝奶茶、追番和打手游的肥胖又無助的設計師,感覺累了就在草稿本上放空自己。

          手繪裝備:iPad Pro+Procreate & Sketches Pro

          △ 記錄日常生活的草稿

          Zoey:我很喜歡用草稿本記錄自己的生活(食物為主),喜歡的電影角色也會簡單畫下來。

          △ 二次元小畫

          作為半個二次元 ,草稿本當然也被滿屏的羞恥占領~ 這兩張草稿是我畫的Persona 5里面的人物,因為我個人真的特別喜歡P5 ,對于自己喜歡的事情即便996也會熬夜畫下去~

          Dribbble 十年重磅改版背后,值得關注的7大亮點

          資深UI設計者

          Dribbble 經歷了資本入駐、創始人出走之后,最大的事情應該就是這次改版吧?這個全球最大、最有影響力的設計師社區的每一個動作都必然會牽扯著每個設計從業者的注意力,新版背后到底有哪些變化?這些變化又是出于什么樣的想法來修改的?看看 Dribbble 的官博是怎么說的吧:

          在過去的10年當中,Dribbble 已經成長成為一個全球性的社區,成千上萬的人從這里獲得啟發和靈感,助力設計,而我們從最初分享設計作品小樣的創意社區,逐步成長為一個全球設計師產品和作品集展示和社交的平臺。在此,而我們也第一次開始問自己一個簡單的問題:【我們到底是在做些什么?】

          今天,我們很高興宣布,我們在過去的10年當中首次進行了徹底的重設計。

          Dribbble 的新時代

          在過去十年當中,我們所設計的 Dribbble 頁面的特點,是將設計師的作品和內容放在首位,所以叫我們不追隨潮流,采用了極簡風格的設計,即使潮流來來去去,它們也只是 Dribbble 展示內容的一部分。我們提供了一幅未經修飾的畫布,這樣就可以和最瘋狂最激進的設計探索相輔相成。不過,這么多年來,Dribbble 這種「隱形」的設計,在視覺美學上確實和時代脫節了。這次,我們創建了一套有著一致樣式的設計和代碼庫,用以替代以往不斷修改、龐大且不一致的代碼。

          「我們新的設計系統旨在保持整個視覺和諧的同時,展示你的創造力?!?

          如今,我們正在改進 Dribbble 的界面,以更加干凈的布局、統一的設計系統、更加簡化的配色方案、更加輕便的代碼庫(加載也更加迅速),以及全新配置的文件,來更好地幫你將作品推到最前沿,正確而合理地展示你的創作和個性。

          我們新的設計系統旨在保持整個視覺和諧的同時,展示你的創造力。它是你分享設計作品和創造力的理想畫布,而新的美學特質也可以更好地反應此刻我們的公司的氣質。

          全新的設計師個人頁面

          在進行重設計的時候,我們明確知道,我們要完全重新思考社交化的設計師作品展示,并且將創意更大化地呈現。對于 Dribbble Pro 用戶和 Pro Business 訂閱者,你現在擁有一個全新的、經過全面修改的設置和配置頁面,可以在 Dribbble 上充分展示自己的個性,

          你的頁面,你的個性

          Pro 用戶和 Pro Business 用戶可以通過上傳你自己的首圖和定制化的歡迎語,來個性化你的個頁面。

          你還會注意到,你的個人頁面還可以上傳更大的照片,這可以讓你的作品對于頁面的訪客、你的客戶、招聘設計師的企業人事而言,看起來都是非常出挑的。新的網格布局是可以自定義的,因此你可以充分完美地設置和展示內容。

          此外,我們還修改了「關于我們」這個部分,新版當中,這個部分你可以將所有的個人信息匯集到一起,以便完整而充分地展示你的個人經歷、展示簡歷和技能。

          尋求工作機會?

          如果你正在尋求工作機會,新的信息發送組件,確保了你的客戶或者招聘企業可以一鍵聯系到你,他們可以直接從你的個人資料頁向你發送信息,非常輕松地和你取得聯系。

          面向所有人的新個人頁面

          當然,并非是只有 Pro 和 Pro Business 用戶才能擁有高度定制化的個人頁面,無論你是普通用戶、內容創作者還是內容策劃人,Dribbble 上每個普通用戶的個人頁面也都會升級。尚未訂閱 Pro 服務的設計師會注意到,他們的個人頁面會更加簡潔,而設計作品會以更加聚焦的形式,吸引到每一個訪客的目光。

          全新的收藏頁

          我們將以往的帶有分享功能的收藏合集頁(之前叫 Buckets)給翻新了,你可以精心策劃整頁內容和案例,從一個情緒板到完整的項目,這意味著,借助這個收藏頁功能,你可以更加輕松地在 Dribbble 上尋找和搜集靈感。

          給策劃人的個人頁面

          現在,我們可以非常自豪地宣布,即使你并沒有將 Dribbble 作品給分享出來,每個人也都會擁有一個策劃人頁面,你可以在其中搜集和整理自己喜歡的作品,來展示你的個人品味,通過保存別人的作品,來創建新的合集,我們會自動將它添加到你的個人頁資料頁當中,讓全世界的同好因為品位而關注你。

          升級發現頁

          我們在整個改版設計過程中,面臨最大的挑戰,其實是圖片網格,因為這是絕大多數用戶每天瀏覽圖片、發現設計靈感的地方,我們有意識地去弱化 Dribbble 本身 UI,避免喧賓奪主,讓每個用戶的作品成為視覺焦點,減少噪音。

          當然,我們還未完成…

          2020 年才剛剛開始,我們迫不及待地想要展示我們計劃中的一切。從案例研究到更好的視頻支持,再到作品集展示,擺在我們眼前的改版路線圖足以證明我們的雄心,所有的這一切都是為了讓全球的設計師能夠從中獲益,走向成功。請期待我們進一步的改版升級吧!

          文章來源:優設    作者:Dribbble

          2020年最值得設計們保持關注的8個UI設計趨勢

          資深UI設計者

          快速變化的技術每年都在影響著設計趨勢。作為設計師,我們需要時刻保持關注,對設計趨勢擁有較高的敏感度,不斷學習,擴充自己的設計技能,目的是為了跟上的市場環境。基于我的調研,經驗和觀察,我甄選了在2020年你將會看到的最為關鍵的8個UI/UX設計趨勢。讓我們一起來看看吧。

          動效插圖

          插圖被應用到APP中已經有很長一段時間了,它們在最近幾年的演變令人印象深刻。插圖作為一種非常流行的設計元素,為我們產品的整體產品增加了情感化體驗。插圖非常能抓人眼球,尤其是在融入動效后會顯得更加的自然,將產品帶入生活的氣息,使得產品功能更加突出,同時也增添了更多的細節和個性。

          △ Welcome to Swiggy by Saptarshi Prakash

          △ Onboarding animations — Virgil Pana

          另一個好處是使用動效后,能抓住用戶的注意力使其能夠更加沉浸在你的產品中。動效同樣是講好品牌故事,產品或者服務最有影響力的途徑之一。

          微交互

          微交互存在與每一個網頁或者app界面中。每當打開你最喜歡的那些應用時,都有機會看到它們,比如像Facebook中就有大量不同的微交互,我認為「Like」功能就是一個完美的例子。有時,我們幾乎意識不到它的存在,因為它們非常的不顯眼,非常自然地融到界面中去了。但是,如果當你把這些微交互移除掉的話,你又會非??斓淖⒁獠⒛芨惺艿揭恍┓浅V匾臇|西丟失了。

          △ Menu toggle close animation — Aaron Iker

          △ Tab bar active animation — Aaron Iker

          一般來說,在UI/UX中即使非常小和細節處的設計都可能會帶來巨大的沖擊力。微交互就是完美的證明,細節和對它的關注能極大的改善產品的整體體驗,并讓產品體驗上升一個臺階。每年,新設備的發布伴隨著新的機會,能給產品塑造新品牌和創造富有創意的微交互。

          3D圖形

          3D圖形設計幾乎無處不在,比如在電影,游戲或者運營廣告里等等。3D圖形設計早在10年前就出現了然后一直在不斷提升和進化。手機和web技術進展迅猛,新的web瀏覽器能力打開了3D設計新世界的大門,這給了設計師們在web和手機界面中創造炫酷3D設計的機會。

          △ 3D flip menu by Minh Pham

          △ Car health report UI by Gleb Kuznetsov

          創造并整合這些3D創意設計到web和手機界面中需要特殊的技能和花費大量的工作,但這些付出會得到回報。

          △ Apple AirPods Pro landing page

          3D設計對于產品和服務來說,具有非常大的吸引力,例如在交互上能夠支持用戶360度查看產品,從而大大提升整個的產品體驗。

          在2020年會有更多的品牌利用3D渲染模型的產品和服務去模仿線下購物體驗。

          VR設計

          VR技術在2019年有一個巨大的飛躍。最近的一年我們激動地看到了頭戴式設備有了非常大的發展,尤其是在游戲領域。我們需要記住的是,游戲行業經常在引領著新技術的發展并落地到實際的產品設計中。研究表明,VR也不例外,在Oculus Quest于2019年推出后,許多機會為其他行業打開了大門。Facebook CEO 扎克伯格已經測試了激動人心的手部交互功能,并正式宣布將在2020年初為Quest進行更新。

          △ Oculus Quest — hand interaction feature

          △ PlayStation Virtual Reality Website Design by Kazi Mohammed Erfan

          索尼和微軟計劃在2020年夏季發布他們的新設備,這就給VR技術帶來巨大的機會和發展空間。

          學習VR 可以閱讀優設這個專題:https://www.uisdc.com/zt/vr-design

          AR設計

          在最近幾年,我們能看到在AR(增強現實)這塊有了很大的進步和驚喜。世界引領著科技公司在AR開發方面進行了巨大的投入,所以我們應該期待這項技術在2020年有更大的成長和發展。蘋果公司也發布了他們自己的AR套件叫AR KIT3來幫助設計師和開發者在他們的產品中打造AR體驗。

          △ Apple ARKit 3 by Apple

          △ Public transit app by Yi Li

          △ House of Plants AR Concept by Nathan Riley

          在AR空間里會有無限的機會和創意去打造一個新的品牌和激動人心的體驗。為AR做UI設計會在2020年成為一大趨勢,這就要求設計師們在面對創造AR產品體驗前,應該去準備和抓緊學習新的工具,原型之類的知識。

          學習AR 可以閱讀優設這個專題:https://www.uisdc.com/zt/ar-design

          新擬物化設計

          一般來說,擬物化設計是指以現實風格/方式創造出來與現實中的物體相匹配的設計元素。不斷發展的VR/AR技術以及在各大最流行設計平臺(Dribbble,Behance等)上展示的設計作品趨勢來看,預示著擬物化的回歸,但這次換了個更現代,更酷略微高大上的名字叫「新擬物風」(也叫Neumorphism)。

          △ Skeuomorph Mobile Banking | Dark Mode by Alexander Plyuto

          △ Simple Music Player by Filip Legierski

          △ Sleep Cycle App — Neumorphism Redesign by Devanta Ebison

          你可能注意到了:Neumorphism代表了豐富細節和明確的一種設計風格。高光,投影,發光,這些細節非常令人印象深刻。Neumorphism風格已經鼓舞了全世界一大批的設計師創作作品,它也會成為2020年最大的設計趨勢。

          學習新擬物風可以閱讀優設這個專題:https://www.uisdc.com/zt/neumorphism

          不對稱布局

          最近一年我們也注意到一種不對稱風格正在快速發展。傳統基于「模板」的布局肯定會消失。這種設計趨勢給2020年的設計帶來了更多的差異化。合適的不對稱風格將會在我們的作品中增多一大批不同的性格,火力以及個性,所以設計不再單純的基于模板。

          △ Limnia Fine Jewelry Grid — Zhenya Rynzhuk

          △ Carine fashion store — selection screen concept — Dawid Tomczyk

          當設計這種不對稱風格時,設計師擁有非常多的選項以及巨大的發揮空間。但是,想設計好這種不對稱風格需要大量的練習,它絕不是將元素隨機的擺放在網格中,而應該小心使用和實現它們,時刻需要把用戶的訴求考慮到設計中。我們并不想讓用戶迷失在我們的產品中,對嗎?

          用戶故事

          故事在整個用戶體驗中扮演著非常重要的角色。你可能經常會在著落頁看到它作為品牌介紹,產品或者一個新的服務。講故事就是利用創意的形式把信息傳遞給用戶。這可以通過強大的視覺元素來呈現(字體,插畫,高清圖片,顏色,動畫,交互元素)。

          △ A+WQ / Young Lab Page Story of The Week Animation by Zhenya Rynzhuk

          △ Free Sketch Template :: Mimini by Tran Mau Tri Tam

          講故事可以幫助產品創造出品牌和用戶之間積極的情感連接。講故事可以為你的產品創造出非常多的記憶點,讓用戶感受到自己就是產品或服務的一部分,他們便會更加愿意使用你的產品。話雖如此,講故事也是一種非常有效的營銷手段,它可以極大地提高你的產品/服務的銷量。講故事作為一種非常成功的手段,將在2020年繼續發揚光大。

          總結在2020年非常值得關注的8個設計趨勢

          1. 動態插圖

          通過把動畫和插圖進行結合,我們可以使得設計變得更加突出,并把它帶入用戶的日常生活,為產品賦予了的細節和個性化。

          2. 微交互

          微交互被證明是可以在當用戶注意到他們是能夠帶來非常大的驚喜體驗,它能夠有效的提升整個產品的用戶體驗并把產品的品質提升一個等級。

          3. 3D圖形的應用

          新的瀏覽器技術打開了3D圖形應用的大門,能夠給設計師帶來非常大的創意機會去打造讓人驚嘆的3D圖形設計應用到網頁和手機APP中。

          4. 虛擬現實

          游戲行業將迎來新的變革,新的技術能夠應用到產品設計中。

          5. 增強現實

          在AR空間中擁有無限的機會去創造新的品牌和令人激動的新體驗。為AR技術服務的UI設計將在2020年成為主要趨勢,設計師需要位為之準備并去學習新的工具,原型,當真的需要你去做一款AR應用時就需要用到。

          6. 新擬物風

          AR/VR技術不斷發展,以及在各大流行設計平臺上大量涌現的寫實設計作品預示著擬物風的回歸,但只是這次換了個新的更加現代化的名字。

          7. 不對稱布局

          運用不對稱布局能讓設計創意變得擁有更多選項和機會。雖然,設計一個成功的不對稱布局需要投入大量的練習和時間。

          8. 講故事

          講故事就是利用創意形式把信息傳遞給用戶。講故事是一個非常好的營銷工具,可能會大大增長產品的銷售額或服務。

          文章來源:優設    作者:彩云譯設計

          2020 年最火的新擬物化如何落地應用?

          資深UI設計者

          最近關于新擬物化 Neumorphism 的風太大,簡直是傳遍大江南北無人不知。對于它的看法大家也都眾說紛紜,大部分的觀點都集中于:第一看過去非常的高大上,再仔細琢磨一下就感覺只能是飛機稿中的戰斗稿。對此我表示非常的理解,畢竟在國內體制下的用戶界面設計基本都延續商業設計的命脈──低效能、不實用、不能帶來良好轉化的東西統統給我丟掉,哪怕是用戶體驗也是建立在商業目標驅動下的存在。

          盡管觀點如此,我還是想為新擬物化這位誕生在不平凡 2020 年的新生兒稍稍正個身,它并非空穴來風,也并非完全無法落地使用,相反如果合理加以優化應該能達到意想不到的雙贏效果。

          新擬物化的由來

          一切的開始都源于一個叫 Alexander Plyuto 的設計師在各平臺發布了一個他的新作品──「Skeuomorph Mobile Banking(擬物化手機銀行)」。

          在去年末的時候這名設計師還一直沿用 Skeuomorph(擬物化)這個名詞來命名自己的一系列設計作品,直到 HYPE4 的 CEO-Michal Malewicz 寫了一篇關于此風格的文章,并賦予了它一個新名詞 Neumorphism(New+Skeuomorphism),自此之后大家就都照著這個新名詞進行傳播了。

          在詳解新風格之前,先讓我們回憶一下這些年移動端用戶界面設計風格的演變歷程。自 2013 年蘋果推出了 iOS7 之后開始刮起的扁平風潮,所有走在設計前沿的大廠都開始不約而同地對自己家的 app 進行了大刀闊斧的改版。

          這扁平風一刮就是 7 年,仔細分析一下就能明白為何 ta 如此長壽:內容優先的認知簡約,不僅拓展性強且具有能的特性,解放了一大堆「手活」不是那么好的設計師,讓他們有更多時間專注在設計解決問題的命題上。

          但就算一個風格再適應市場的需求,用戶和時代還是會對它逐漸疲憊,審美疲勞和新的市場需求都會催生新的變革。

          新擬物化設計語言解析

          1. 新擬物化≠輕擬物

          第一次看到這個風格介紹的時候險些以為就是曾經的輕擬物重返江湖了,但仔細看看原設計師輸出的設計原則,發現確實是完全不同的 2 種定義。

          輕擬物從本質上來說是 Y 軸面原質化層級分離的,而新擬物是在 Y 軸面不分離的情況下物理化擬態。

          來看一個輕擬物與新擬物卡片的比對:

          從上圖可以感受到新擬物在保留輕質感的同時,更貼近事物的物理還原,但真實感與舒適度帶來的代價就是它的辨識度和對比度明顯較其他風格低了很多,這也是它被大家吐槽飛機稿中的戰斗稿的重要原因之一。

          2. 新擬物化控件示例

          原設計師對新擬物化的「淺色版」控件規范如下,基本涵蓋了核心的界面設計控件,整體對于控件的定義就在于良好使用投影和漸變來打造物理化界面肌理。

          另外還有可以良好適配當前流行黑色模式的「黑色版」。

          新擬物化的改良與應用

          在了解新擬物化的設計語言特點之后,大家應該都發現這種風格的設計是有一定局限性的,它并不適用于一部分商業產品,大部分時候也不適合全局控件應用。那么如果我們想要把新擬物化應用到我們的落地項目設計中,需要注意哪些地方,并進行什么樣的改良呢?

          1. 深淺模式疊加解決弱可視難題

          新擬物的按鈕肌理很多是建立在素色白板上的淺色按鈕,如果繼續沿用淺色按鈕,且不說色弱用戶的可視問題,普通用戶的操作行為也會大打折扣,所以這里我們建議將新擬物的深淺模式疊加來使用,如下圖:

          2. 局部高光使用解決層級難辨問題

          如果將新擬物化全控制使用,確實容易造成界面層級混亂的問題,因為畢竟它的設計語言就是 Y 軸面不分離的設計定義,但如果我們合理選擇它來作為局部高光,應該大部分情況下還是不錯的。如下圖,我們僅在銀行卡部分使用新擬物化(深淺雙模式均可用),其他的控件部分保持扁平,使用 2 個風格相融合的方式可以良好保障層級的劃分:

          3. 拿什么解決開發崩潰的問題?

          之前看到很多文章在轉發一個生成新擬物化 css 代碼的網站:Neumorphism.io,說是用這個就可以輕松解決開發的問題。

          然而事實的真相總是令人落淚的,這個網站提供的 css 代碼只是網頁代碼,移動端是完全用不了的。而且就算有對應的 css 代碼,對于開發來說也是遠不夠的,他們還是要寫框架來支持這套 css 代碼,不然是跑不起來的。所以我們要如何解決開發小哥哥手寫新擬物化設計稿崩潰的問題呢?

          很簡單,就是給他們切圖。按鈕的軟點擊切兩張狀態圖,卡片背景只需要切一張,ppduck 壓縮走一波,對 app 性能的影響基本可以忽略不計(因為上文我也說過了這種風格不大可能大面積或者全界面應用)。

          至于新擬物風不適用的場景大家應該都心知肚明了,信息承載大,層級關系復雜,我就不一一舉例了,基本就涵蓋了大部分現在市面上主流的產品的大部分場景。但即便如此我們還是需要對新的設計保有一絲激情與希望,不要輕易的去否定,畢竟新生事物總是有它的魅力與獨到之處。

          文章來源:優設    作者:Nana的設計錦囊

          "從客戶端中檢測到有潛在危險的 Request.Form 值"的解決方案匯總

          seo達人

          在一個asp.net 的項目中,前端通過ajax將富文本中的文字內容post到服務端的一個ashx中,在ashx中嘗試讀取參數值時,

          結果報錯:“從客戶端中檢測到有潛在危險的 Request.Form 值”

          #事故分析
          由于在asp.net中,Request提交時出現有html代碼字符串時,程序系統會認為其具有潛在危險的值。會報出“從客戶端 中檢測到有潛在危險的Request.Form值”這樣的Error。

          而富文本中的內容是包含html代碼的,所以...

          #解決方案:
          1、前端對富文本字符串進行encodeURI編碼,服務端進行HttpUtility.UrlDecode解碼操作;
          前端代碼:

          var str = '<p><span style="color: #00B0F0;"><em><strong>我想留在你的身邊,</strong></em></span><br/></p><p><span style="color: #7030A0;"><strong><span style="text-decoration: underline;">深情款款多么可憐;</span></strong></span></p>';
              $(function() {
                  $.ajax({
                      type: "post",
                      url: "TestHandle.ashx",
                      data: { Title: 'jack', Content: encodeURI(str) },
                      success: function (data) {
                          $("#div").html(data);
                      }
                  });
              });
          后端代碼:

              public void ProcessRequest(HttpContext context)
              {
                  string str = context.Request["content"];
                  string content = HttpUtility.UrlDecode(str);
                  context.Response.ContentType = "text/plain";
                  context.Response.Write(content);
              }
          效果圖:

          2、前端不以form的方式提交,直接以json方式提交,服務端從request的body中讀取數據,然后反序列化,得到信息;
          前端代碼:

              var str = '<p><span style="color: #00B0F0;"><em><strong>我想留在你的身邊,</strong></em></span><br/></p><p><span style="color: #7030A0;"><strong><span style="text-decoration: underline;">深情款款多么可憐;</span></strong></span></p>';
              var temp = { Title: 'jack', Content: str };
              $.ajax({
                  type: "post",
                  url: "TestHandle.ashx",
                  contentType:"application/json;charset=utf-8",
                  data: JSON.stringify(temp),
                  success: function (data) {
                      $("#div").html(data);
                  }
              });
          后端代碼:

              string bodyText;
              using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream))
              {
                  bodyText = bodyReader.ReadToEnd();
              }
              dynamic bodyObj = JsonConvert.DeserializeObject(bodyText);
           
              context.Response.ContentType = "text/plain";
              context.Response.Write(bodyObj.Content);
          效果圖:

          #其他場景的解決方案:
          1、aspx頁面,當前頁面進行form提交
          打開當前.aspx頁面,頁頭加上代碼:validateRequest=”false”,如:

          <%@ Page Language="C#" ValidateRequest="false" AutoEventWireup="false" CodeFile="default.aspx.cs" Inherits="default" %>
          該方法不推薦,還有一種修改web.config配置文件的方法,強烈不推薦,就不寫在這里了;

          2、在ASP.NET MVC中的解決方案
          1)、針對某個實體類的單個字段設置 [AllowHtml] ,這樣提交的時候,系統就會放過該字段。

          2)、前端代碼:

              var str = '<p><span style="color: #00B0F0;"><em><strong>我想留在你的身邊,</strong></em></span><br/></p><p><span style="color: #7030A0;"><strong><span style="text-decoration: underline;">深情款款多么可憐;</span></strong></span></p>';
              $(function () {
                  $.ajax({
                      type: "post",
                      url: "Home/Test",
                      data: { Title: 'jack', Content: str },
                      success: function (data) {
                          $("#div").html(data.ok);
                      }
                  });
              });
          3)、后端代碼:

              public class NewInfo
              {
                  public string Title { get; set; }
                  [AllowHtml]
                  public string Content { get; set; }
              }
           #寫在最后
           該文只是淺顯的總結一下,其中涉及的xss方面,沒有詳細考慮,歡迎指正!

          JavaScript中Array數組的some()函數的詳解

          seo達人

          前言

          開發中,經常會用到js的Array數組的各種迭代函數map(),filter(),some(),every(),forEach(),find() findIndex(),也是在ES6中新增一些遍歷函數。同樣是不是也是一道面試題,說說ES6新增的一些新特性????



          ?開始正文some()函數



          ?一、對some()函數的定義:



          some():用于檢測數組中的元素是否滿足指定條件(函數提供);

          some()方法會依次執行數組中的每一個元素:



          如果有一個元素滿足條件,則表達式返回true,剩余的元素不會再執行檢測。

          如果沒有滿足條件的元素,則返回false。

          注意:



          some()不會對空數組進行檢測。

          some() 不會改變原始數組。

          ?二、瀏覽器支持

          表格中的數字表示支持該方法的第一個瀏覽器的版本號。



          ?三、語法



          array.some(function(currentValue,index,arr),thisValue)

          1

          參數說明:



          ?三、示例



          <script>

          var ages = [4, 12, 16, 20];



          function checkAdult(age) {

              return age >= document.getElementById("ageToCheck").value;

          }



          function myFunction() {

              document.getElementById("demo").innerHTML = ages.some(checkAdult);

          }

          </script>


          日歷

          鏈接

          個人資料

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

          存檔

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