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

          首頁

          今年超火的放置類AR設計,送你一份大廠出品的設計指南(下)

          資深UI設計者

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

          模型交互的設計分析及體驗建議模型交互的作用范圍及交互特點


          當用戶在真實環境的場景中穩定放下物體模型后,會有與模型進行進一步互動的需求。這類模型交互,通常會改變模型本身的物理屬性。例如:

          • 移動:改變物體在環境中的位置。
          • 縮放:改變物體的大小。
          • 旋轉:旋轉物體便于用戶不改變自身位置觀察物體。
          • 刪除/重置:讓模型在環境中消失或出現。

          基于目前的 AR技術和手機設備限制,目前的模型交互主要是通過屏幕利用二維交互驅動 AR 三維場景中的模型,從而與模型進行互動。屏幕二維交互設計,主要是利用二維手勢和界面控件去達到交互的目的。例如:

          • 按鈕/搖桿:在手機界面中設計按鈕、搖桿。
          • 手勢:目前技術支持的瞬間的手勢操作、連續的手勢操作。比如單指點擊、單指長按、雙指縮放、雙指旋轉等等,我們在日常使用APP常用的手勢操作。

          通過進行合理的分析設計,賦予這些手勢和界面控件具體的功能,去控制三維場景中模型的移動、旋轉、縮放。

          模型移動的交互定義及設計形式

          用戶會與模型進行互動,移動是最為常見的一種操作行為。通過在手機屏幕的手勢操作或按鈕操作,控制模型在現實場景中的位移。

          我們需要通過設計用戶使用常用并熟知的手勢與模型進行交互,利用二維手勢驅動三維空間中的模型在X軸、Y軸、Z軸的位移。

          放置模型后根據移動范圍X軸、Y軸、Z軸,與在現實環境的虛擬模型進行移動互動操作,設計手段包括手勢、搖桿的方式??梢詤⒖家韵挛宸N設計內容:

          • 單指按住左右移動:模型移動以屏幕有效的外側邊沿為限。
          • 單指按住前后移動:縱深移動遵循近大遠小的透視效果。
          • 單指按住上下移動:模型以中軸線上下移動,實際為改變模型所在平面位置,投影以暗示高度。(需注意,單指按住前后和上下移動不會同時出現。)
          • 點哪去哪:模型從原位置向目標位置移動。
          • 界面搖桿:若屏幕手勢交互有可能對控制對象造成持續遮擋,或者無法很好的完成復雜操作要求,可以通過屏幕控件滿足需求。

          模型移動并非需要X、Y、Z三個軸均開放,實際是根據模型位移交互的具體需求去選擇開放維度,并設計合理的交互方式去響應模型的移動??蓞⒖家韵掳咐?

          模型旋轉的交互定義及設計形式

          在現實場景中除了移動模型的位置,還可以通過旋轉360°來觀察模型細節,不僅控制模型還能把玩模型,賦予模型生命感,讓用戶更好地與模型進行互動。設計手段主要是針對手勢的設計??梢詤⒖家韵氯N設計內容:

          • 雙指順/逆時擰:一只手雙指順時/逆時擰旋轉模型。
          • 雙指向左/向右滑動:一只手雙指左右滑動。
          • 單指向左/向右滑動:一只手單指左右滑動。

          旋轉模型是為了全方位觀察模型,讓用戶更好地把玩模型。通過以下案例來進行說明:

          模型縮放的交互定義及設計形式

          移動模型、旋轉模型都是與模型互動,如果想深入了解模型則需要對模型進行縮放操作。設計手段包括手勢、滑動條、縮放倍數的按鈕??梢詤⒖家韵氯N設計內容:

          • 雙指擴展/捏合縮放:以模型的中心點等比縮放。
          • 拖動滑動條縮放:拖動滑動條在0-100%的范圍內進行縮放,當標尺拖動到極限時,則模型不再響應縮放。
          • 固定縮放倍數按鈕:倍數已經固定,限定縮放的大小。

          雙指擴展/捏合縮放是在二維手機界面被大家熟知的手勢操作,而滑動條、固定縮放倍數按鈕的縮放形式,在AR場景多用于游戲類產品,一般在模型放置時固定模型大小,進入游戲后不支持手持操作??梢詤⒖家韵掳咐?

          有一種特殊的情況,當支持放置多個模型時,如何設計呢?此時,需要通過點擊選中模型,模型進入選中態,與其他模型區分開,選中后進行的操作只作用于該模型,并支持刪除模型的功能。

          為了增加模型交互時體驗的豐富和細膩程度,模型交互(過程中、成功后)會有相應的反饋設計。包括:模型自身的動效、符合真實世界的視覺表現、音效、震動、語音反饋等。

          模型交互的設計原則和建議

          1. 根據模型需要定義交互自由度

          模型的交互程度,需根據特定模型的自身屬性/產品的類型去定義,并非所有可交互類型都需要涉及。跟核心模型體驗無關的交互可禁止或增加操作難度。例如科普類模型固定放置在平面后,需要便捷地旋轉以查看模型細節,但Y軸移動查看的需求不大,部分場景可考慮禁止Y軸操作。又例如游戲類 AR 模型位置相對固定,更多的體驗在于與固定模型進行的細部交互。

          2. 手勢設計簡單且符合直覺

          手勢設計優先使用通用的方式,若沒有通用的方式,則盡可能使用簡單和符合用戶直覺的方式進行設計。若違反該原則可能造成用戶的理解和記憶障礙,需要加重用戶引導,避免給用戶造成操作困難。

          3. 手勢設計按需搭配且不可沖突

          在設定模型的交互自由度后,可選擇合適的手勢進行搭配使用。但一種操作方式只可匹配一個交互結果,不可出現手勢沖突。手勢的搭配需要成套考慮。例如以下搭配:

          異常處理的設計分析及體驗建議

          1. AR中異常情況的定義及設計內容

          傳統APP設計存在異常情況,比如無網絡加載失敗,登錄發生錯誤等情況,那在放置類AR 中是否存在異常情況呢?

          在放置類AR 場景中體驗時,由于使用者操作不當,導致模型出屏或模型丟失,無法與其再進行交互,我們統稱為異常情況。還有一種情況比較特殊,當正在體驗放置類AR時,其它應用突然被喚起,再重新返回放置類AR 場景的處理。所以我們從交互設計層面需要對異常情況進行及時處理,正確引導用戶解決困惑,給使用者一個良好的 AR 體驗。

          在與模型互動過程中,會出現異常情況,需要通過一些設計形式可以及時地幫助使用者解決異常問題,設計手段包括:文字、動圖、語音、輔助圖形、重置、復位,具體運用根據實際設計需求而定??梢詤⒖家韵略O計內容:

          • 模型出屏:模型出屏后視覺線索引導用戶找到模型,可以搭配文字、動圖、語音等形式,按照設計場景來自由組合。
          • 模型丟失:當視覺線索引導未找到模型時,通過點擊按鈕將模型復位。按鈕可以常駐或非常駐。

          當發生模型出屏、模型丟棄復位的異常情況,根據產品類型和場景選擇合適的設計手段,解決用戶的困惑。結合具體案例以說明:

          在異常情況中有一些相對特殊的情況,第一種情況:體驗放置類AR時,手機來電后不得不離開,當再次返回時,根據技術能力來進行交互設計引導,保留場景及模型或引導用戶重新獲取平面建立AR場景。第二種情況:當進入AR場景后,模型是固定大小尺寸,在設計時,需要考慮讓用戶可以重新放置模型在新的位置,提供重置按鈕。

          游戲類、科普類設計時需要保留之前AR場景,有延續性的體驗,技術做不到保留,則需要重新識別平面再次建立AR場景進行體驗,如果支持放置多個模型的場景,建議不保留。當進入AR場景后,模型是固定大小尺寸,在設計時,要考慮界面上需要重置按鈕,讓用戶可以重新放置模型在新的位置。下面結合案例具體說明:

          此外,在AR內容體驗中也會發生丟失平面的異常情況。這里的異常處理可以使用話術準確告知用戶原因,還可以配以圖片、動圖、語音,更具象更清晰引導用戶解決問題。需注意與平面識別引導的設計形式保持一致性,若平面識別未使用語音,則識別失敗提示也不能使用語音,避免突兀感??梢詤⒖家韵略O計內容:

          • 純文字話術:通過簡單明了的文字正確引導用戶操作。
          • 圖片/動圖+文字話術:圖片/動圖詮釋文字的含義,幫助用戶理解如何操作。
          • 語音+文字話術:語音輔助文字,使信息更有效傳達,從而引導用戶操作。

          2. 異常情況的設計原則和建議

          模型出屏后需要及時引導用戶找到模型,避免焦慮感。

          模型丟失后需要通過設計形式的組合搭配,以操作便捷的交互引導用戶。

          建議在設計游戲類、科普類AR產品時,再次返回APP 需要保留之前的AR場景,保留延續性。

          注意如果進入AR場景時無音效和語音,則異常情況引導不能出現音效和語音,避免突兀感。

          平面識別失敗后需要及時反饋用戶如何操作,需注意設計形式保持前后一致。

          放置類AR的設計核心原則

          以上就是AR放置類交互節點的分析和設計建議的詳細內容。我們希望設計師能圍繞AR應用的真實場景,考慮到每個體驗節點的細節,結合上文提到設計建議,在設計過程中關注以下關鍵目標,為用戶創造更加友好和細膩的交互流程和體驗過程。

          • 清晰:傳達的內容清晰明了,不會產生疑惑或歧義。
          • 有效:能幫助用戶成功達到交互目標。
          • 流暢:無停頓感,過程一氣呵成。
          • 愉悅:用戶感覺愉快、無壓力。
          • 可控:可自主交互,過程反饋清晰,給用戶盡在掌握中的感受。

          希望通過我們提出的設計內容、設計原則建議能幫助到作為閱讀的設計師、開發者們,在日后的產品設計、交互設計中能讓用戶在放置類AR場景有更好的體驗,這也是我們編寫的目的所在,為AI科技盡綿薄之力。

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


          設計師都應該了解的Loading動畫知識

          用心設計

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

           

          Loading動畫,在現在的設計中已經是一個必須要考慮的系統元素,它能減緩用戶等待焦慮的心態,也能用來作為品牌透傳,增加曝光。

          那關于loading動畫相關知識,我覺得對于設計師來說是有必要去了解的,所以我找到了這篇優秀文章,讓大家能夠深入了解loading動畫,透過現象看本質,學以致用。

          圖片來源:Domaso

          沒有人喜歡等待

          在用戶心目中,優秀的應用、工具、網站都應該是制作精良且能快速響應他們需求的產品。

          舉一個真實的例子:最近我們新發布了一個用戶評價的應用,第一個版本并不完美,loading延遲在2-3秒。

          你猜怎么著?

          很多人認為這3秒是一個故障。在實際開發中,你可能要面對龜速的網絡,沒有優化的代碼,操作時間長或數據處理太多等問題。因此,App的運行速度可能沒有用戶預期中的那么快。雖然早期用戶可能會給你的產品第二次機會,但絕大多數人會立即退出它。

          除非你的產品界面對用戶的行為提供了明確的即時反饋。剛才發生了什么?是操作錯誤還是在等待服務器的請求?用戶需要等待多長時間才能正常使用這個工具或網站?用戶為什么要等待呢?

          讓我們一起深入了解Loading動畫:

          • loading動畫的歷史由來
          • 優秀loading動畫所具備的特征
          • 細節可以做出精彩
          • 簡單處理還是精心制作
          • 有用的工具和資源

          Loading動畫的歷史由來

          對于這種類型的反饋,設計師會使用進度條、loading示意圖、預loading、或旋轉器。它們向用戶解釋什么時間發生了什么或正在loading的過程,以減少用戶的心理焦慮。

          你覺得設計師是從什么時候開始考慮加上這種反饋的?

          我很驚訝的看到關于Nielsen Norman的一篇文章,提到響應時間和loading動畫是在1993年(參考1985年的資料):

          如果計算機無法提供快速響應,則應該以百分比的形式向用戶提供持續反饋?!綧yers 1985 論文,“計算機-人機界面百分比進度指標的重要性”】

          顯示進度的三個主要優點:向用戶保證系統沒有崩潰且正在處理他們的問題;告訴用戶還需要等待多久時間,讓用戶能騰出時間來做其他的事而不只是干等;甚至可以向用戶提供一些可以閱讀和查看的內容,減少等待的焦慮?!?Jakob Nielsen, on January 1, 1993

          自從Web 1.0以來,幾乎每個網站都有loading狀態,用戶可以注意到當頁面內容正在loading時,這些Loading動畫活躍的身影。

          在2007年的時候,網站的Loading形式大概是下面這張圖上的樣子:

          2007年時的Loading

          在那個年代,你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator (2009)這樣的工具來做這些 loading動畫。

          到了2010年,隨著CSS3的迅猛發展,出現了很多教程教大家如何做CSS3動畫,也能找到大量的loading 動畫預設包。設計師也可以在Ps cs5中做這種loading動畫,這個在10年前是非常流行的。

          在那時,Loading動畫更像是web的專屬問題,因為頁面loading確實是一個問題。在2010年的時候,很多Flash網頁都做了一些很有創意的loading動畫:

          30個創意Flash loading案例(https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/)

          漸漸地,設計師們開始不滿足于簡單的進度條和旋轉Loading,到2014年-2016年的時候,變得更加關注這塊的設計。所以,你能發現更多關于loading教程,免費的Loading設計資源,插件和開源項目。

          2016年出現的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)

          設計趨勢和方法已經發生了變化,但向用戶提供有效反饋的原則依然需要遵循。

          優秀loading動畫所具備的特征

          在一個完美的世界里,loading動畫應該:

          1、盡可能少的顯示給用戶

          如果你的工具或網站工作的足夠快,那就是非常完美的?;蛘咧辽僖沟盟鼈兊乃俣确嫌脩舻念A期,顯示好看的loading動畫只是一個緩兵之計,等待太久了一樣會惹惱用戶。所以,首先應該是解決內容的loading問題。

          2、給出具體時間

          它可以是一條簡單的文本信息,告知大致的等待時間,也可以是可視化的圖形來表示。總共上傳了多少文件?更新需要多少分鐘?已經進行到了什么階段?這些體驗上的設計細節都可以給用戶預期并減少焦慮。

          宇航員數據loadingby Cream M.

          3、告訴用戶為什么需要等待

          一些應用的loading過程,通常讓用戶不大容易理解。一個好的Loading動畫,應該要告知用戶等待的原因以及等待的背后軟件正在做什么:

          文件獲取動畫 by Vinoth

          讓我們說回我的案例,那個反饋工具軟件。當我們的等待時間超過1秒時,我們決定給這段等待時間增加一段解釋。動畫說明應用目前正在處理截圖資源,這清晰的表明,我們的工具沒有崩潰,它只是正在處理請求:

          好的loading動畫

          4、讓等待的過程不那么讓人無聊

          可以放一個有趣的動畫來吸引人,讓用戶的眼睛始終保持忙碌。

          動畫來源:Alex Kunchevsky

          5、減少用戶等待時間的心理感知

          這與上面提到的一點非常相關,如果你在等待的過程中發現了一些能夠吸引用戶注意力的東西,那么感覺上時間就會過得更快。它可以是一個引人注目的色彩搭配,有趣的想法,或者是一個什么特別的東西。

          蛋糕loading by Pierre Kleinhouse

          6、透傳公司品牌形象

          如果用戶在用你的應用或者網站時會有一段等待時間,為什么不機智的利用好這段時間呢?我不建議僅僅只是為了做loading而做一個loading動畫或者去在動畫里使用一些心理學技巧。我覺得最好是將品牌的聲音融入整個Loading動畫中,讓它成為一個非常重要的設計細節:

          BCG的車票應用動畫 by Antonin

          細節可以做出精彩

          雖然有些人可能會認為Loading只是一個很小的UI細節,但它其實也有許多類型和變化。一般來說,我把loading動畫分為幾類,進度條,無限循環的loading圖和骨架圖。

          進度條

          當可以明確loading時間時使用,進度條可以通過數字或視覺化的形式來表現。

          有數字進度的,有時也稱為百分比指示符。他們可以簡單直接,也可以很有創意,需要對你的用戶業務表達更有效:

          一個app loading頁 by Nguyen Tran

          你也可以找到有趣的進度條和循環動畫結合的loading圖。

          Loading動畫by Dragonlady

          進度條背后的主要思想是顯示一個操作將花費多長時間以及目前所處的狀態。根據UI需求的不同,進度條也可以是線性的,沒有百分比的形式。

          想想Gmail,它沒有顯示進度百分比,但是用戶同樣可以感覺到加載的進度。下面是兩個簡單而又創意的例子:

          Gamil loading和一個創意loading動畫 by  Allen Zhang

          循環Loading動畫

          當loading的時間是未知的時候來使用,它可以是默認的旋轉圖,也可以是一些創意動畫,顯示應用正在做一些事情。

          計算loading圖標 by Hoang Nguyen

          創意性loading動畫一樣可以與業務緊密相關,并幫助支持品牌發聲。請思考下那些應用會使用這種loading動畫?

          LittlePin Spinner by Daniel Sofinet

          無限循環動畫要求用戶在上傳或執行某些操作時等待,但不要求具體需要多久時間,它們可能會非常簡單或非常有創意。

          Loading cat by domaso. So cute!

          Infinity by Eszter Balogh. 看起來非常有趣,但是你并不想他們永遠不停下來。

          如你所見,如今的loading動畫不僅僅只是一個系統狀態的UI元素。

          骨架動畫

          骨架動畫展示了loading頁面的變化過程,你可以把它理解為開始是一些頁面占位圖,逐步加載上一些可見的圖片,文本和其他內容。

          這個詞最早出現在Luke Wroblewski 的文章中,Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設計師的支持,并在Facebook、Linkedln、YouTube, Google Drive 等用戶界面中得到了應用。

          舉個栗子,如果你使用的是網頁設計工具Figma,你會在頁面頂部看到一個進度條,同時還在逐步loadingUI:首先你會看到占位符,然后才是可用數據:

          Figma UI

          簡單處理還是精心制作

          除了這篇文章中所展示的一些優秀案例和Dribbble上的設計概念,在目前大多數應用中,你可能能看到還是一個默認的Loading。

          有一段時間,簡單的Loading被大眾所推崇,因為他們對于性能的影響最?。ㄓ绕涫菍τ趙eb)。使用默認的或開源的loading要容易的多,不需要設計師和開發花心思來設計和實現它。

          如果你正在開發MVP或者項目的第一個版本,那么使用簡單的或者開源的loading動畫更符合邏輯。在這個階段,即使把loading動畫做的再怎么有創意,也并不會對你的產品有多么大的幫助,如果它不能解決真正的需求。

          一些簡單的loading動畫案例

          有趣的是,在2016-2019年,我們可以看到非常多精心的loading動畫。注重細節,日益成熟的設計公司,更好的科技環境,更方便的設計工具,這些都使得loading動畫變得更加富有創造性。如果你瀏覽Dribbble,能找到非常多超贊的Loading動畫,所以這也成了展現自己設計能力的一種方式。

          即使在我們只有5人的初創公司里,我們也會考慮更好的用戶體驗,讓我們用戶等待的體驗更愉快。否則,我們做的反饋工具可能會失去用戶,沒有人希望失去用戶。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

          Material Design 之響應式柵格布局

          用心設計

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

           

          Material Design 響應式布局柵格適應屏幕尺寸和方向,確保布局的一致性。

          列、間距和邊距

          Material Design 布局柵格由三個元素組成:列、間距和邊距。

          內容放置在包含列的屏幕區域中。

          列寬是使用百分比而不是固定值來定義的,以允許內容靈活地適應任何屏幕大小。網格中顯示的列數由查看屏幕的斷點范圍(預定屏幕大小的范圍)確定,無論是移動設備,平板電腦還是其他尺寸的斷點。

          間距

          間距是列之間的空間,它們有助于分離內容。

          間距在每個斷點范圍內的值是固定的。為了更好地適應屏幕,間距寬度可以在不同的斷點處改變。更寬的間距更適合大屏幕,因為它們在列之間創建了更多的空白。

          邊距

          邊距是內容和屏幕左右邊緣之間的空間。

          邊距寬度定義為每個斷點范圍的固定值。為了更好地適應屏幕,邊距寬度可以在不同的斷點處改變。更寬的邊距更適合更大的屏幕,因為它們在內容的周邊創建了更多的空白。

          自定義柵格

          可以調整布局柵格以滿足您的產品和各種設備尺寸的需求。

          自定義間距

          可以調整間距以在布局的列之間創建更多或更少的空間。

          自定義柵格

          可以調整頁邊距,以在內容和屏幕邊緣之間創建或多或少的空間。頁邊距對每個斷點使用固定值。

          正文副本可讀性的理想長度是每行40-60個字符。

          間距和邊距

          在同一斷點內,間距和邊距寬度可以彼此不同。

          水平柵格

          Material Design布局柵格可以被水平滾動的觸摸UI自定義。列、間距和邊距從左到右排列,而不是從上到下排列。屏幕的高度決定水平柵格中的列數。

          在非觸控和web平臺,水平滾動的UI并不常見。

          可以定位水平柵格以適應不同的高度,從而為頂部的app欄或其他UI區域留出空間。

          斷點

          斷點是具有特定布局要求的預定屏幕大小的范圍。在給定的斷點范圍內,布局將根據屏幕大小和方向進行調整。

          Material Design基于以下列結構提供響應式布局。使用4列,8列和12列柵格的布局可用于不同的屏幕、設備和方向。

          每個斷點范圍決定每個顯示大小的列數、建議的邊距和間距。

          柵格特點

          彈性柵格

          彈性柵格使用可縮放和調整內容大小的列。彈性柵格的布局可以使用斷點來確定布局是否需要顯著更改。

          固定柵格

          固定柵格使用固定大小的列,具有流體邊距,以在每個斷點范圍內保持內容不變。固定柵格的布局只能在指定的斷點處更改。

          UI(用戶界面)區域

          布局由多個UI區域組成,例如側面導航,內容區域和應用欄。這些區域可以顯示操作、內容或導航目標。UI區域應跨設備保持一致,同時適應不同屏幕尺寸的不同斷點。

          為了提高設備之間的熟悉度,為桌面設計的UI元素應該以與移動UI一致的方式進行組織。

          永久UI區域

          永久UI區域是可以在響應柵格之外顯示的區域,如導航抽屜。這些地區不能重疊。

          持久UI區域

          持久性UI區域是可以隨時根據命令顯示的區域,或者它們可以保持可見。它們可以打開或關閉,出現或消失。當它們出現時,它們會壓縮內容和柵格。

          當持久性UI區域可見時,其可見性不受與屏幕上其他元素交互的影響。

          臨時UI區域

          臨時UI區域暫時出現,當它們出現時,它們不會影響響應式柵格。當它們可見時,可以通過點擊其區域中的項目或其區域外的任何空間來隱藏它們。

          當UI區域可見時,其他屏幕元素不是交互式的。

          原型

          原型是結構化布局,為布局、分層和陰影提供一致的方法。它們是一個起點,旨在在進行修改以滿足產品的特定需求。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

          做10年UX才能明白的9個道理

          資深UI設計者

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

          最近,我注意到初創企業和成熟企業都對研究熱情備增 。企業欣然接受這一觀點:富有意義的創新,需要把客戶作為復雜生命體來理解。

          這太棒了。

          我也反復聽過不少錯誤和模棱兩可的說法被反復提起。因此,為了幫助大家——因為我確實喜歡幫助人——我在這里介紹一份簡單易學的糾正理解偏差的小清單,希望能夠廣泛傳播(我很有信心,因為研究表明,讀者喜歡簡單易學的清單)。

          UXRen

          1、適應不舒適的感覺

          “我只知道一件事,就是我一無所知?!薄K格拉底(Socrates)

          我們在重視回答和害怕提問的環境中長大。在學校里,我們因為回答正確而得到獎勵;在工作中,我們因為提出好的點子而得到獎勵。難怪很多人會找理由避免做研究,特別是定性研究。顯得無知所產生的焦慮在心中滋長。定量的東西至少有標準化測試所帶來的熟悉感,令人舒適。保持研究型思維模式意味著要認識到偏差無處不在,確定性只是一種錯覺,任何答案的有效期都是短暫的。因此從長遠來看,好的問題更有價值得多。只有你承認自己沒有答案,才能問出好問題—也才會了解更多。

          UXRen

          2、先提問,再做原型

          “如果我們只測試開瓶器,可能永遠不會意識到客戶更喜歡螺旋蓋的瓶子?!?br /> —維克多·隆巴迪(Victor Lombardi),《設計敗道:來自著名用戶體驗案例的教訓》(Why We Fail)

          我們理所當然會急于制作原型,測試原型。原型就是答案,可觸可摸,即使只是紙上的草圖。這樣做很舒服,比只是問問題舒服多了,即便這無異于燒錢。對于任何想要立竿見影地證明自己價值的人來說,只問問題,就像那只洗棉花糖的浣熊一樣,事與愿違。

          太早制作原型的風險在于,這會把資源投入去回答一個無人問及的問題,同時還忽略了機會成本。測試原型可以幫助你優化好點子,但不會告訴你是否在解決恰當的問題,并且,也很容易將原型的亮點誤以為是點子的質量。不論如何,研究報告中的亮點也容易被誤認為是具有價值的洞察。

          提出恰當的問題,不會讓不好的點子得到保留和維護,反而會幫助你更快地將它們識別和清除。你只需要有足夠強大的內心去擁抱錯誤。

          (如果你正在想“嘿!這對我的團隊會有幫助”,我們會非常樂意去你的辦公室呆一天,確定你是否準備Mule Design Studio合作。)

           UXRen

          3、了解目標

          除非你事先知道做某項研究的動機,否則提問就是浪費時間。你必須公開發誓:你的動機不是“為了證明自己是正確的”。這是每個人內心隱藏的目標。參看第一點。

          通常,出于對研究的一腔熱情,團隊往往會在目標不明確、不一致時就開始跟客戶對話。然后,他們會感覺花了寶貴的時間,但卻不知道怎么去應用自己了解到的東西來提供解決方案,因而沒有什么可供展示的。于是就有了這樣的說法:“我們去年做了研究,但卻是浪費時間?!庇谑?,又回到了建立原型和測試原型的舒適圈。又或者,他們對聽到的內容有不同的理解,結果又因誰對誰錯更加爭論不休。

          在大公司、大機構中,有時大家都有心照不宣的目標:“表現出我們在盡力做研究,不過還是讓產品負責人做他想做的事吧?!边@聽起來可能有點嘲諷意味,但通過跟許多在資金充足的研究部門的資深研究者交談,我了解到,盡管他們撰寫的報告相當精彩,但對決策的影響卻為零。承認這個事實,是阻止它發生的第一步。

          完美絕佳的起點,是把你的目標設置成:“我們需要確定水準,快速理解他人的觀點?!辈灰谑潞笕我馓砑悠渌繕恕?

          只有當你確定了目標,才知道自己需要了解什么。而在你選擇怎么回答之前,你必須知道自己的問題是什么。

          UXRen

          4、在重大問題上達成一致

          “從本質上講,所有商業活動都是在人的行為上下賭注?!?br /> ——《“厚”數據的力量》(The Power of ‘Thick’ Data),《華爾街日報》

          問題的質量決定了結果的用處。提出錯誤的問題跟用原型解決錯誤的問題如出一轍,它們都會給你一些你不想要的東西。從優先級最高的問題開始。確定這類問題的辦法是:如果你在這些問題上的假設搞錯了或忽略了,風險會最大。

          最重要的研究問題是你想要知道什么,而不是你在訪談中要問什么。事實上,直接拋出你的研究問題往往是最糟糕的方式。人們往往不知道或者不愿承認他們真實的行為,但人人都很擅長編造答案。

          設計研究總是和用戶研究混淆?;卮鸶邇炏燃壯芯繂栴}的方式多種多樣,跟有代表性的用戶對話只是其中一種。你所需要知道的,并非都是與用戶相關。

          通常,最關鍵的問題是:“基于證據,我們對客戶、競爭、內部能力真正了解些什么?”問法各有不同。這可能是一個非常難以完全誠實作答的問題,但又得在短時間內回答。

          UXRen

          5、時間和金錢永遠是夠用的

          當研究被定義為設計之外的一種工作,人們就很容易把收集證據當作額外負擔,找理由不做。

          通常,團隊必須獲得權威人士的許可,才能進行研究工作。提問本質上是對權威的挑戰。如果你曾經和一位不同意為百萬美元項目開展定性研究的領導合作,那么問問自己,這位領導購買一輛價值5萬美元的汽車前會不會自己做做研究?口頭上提出反對意見,心里面往往是害怕自己的主意被破壞,被證明錯誤,或者不那么行之有效。

          如果你的目標和高優先級問題明確直白,不管時間和預算如何,你都可以了解到一些有用的信息。比如在線研究,午餐時間外出觀察,測試其他產品的可用性,發揮創意。

          只要不是做調查就行。

          UXRen

          6、不要指望數據能改變想法

          “當一個人要靠著對某件事的不理解來拿薪水時,要讓他理解這件事是很困難的?!薄蚱疹D·辛克萊(Upton Sinclair)

          即使研究已經證明了這一點,但訓練有素的專業研究者還是往往很難接受。如果你習慣和重視某種特定數據類型的同事一起工作,那你可能很難去說服那些不假思索就否定這種觀點的人。而且,可能會因為數據不足而讓某人覺得自己的專業能力受到了侮辱。

          收集證據的全部意義在于基于證據做出決定。如果這些證據破壞或者反駁了決策者所信奉的想法,他們就會找理由去否定或忽視這些證據。這也是定性研究者在一些工程師驅動的組織中處境艱難的核心原因。即使問題需要的是更具描述性的答案,熟悉且擅長數字的人卻想要用數字表達的答案。

          因此,在嘗試用數據去影響決策之前,你必須了解你的同事和領導的個人特點和他們所處的環境,了解他們是怎么做決定的。

          UXRen

          7、接受混亂帶來的不完美

          “我們善變,愚蠢,記憶力差,且有自我毀滅的天賦?!?br /> ——蘇珊·柯林斯(Suzanne Collins),《饑餓游戲:嘲笑鳥》( Mockingjay)

          人類的生活是混亂的。人類如果沒有遇到問題,就不需要產品和服務,我們也就不會有工作。在真實、混亂的世界中為人們找出解決問題的最佳途徑需要一些時間,并在一定程度上放開控制。雖然有必要采取一種合乎道德的、足夠嚴格的方法,但并不存在絕對純凈的定性環境。明確的目標和好的問題可以承受各種不可預知的情況的考驗。

          人們希望開展舒適有序、顯得專業的活動,這導致他們不恰當地使用焦點小組、可用性實驗室、眼球追蹤、調查和光鮮的報告等方式,但其實,不那么正式的研究可能會更加有效。

          將證據納入設計決策,本身就是一個增強了解的過程。你永遠不會找到正確的答案并解決問題。如果過程行之有效,你就會在做決策時信心備增。

          UXRen

          8、致力于合作

          每個從事相同工作的人面對的都是相同的現實。做出產品決策的人需要對信息完全知情。如果知識只存在于一個人的頭腦中(除非你在倫敦,而那個人是你的出租車司機),那么知識本身有多好并不重要。

          一組人制作報告,而另一組人收到報告后置若罔聞,便是沒有合作的研究。如果這樣工作,即使是最用心的團隊也會讓知識溜走。而如果合作中缺乏證據,則意味著每個人都心照不宣地默認:勝出的是個人偏好。這兩種方法都不是最有效的。

          最有效的方法,是讓產品開發人員直接參與提問和回答。這樣做也很有趣。實現這一點的方法有多種,依具體公司或機構而定。

          提問關鍵在于建立一個共享的決策框架,以便做出更快更好的決策。我曾經就此召開了一場研討會,它帶來了改變。

          UXRen

          9、找到糾正你的偏差的伙伴

          “我們可能對顯而易見的事情視而不見,也可能對自己的盲目視而不見?!?br /> ——丹尼爾·卡尼曼(Daniel Kahneman), 《思考,快與慢》(Thinking Fast and Slow

          你做了一些工作,找到了一些答案?,F在你需要確定它們的意義。在解釋研究結果時,合作變得尤為重要。每個人都被偏差所困擾,而且自己還無從察覺。我們所看到的是最符合我們現有信念的。因此,我們必須參考外部標準(包括預先設定的目標和問題),一起工作,互相檢查。

          這與你有多聰明或消息多靈通無關。一旦你接受了這一點,只要你在一個心理上有安全感和相互尊重的團隊中工作,識別出偏差就會是一場有趣的游戲。

          維基百科(https://en.wikipedia.org/wiki/List_of_cognitive_biases)提供了不錯的認知偏差清單,可以和認知偏差圖( Cognitive Bias Codex  )一起打印出來貼在墻上。

          也許,這就叫正確的設計。

          UXRen

          總之,當我們在討論設計研究時,實際上是在討論基于證據的設計。創作、批評和探究都是設計過程中不可分割的一部分。將它們分裂開來,就會因無知、自負或恐懼而錯上加錯。

          設計是一種價值的轉換。在實現任何產出之前,你必須先問問人們真正需要什么、看重什么,問問你希望從中得到什么樣的商業價值回報。

          只要你采取道德的方法,誠實對待你的所見所聞,朝著富有價值的目標前進,那么,你所提出的問題和你找到答案的方式都無關緊要。正確的方法并非只有一種,正確的答案也并非只有一個。享受不確定性吧!它永無止境。

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

          UI設計師除設計外所需要具備的能力

          用心設計

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

           

          我們已經或多或少看過一些優秀作品,也知道了一些設計方法和技巧,了解到了一些相關的理論知識,自己也做過一些項目或者是練習,總體來說都掌握了一定的設計能力;但是設計師想要擁有更多的資源(指薪資、工作機會等等)或者是想職業進階,除了一定的設計能力之外是遠遠不夠的。

          設計師還需要掌握更多的能力,才能讓自己成長提升,并且擁有他人無法取代的價值。我通過自己的經歷和整理收集,發現目前如今不同階段的設計師對待同一個問題不同的角度以及特征,如下圖所示:

          不難發現,當大家還是初級設計師的時候,剛剛接觸設計行業,我們更多的是去觀察、學習、臨摹一些“好看”的作品,熟練地使用設計軟件和提升設計技法,最后的是自己做出來的產品是否漂亮美觀,最重要的是客戶/老板是否會買單,而自己無法清晰地定義自己設計的產品價值,也不能很好表達出自己的想法和觀點。所以產品走向會根據老板/客戶的水準來定義,輪到自己表達只是支支吾吾,最后只是做為執行無休止地改改改。一切由老板/客戶說的算,無法清晰地了解自己產品的定位,缺乏表達觀點的能力,缺乏一定的審美,作為執行角色無休止加班成為了初級設計師最大的痛點。

          而經過一段時間的學習和工作后,逐漸轉型成為中級設計師后,有了一定的設計技法和軟件使用熟練度,有了一定的審美和視覺表現能力,平臺規模合作團隊也逐漸變大,基本能滿足老板/客戶/業務方提出的需求。開始學習一些設計相關理論,開始拆解自己或別人產品的交互架構,更多地開始關注用戶體驗起來,也會融入品牌元素到自己的產品當中,為自己的產品做情感化設計和制定設計規范,會組織一些專業語言和業務溝通以及陳述自己的產品。但是如何從眾多的設計方案中找到最優的方案來解決問題,如何更多地體現產品的價值,產品利益鏈如何形成商業閉環,如何在團隊/設計圈體現自己個人的價值,如何提升自己的個人影響力,成為了中級設計師這階段的痛點。

          通過三年五年的沉淀,成為高級設計師后,形成了自己獨有的一套方法論和設計思維,能熟練地拆解每款產品和定義產品,視覺表現層已經完全能駕馭,能清晰地闡述自己的設計思路和結論,產品用戶體驗層也有了一定的經驗和方法,在團隊中或者設計圈有自己一定的個人影響力,更多地會在工作中思考產品帶來的社會價值和商業價值,會用不同的思維去思考產品的各個維度,找到最優的方法解決問題,會把固有的利益鏈轉換成商業閉環,提升用戶轉化率等等。而這階段的設計師的主要痛點就是面臨著團隊管理和溝通,朝著資深設計師和設計專家轉型,以及如何為平臺帶來的利益價值考核等等問題。

          資深設計師或者設計專家這里不談,因為這階段所思考的問題大都和設計無關了。通過上述不難發現,每個階段的設計師都有各自的特征和痛點,雖然其中都包含著設計相關的能力,但是隨著階段的進階設計相關的能力占比逐漸變少,更多的是其他的能力增長,所以設計師除了設計以外其他能力的重要程度顯而易見,那么我們來看看除了設計以外,設計師應該掌握其他什么能力。

          思考能力(Thinking)

          思考能力作為首要的能力,不僅僅是設計師,其他職業一樣需要這個能力,這里所涵蓋的面太廣泛了也說不了,這里主要針對三點來講:核心競爭力、批判思維和分析能力。思考分為兩個層面:自我層面的和業務層面的思考;自我層面的思考就是要通過深度剖析自我,發掘自己處于哪個階段,有什么長處和不足,自己想要什么,需要往怎樣的方向發展;而業務層面的則是要需要思考業務產品的結構框架、用戶體驗、商業價值等等等等,前者更加關注自身的成長,后者更加關注業務的成長。

          · 核心競爭力

          核心競爭力就是有與別人不一樣的競爭力,想要做到別人無法替代你的地步,就要有自己個人核心的競爭力。如果你會做一張 Banner,我也會做一張 Banner,你會搞一個頁面,我也會搞一個頁面,那么你這個人就成為了可有可無的螺絲釘,唯一的優勢就是年輕能拼能熬,等你熬銹了老了,隨時可以換一顆新的螺絲釘來取代你的位置。所以不管什么階段,我們要深度剖析自己,認清自己的優勢劣勢,并采取相應的措施。

          剖析自己的核心競爭力給大家一個大致思路,從異樣性和共通性入手。自己周圍或多或少有團隊,條件不足的話現在網絡各大平臺都很發達,也能融入一些設計圈子中,和不同的人對比尋找自己的核心競爭力。異樣性是當前的優勢,找出其中的優點,不斷地放大深造,變成你的核心競爭力,而和別人不一樣的缺點找出來摒棄改正;共通性就是和大家一樣的地方,可以看作是偽劣勢,因為諸多共通性中總有你最喜歡最擅長的一個,將它單獨拿出來不斷擴大,逐漸就拉開了差異性,慢慢就轉化成你的核心競爭力了,而大家都有的缺點,你把它糾正了,就成為你的核心競爭力了。

          來舉一個栗子:小王是一名工作了3年的設計師,研究生畢業,由于公司的原因平時工作最多接觸的就是一些運營圖 banner,也有過很多品牌 VI 的經驗,逐漸自己在視覺表現上有自己一定的見解和想法,也更加感興趣做視覺表現的東西。

          那么他的共通性就有:1.工作3年之久;2.研究生畢業;3.視覺表現能力強也更感興趣;4.做過品牌 VI 的經驗;5.有自己的見解和想法。

          由此推斷出小王的共通性是:1.工作經驗豐富;2.視覺表現力強;3.有想法和見解;

          異樣性是:1.學歷優勢;2.品牌 VI 相關經驗

          那么小王可以保持自己學歷優勢下,可以繼續深造品牌 VI 相關,逐漸轉型成為高學歷的品牌 VI 設計師,那么學歷和很多品牌 VI 的經驗就是小王的核心競爭力;也可以通過熱愛去學習 C4D 動效等軟件繼續增強自己視覺表現力,配合自己豐富的工作經驗逐漸轉型成高學歷的創意藝術設計師,然后通過將自己的想法見解通過分享會、文章等模式產出,將這一點升級成個人影響力,那么綜合下來更加優秀的視覺表現力、豐富的工作經驗和個人影響力也會逐漸變成小王的核心競爭力。

          只有通過不同維度深度地剖析自己,找到自己的共通和異樣點,清晰自己的價值定位,然后制定出適合自己成長目標和方案,不斷放大增加自己的核心競爭力,成為不可取代的那個人。

          · 批判思維

          批判思維是一名設計師必須具備的思維能力,我們不僅僅要學會批判別人的作品,還要學會自我批判。這里不是指無腦的批判(之前遇到過一個實習生剛進到公司里,就把之前所有人做的東西全部批判了一遍,重點是只說產品好看與否,完全不顧及平臺一致性商業價值用戶體驗等等,最后只批判卻沒有任何實質性的建議,頗有一種指點江山的感覺,然后后面再也沒見到過他了),這里是指在自己通過批判別人或自我的方案,不斷地優化糾正,最后產出最優質的方案,這是批判思維的出發點。

          不同的人有不同的經歷,看待問題的維度是多種多樣的,所以一個方案產出后,通過不同的人思考后的結果是最好的解決方案。這也印證了波克定理:只有在爭辯中,才可能誕生最好的主意和最好的決定。所以當設計師接到產品交互給到的原型圖后,不要上手就做圖,要通過自己經驗和想法去看待原型圖,然后提出更加優質的方案進行討論,如果你的方案更加優質,那么不僅是產品的質量得到了優化,你個人的經驗也得到了沉淀,下次遇到相同的場景就可以拿出來復用,直到遇到更好的方案。

          唯一注意的事項就是注意溝通的方法,這里后文會提到,比你資歷高的人提出的觀點更加具有建設性,在毫無頭緒沒有創新的情況下就聽比你更有經驗的人的;遇到比你資歷低的人提出的觀點也不要嗤之以鼻,抓取其中有用的點,沒準是一個新的思維方向;總之,有數據說數據,沒數據舉案例,沒案例講觀點,如果連觀點都沒有的話,照著大佬說的話做就是了。

          · 分析能力

          分析能力也是設計師必須掌握的能力之一,無論你是創意藝術設計師,還是用戶體驗設計師,譬如一張 Banner 氛圍傳遞或者文案排版,譬如插畫的配色或者場景搭建,譬如產品的布局結構或者用戶體驗,這些都需要有一定的分析能力。通過拆解改版/競品/參照產品等,明確產品的最終目的、商業價值等等,有了這些準備后才能對自己的產品進行設計或者改版。而分析產品可以以用戶體驗五要素的角度來分析,分別是:戰略層、范圍層、結構層、框架層和表現層,具體相關的文章站酷、PM 社區、36氪等等都搜的到,這里不再細說;之前在分析產品的時候發現有些產品強行套用這五個要素進去不適用,因為有些產品的頁面它不存在戰略層或者范圍層的東西,所以我總結歸納了三個角度來分析產品。

          案例就用淘搶購 v4.1 頁面(已上線)來講,三個角度主要是:表現層、用戶體驗層和價值層。表現層主要就是產品頁面的配色、布局結構之類的;用戶體驗層就是產品的心智透出、交互流程之類的;價值層就是產品深度的價值體現了,比如商業價值、社會價值和用戶留存率之類的;大致可以套用這個公式去思考:為什么這里會用這種表現形式,它想要表達怎樣的效果,它要達到怎樣的最終目的,如果是自己去設計會怎樣做。舉例:因為淘寶規范為卡片式設計,在視覺表現上要統一,所以淘搶購 v4.1 的業務目的是統一視覺樣式,并且它需要給用戶產生一種“商品很便宜快去搶購再不搶購就沒了”的心智認知,它的最終目的是引導用戶去商品 Detail 頁面購買商品和提高商品的點擊率,這樣通過協調關系形成平臺、商家和用戶之間的利益鏈商業閉環。

          想要提升自己的分析能力除了項目和時間的沉淀外,更多的時候需要自己平時的積累,站酷等平臺有很多優秀的作品,作者會把自己設計的分析和思路寫出來,我們可以看看別人的想法是否值得借鑒,然后再去分析一下,最后思考如果是自己的話會怎么去做;其次做設計的時候帶著同理心去做,把自己當作用戶去看待自己的產品,通過不斷的積累提升自己對產品的敏銳度,將一些產品的隱性問題挖掘出來;另外可以多看一些好的設計分析書,比如《U一點料1、2》、《以匠心 致設計》等等,將學到的分析方法代入自己的產品或作品中,逐漸分析能力就增強了。

          規劃能力(Plan)

          規劃能力是日常工作生活中所需要掌握的能力,主要講業務規劃和職業生涯規劃,業務規劃能力應對的是我們工作中處理業務所需要具備的能力,而職業生涯規劃應對的是我們整個人生職業生涯規劃的能力。掌握這個能力后前者會給我們帶來業務處理效率上的提升,后者給我們帶來整個人生有益的好處,所以這個能力非常重要。

          · 業務規劃

          很多時候我們還在有條不紊地處理某個需求,心想著下班去吃個飯買水果回家洗澡睡覺的時候,突然來了一個緊急的需求,就把我們整天的計劃給打亂了,火急火燎地處理完這個需求,然后又把之前的需求做了,最后加班改改改導致整個計劃泡湯了。工作中遇到這樣的情況很多很多,處理方法有很多種,最經典的就是四象限法則,把事情的緊急重要程度分為:重要且緊急、緊急不重要、重要不緊急和不重要且不緊急四個象限。

          很多時候都是道理我們都懂,可是一遇到情況依舊手忙腳亂,根本原因是沒有認真地把它代入自己的工作生活當中。畫一個象限表,把自己今天所要處理的事務陳列出來五分鐘都不需要,一開始可能因為事情不多就沒堅持下去,一旦養成習慣后,將來遇到多種緊急情況突發的時候就能認識到這個習慣給你帶來的好處了,所謂養兵千日,用兵一時就是這個道理。

          在做業務需求的時候,可能會碰到有些需求價值高,有些需求價值低但又很緊急,不知道怎么處理之間的關系,我們依舊可以套用四象限法則來制定一個四象限表:價值高且緊急、緊急但價值低、價值高不緊急和價值低不緊急。什么是價值高的需求呢,就是能讓你有充分思考和分析的需求,比如某個頁面的改版;價值低的需求則是相對不怎么需要思考和分析的需求,比如根據已有的規范改個顏色之類的。在時間的優先級前,價值高的需求大于價值低的,最后剩下的就是價值不高且不緊急的。因為我們無法拒絕需求,需求來了肯定要是做的,工作不是愛好可以有多種選擇性,但我們要學會將需求分解成不同類型的,對自己有成長沉淀的需求那可以作為最高優先級去處理,留夠充裕的時間去思考分析,然后沉淀經驗穩定提升。

          · 職業生涯規劃

          這個在大學期間就學過相關的課程,只不過當時并沒有太深的感觸,而是等工作以后才知道這項能力的重要性,它相當于關系著你每個階段的里程碑,當成游戲中的成就任務也不為過,還是自己設定的成就任務。某個階段想要達成什么樣的目標,想要獲得怎樣的成就,都是要自己一步一步慢慢規劃并且完成出來的。

          因為我遇到過幾個非常努力的人,努力到讓人心悸的地步,每天除去吃飯睡覺工作時間就是在努力學習,到最后還是很迷茫,不知道做什么,不知道如何體現自己的價值。這類沒有目的的努力的人是很可怕的,他們努力得沒有錯,但是這樣下去沒有成效的努力會讓他們覺得努力并沒什么用,然后逐漸開始產生抱怨、泄氣和放棄等負面情緒。

          舉個例子來說明:如果你剛畢業,給自己制定的長遠的職業生涯規劃是在工作3~5年后進到大廠工作提升自己,那么所拆分下來就需要一些項目工作經驗和優秀的作品,再拆分下來就是如何做出優秀的作品,細分到最后就是作品當中的元素,比如圖標排版布局之類的,那么就制定一段時間內的練習就按照各類元素去做,比如圖標畫兩個星期,APP 設計排版布局練習兩個星期,插畫練習畫兩個星期,這樣堅持下來就組成一個完整的項目作品了,以此類推。有了規劃目標并且在自我驅動的推動下,逐漸實現自己的職業目標。

          執行能力(Execute)

          執行能力是指自我在工作&學習中執行的能力,執行能力為一個設計師最主要的核心技能,一切的能力都凌駕于這個基礎之上;哪怕你再能說會道,能賦予你的設計各種價值,能給予你的設計各種環境,但這些都是第二步,第一步就是你的設計表現達到期望值,如若第一步稿子都不好看,那么沒人愿意會聽你敘述的。前文已經提及到了,設計師在初級至中級階段的時候大多數注重的就是表現手法,如同學說話一樣,表現手法可以看作是漢語拼音,然后才是組成一個個字,最后組成一句完整的話語。

          · 自我執行力

          提升自我執行的能力我大致分為兩個步驟:看和做。

          首先先來說看,看其實是提高自己審美的一個過程,通過看一些平臺網站的優秀設計作品,久而久之自己的審美能力才會提高,然而看分下來一種是帶有目的性和不帶有目的性的。不帶有目的性地去看是在自己有空余或學習時間,通過瀏覽設計網站采集學習一些你覺得好看的作品;采集是一個很好的習慣,我覺得是每個設計師必須養成的習慣,把自己平時覺得好的表現形式收集起來,等到某一天需要用到的時候,腦海中對當前場景會有一定的印象,再根據印象去尋找采集到的作品,能很大程度上節省自己腦爆的時間,哪怕沒有采集或者文件丟失,自己的腦中大致也會有一個雛形方向。而帶有目的性地看是指針對某一個模塊去搜集整理,比如今天我需要做一個關于內容的模塊,那么我就會去尋找一些做內容的產品設計,搜集到的各類關于內容的表現手法,然后結合自己的經驗和分析,找出最適合自己產品的一種。

          僅僅看是不夠的,在看過之后我們需要動手嘗試才能算真正地沉淀自己所看到、學到的東西。做設計最忌諱的就是“眼高手低或者眼低手高”這種狀態,有了審美但表現手法跟不上,或者說表現手法有但是審美跟不上。一定要在自己吸收了一定的審美后,通過自己的嘗試去做出來,才能真正的沉淀到自己的大腦當中,變成自己的表現手法之一。最后通過大量的積累,結合對商業需求的判斷形成設計策略,才能從容應對不同的產品需求,哪怕你今天做金融相關的產品,還是明天做電商的產品,后天又改做工具類產品,一旦形成了自己不同的應對策略,才能做到真正意義上的游刃有余。

          很多時候我們只關注到魚的大小、魚的肉質是否鮮美那20%層面的東西,往往忽視了80%最重要的捕魚技巧和方法;看到的只是產品是否好看,交互是否流暢,體驗是否良好,沒有往更深層次地去想這個產品的商業背景是什么,設計師為什么要這樣設計,如果換做自己的話會去怎么做;畢竟我們所做的一切訓練、思考都是為了更好地為工作服務,就如同脫離了商業背景以后,有些設計就只是單純的炫技,并沒有解決問題的價值,而設計師的工作核心就是解決問題,所以我們要結合作品的背景、價值等因素,去看、去做、去學相應的表現手法才是自我執行的核心所在。

          表達能力(Express)

          表達能力是設計師除去執行能力外第二重要的能力,小到平日里的溝通對接,大到述職晉升面試,都離不開表達能力的支持。有些設計師經常面試怎么都過不了關,我本以為是作品集的問題,可是看完之后作品方面完全沒有什么問題,具體了解后才知道是在面試過程當中不知如何闡述自己的作品和思路或者在闡述過程中由于緊張等因素導致表達斷斷續續不順暢,面試官就會覺得這個人不靠譜然后 PASS,明明做圖很優秀卻輸在了表達上,這種情況就很憋屈。在廣告公司中,一個 LOGO 或者廣告視頻往往只是贈品,出售的卻是這個品牌VI的故事;如果一個設計師不懂得怎么闡述自己的業務,不懂得怎么推銷自己的方案,不懂得拓寬自己的個人影響力,就單純的只會執行作圖的話,那么這名設計師是不合格的。網傳有一個段子“一個公司的工資排名規律:用 Word 的不如用 Excel 的,用 Excel 的不如用 PPT 的,用 PPT 的不如講 PPT 的,講 PPT 的不如聽 PPT 的,聽 PPT 的不如聽匯報的,聽匯報的不如決定的,決定的不如簽字的”,由此可見表達能力在職場中的重要性。

          · 業務表達

          業務表達是指在自己工作的過程當中,對自己的設計方案進行闡述。大部分設計師會遇到一個困擾,當設計稿做完以后就不知道怎么去表達自己的設計理念,被業務方/面試官/老板提出質疑時,比如:“你這產品的設計為什么要用紅色?”、“聊天信息這塊兒為什么要用小氣泡的樣式?”,往往不知道怎么去說,有一種當時就覺得好看所以這樣做了,也沒有去想那么多的感覺,或者其他優秀的作品/競品是這樣做的,我也就這樣做了;那么結果往往就是自己的專業性遭到質疑,然后轉變成業務方/老板進行設計主導,形成“改來改去還是第一版好”這樣類似的惡性循環中。

          那么如何提升自己的業務表達能力呢?首先設計師要提升在設計領域的專業度,通過學習吸納設計相關的知識,然后代入自己的設計當中去試著闡述設計稿,準備工作先做到位,收集相關的數據,掌握相對應的設計理論,先說服自己再去說服別人。比如:“通過色彩心理學得知,紅色能帶給人興奮、激動、熱情等積極情緒,而我們產品所需要透出的氛圍是熱情的、積極向上的,相對應地激發出用戶的正向情緒,所以我這里使用紅色?!?、“根據近半年數據研究得出,產品聊天信息模塊使用過程當中女性用戶占總用戶數的85.9%,而小氣泡樣式相對比其他樣式更能迎合女性用戶群體的喜好,通過 A/B 測試結果得出,使用小氣泡樣式后數據上漲了15%左右,所以聊天信息模塊整體改版成小氣泡的樣式。”

          通過自己前期的準備(設計理論知識補充、用戶調研、數據測試等),將自己的設計理念表達出來,主導整個設計的方向,必要時可以理性地堅持自己的設計方案,畢竟無論是老板還是業務方,出發點都是希望自己的產品能做到最好最完善,只要你給出數據支撐和專業性的建議,他們一定都會采納接受的,而最后你的能力和專業性也得到了對應的認可。

          · 書面表達

          我本人是強烈建議在能力達到一定程度的時候,通過寫作來檢視自己成果的。因為往往很多東西自己是明白的,但是寫出來讓其他人看懂是另外一種能力了。自己一段時間的職業經驗總結、對設計的見解看法、自己獨特的設計思維、一本書的讀后感等等都可以通過書面表達出來,某個知識理論難的不是學習,而是將它教授出去,因為只有你想要把某件事說明白,闡述得其他人都能看懂,那么首先你要對這件事理解得很透徹,然后通過自己的經驗和見解,轉化成通俗的語言說給別人聽。最好的狀態就是與你同樣級別的人你能與他用專業術語對話,級別比你低的人你能把理論轉換成他能聽懂的語言進行交流,這樣才算是對理論概念理解透徹到位。

          大家也明白,學習最有效的方法不是輸入而是輸出,設計也是一樣的。在學習某種理論方法后,通過書面表達出自己的見解和想法,并代入到相應的例子當中,做到舉一反三才能算是真正的學到了這個知識點。

          · 述職

          述職一般出現在晉升報告或者面試當中,“諸侯朝于天子曰述職,述職者,述所職也?!笔雎毧梢哉f是工作報告中的總結性報告。向自己的老板述職是為了升職加薪,向面試官述職是為了獲取更好的工作機會;工作成果有了,但是述職做不好的話,在老板/面試官眼里你就做了無成效的工作,述職沒有想象的那么簡單,但是也沒有那么難,很多人都會經歷兩個述職的誤區,這些誤區我經歷過也看到過,所以總結出來警醒大家。

          一、把述職當作流水賬

          把述職當作流水賬是很多新人容易犯的錯誤,當述職的時候,有的人就會陳列出自己今年做了多少多少工作:“我今年改版了 XXX 模塊”、“我設計了 XXX 的首頁”、“我通過調查研究自主推導改版了 XXX 模塊并落地成功”等等,這時候你的老板/面試官會心里會想:“所以呢?”“然后呢?”,工作結果固然重要,但是決定你能否晉升/錄用的,不僅僅是把你做的工作進行流水賬般的描述就夠了的。

          二、把述職當作邀功大會

          這個誤區相對來說更高端一些,述職的時候有的人常常會像邀功一樣:“我今年通過改版了 XXX 模塊,導致用戶量從50%上漲到了80%”、“通過調查研究改版了 XXX 模塊,最后通過 A/B 測試發現數據上漲了5%,最后落地全部實施新的設計方案”,這些看似闡述了產品的背景、自己做了什么以及結果,但是往往來說還是不夠的,以上統統可以歸為無效述職。

          你做了什么重要嗎?沒那么重要,重要的是你帶了什么樣的價值。述職所需要你做的,老板/面試官所想要了解的就是:分析為什么產品之前數據會那么低?你是通過那些方法得出解決方案的?為什么那么多種解決方案里你要選擇這一種?你這樣的方法能否沉淀成體系?如果換一個人來按照你的方法做是否可以得到同樣的效果?有效述職也就是決定你能向上一步的,是把你在工作中的感性認知上升到理性規律的歸納總結的能力體現。

          · SCQA 模型

          SCQA 模型是一個“結構化表達”工具,是麥肯錫咨詢顧問芭芭拉·明托在《金字塔原理》中提出的,而這個模型可以套用在業務表達、書面表達以及述職任何場景當中;S是指場景(Situation),C是指沖突(Complication),Q是指問題(Question),A是指解決方案(Answer)。

          無論你是在向業務方/老板闡述方案做工作匯報,還是自己寫作梳理都可以用到這個模型;S場景陳述的通常是大家都熟悉的事、普遍認同的事、事情發生的背景。由此切入既不突兀交代了事情背景又容易讓大家產生共鳴,產生代入感,然后引出沖突C。Q是其中發現的問題,最后A給出相對應的解決方案,是對Q的回答也是接下來我們要闡述的內容。整個結構其實是形成良好的溝通氛圍,然后帶出沖突和疑問,最后提供可行的解決方案。

          我們熟知的廣告詞經常使用這個套路:

          得了灰指甲——描述場景【S】

          一個傳染兩——發生了沖突【C】

          問我怎么辦?——提出問題【Q】

          馬上用亮甲!——給出解決方案【A】

          這個模型無論作為演講的開場白,作為向業務方/老板闡述設計方案的開場,還是作為一篇文章的序言都是屢試不爽的。S場景需要讓對方產生共鳴,必須讓對方產生一種:“是的,你說的好有道理”的反應,只有場景被認同了才能繼續故事的發展,這時候打破你給對方營造的安全感,制造C沖突,相繼提出Q問題,共同確認面臨的一個問題,然后你給出你的A解決方案,而這個解決方案就是你整個敘述的核心和中心思想。

          比如你要向業務方/老板闡述你的設計方案,就可以這樣來描述:“在 XXv2.0 版本上線后(交代場景),收集了近半年以來的數據發現,女性用戶相對減少了20%(發生沖突),為什么會減少20%的女性用戶(提出疑問),根據我的調查研究發現原因是改版后整個產品色調偏男性化,由于我們產品的受眾群體大多是女性用戶,男女比例為1:3,所以在 v.2.1 的改版中我將整個產品色調改為偏女性化的方向(給出解決方案)”。

          同樣,我寫這個章節的思路就可以這樣理解:設計師們工作中通常會面臨述職、面試以及寫文章等情況(交代場景),但是往往很多設計師不知道如何去表達,思路也不是很清晰,導致述職無效、面試失敗等情況(發生沖突),要如何避免這種情況發生?如何鍛煉自己的表達能力?(提出疑問),那就要多通過 SCQA 模型在生活工作中去練習表達(給出解決方案)。

          生活能力(Lives)

          最后是生活能力,設計不是工作的全部,工作不是生活的全部,我們應該過好自己的生活,產品設計都是從生活中獲得靈感和啟發的,我們如何對待自己的生活,我們就會得到怎樣的反饋。多陪伴下自己的家人、培養一個興趣愛好、保持學習新鮮事物的動力等等,成為一個有趣的靈魂。往往設計師能從多樣化的生活中發現靈感和啟發,也能從生活中找到不同用戶的痛點和感知;如何做一名好的設計師,就是帶著同理心去做設計,如何帶著同理心做設計,就是將自己當作用戶,而用戶是融入到生活中的。下面我就來例舉兩個通過生活中的啟發改變產品設計的例子。

          · 用戶擁有感

          在購買星巴克的時候,為什么服務員要把顧客的名字寫在杯子上呢?難道僅僅是為了分辨嘛?像其他奶茶店一樣貼一張打印好的便簽不就好了么?去宜家購置家具的時候,為什么要讓顧客自己親手組裝家具?可口可樂為什么可以定制自己城市的易拉罐?因為這一切都是要給用戶塑造擁有感,人是一種很不理性的生物,只要先拿到一個東西,就會覺得自己擁有這個東西,就不想放掉它了,這就是擁有感最根本的示范。從心理學的角度來說這被稱為稟賦效應,意思就是我們對于自己所擁有東西的價值往往會看得更重。這就是為什么小時候玩的玩具、收集的畫冊、穿的衣服都已經沒什么用了,我們還要留著當紀念的原因。因為我們的人性對于擁有感非常執著,對于自己得到的東西非常迷戀,當我們覺得要失去它的時候,會有一種損失感,覺得很不舍,會覺得心里很難受,這就是稟賦效應在我們身上發生了最明顯的效果。

          而這樣的營銷策略被用到產品設計當中,例如前段時間很火的軟件 Zepeto,每個人都不一樣的生成圖片洗刷著我們的朋友圈;例如每年年末的賬單、網易云音樂總結等等,賬單它只是一份賬單,根據不同用戶生成不同的賬單,也就賦予了不同的意義;又例如各種 H5 性格測試生成的分享卡等等,這些都是產品設計中從生活中營銷案例中汲取經驗的體現。

          · 線下導購轉線上

          每當我們去到商場線下商店的時候,導購員和我們素未謀面,但是卻可以通過我們的大致年齡、穿著、性別等因素推斷我們需要什么樣的產品,然后向我們推銷對應的產品,如若剛好觸動我們的需求,于是我們就會發生購買這個行為。生活中線下導購的方式也被運用到線上導購的產品中,同樣平臺和用戶素未謀面,可是可以通過掌握大數據,分析用戶近半年、近一個月的購買和瀏覽商品的數據,結合相對應季節等因素推送給用戶所需要的產品。比如我平時經常瀏覽一些潮牌個性的衣物,現在正值冬季,想買一件冬季穿的棉衣,那么當我打開淘寶的時候,系統會推送一些潮牌大衣等冬季衣物在首頁,我正好有這個需求又符合我的口味愛好,自然而然就會點進去購買了。

          有一條創業準則是這樣說的:“如果有點兒閑錢,還有點時間,但又找不到商機,最好的辦法就是去鬧市、電梯、小區人流量最高的那個大門口,端杯茶,靜靜的聽人們抱怨?!?,谷歌、蘋果公司的設計思維首當其沖的就是帶著同理心去設計、去制定設計策略,同理心來源于生活,而這一切只有設計師把自己的生活經營好,才能從當中獲得啟發和感悟,然后代入自己的設計理念當中,設計出真正能根本解決問題的產品。

          其次偶爾會從網上看到或者聽說 XX 設計師猝死,XX 設計師檢驗出 XX 疾病等等,每每看到此類消息都會感到痛心,工作不是生活的全部,如果連自己的工作和生活都處理不好的話,那么說明這個人生活能力真的很糟糕。如果一個人整天筋疲力盡打不起精神,那么他的工作會做得好嘛?所以在這請求大家合理安排好工作時間,勞逸結合,多鍛煉身體,多花些時間陪伴父母、家人,這樣才能帶著健康的身心去工作,從而取得更好的工作成果,形成一個良性的循環。你怎樣對待生活,生活就會怎樣對待你。

          總結

          以上是我總結的除設計之外設計師需要掌握的技能,如果將這些比喻成大樹的話,設計能力是大樹的根部,是設計師立足的根本;而執行能力則是這根樹的枝干,是支撐設計師全部的基礎;表達能力是樹枝,撐起設計師的整個世界;思考能力則是樹葉花果,是設計師綜合的產物;大地就是生活能力,當設計師的產物(物質、地位等)“落地”時,滋養著大地,大地越“肥沃”,越能催生出茂盛的枝葉;而規劃能力就是一位辛勤的園丁,什么時候需要澆水,什么時候需要修剪枝葉,都是由園丁來承擔。

          想要跑贏別人,首先得跑過那個跑得最快的自己。





          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

          漲姿勢!設計師應該要了解的9種常見中國傳統紋樣

          資深UI設計者

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

          設計師應該要了解的9種常見中國傳統紋樣,制作傳統主題的海報、網頁、PPT都能用到。

          云雷紋

          祥云紋

          八寶紋

          云頭紋

          壽字紋

          萬字紋

          唐草紋

          環帶紋

          纏枝紋

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

           

          階段性版式心得分享灬

          資深UI設計者

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

          隨著時間流逝,我們會對不同的人事物有新的理解,比如那時聽歌聽旋律,現在聽歌聽故事。
          希望文章對現階段的你有所幫助 —



          版式的重要性就不多說了, 一個頁面的排版,基本就能看出一個人的設計功底了,而且不管你是從事vi、畫冊、電商、平面、網頁、ui都是離不開版式的,一手好的版式非常重要。其實版式可以簡單理解為,在一個限定好大小尺寸的畫面里,把信息進行有視覺層次的展現,基礎的字體圖片選擇應用等就不多講了,這里主要講5點,下面開始正文 ~



          1.畫面切割,由大而小  


          常見的分割有,左右、上下,而我則喜歡不規則分割(大體看是不規則,其中還是有著某種規則),我的習慣是先把畫面分割好,然后去填充對應內容,這樣就非??焖倭?,實際上和海報合成之前的靈感草圖是一樣一樣的,下面我就拿幾張近期的海報舉個栗子。



          因為上圖是海報,我都是以純圖片為背景的,就是在已有的空間上去分割出文案的位置,可能表達的不是很透徹,下面我以網頁來舉例子。


          那么開始的就是大版面分割了,頁面做出來是新穎特別呢還是穩定常規?基本就有感覺了,具體版面怎么分割,完全看個人,只要比例協調,版塊與版塊之間銜接舒適就ok。



          上圖左邊頁面結構,看起來就會顯得穩定常規一些,而右邊則新穎一些,當然分割不止是大版面,由大而小,大版面分完了就需要從店招開始依次往下進行小版面的分割,最后去填充內容,具體填充手法就看個人設計功底了,下面實際舉例,左邊為我創作之前的版面分割,大到頁面布局,小到某個地方的排版,都是事先分割好的。


          也有這種情況,就是按照事先切割好的版塊設計途中,有了更好的想法,就會稍作改動,但是大體基本是沒有什么變化的(有時候為了修改一個版塊排版,結果把下面的排版都給改了去迎合這一個排版,都是淚)




          2.了解版式中的點、線、面 


          那么什么是點、線、面呢? 

          簡單來講,單個元素、文字或者圖形都可以是點,多個點相連就形成線,多個點、線在同一個平面內相交形成面。


          單個或者極小范圍內的圖形元素,稱之為點,點在版式中常用于,點綴、裝飾、平衡頁面輕重。


          線是點運動的軌跡,多個點的鏈接則形成了線,線常用于強調突出、鏈接、分割


          擴大的點,或者多個點線則形成了面,常用于背景、區域劃分



          下面舉個栗子,大家可以找找圖里的點線面分別是哪里,有什么作用。



          應該不難看出,單個的虛化漸變都是點,單個的字母  數字也是點,點在這里起到的是裝飾點綴作用,中間的大面積漸變是線的體現,下面一排文案相連也是線的體現,線在這里起到的是鏈接視覺作用,最后這張圖里多個點、線的存在就形成了面。




          3.信息表達分主次


          層級混亂是導致畫面失衡的重要因素,客戶看圖會看得云里霧里,這就注定了是一張失敗的圖,什么是層級,就是在一個畫面里,一眼能看出來主次,信息層級的清楚區分會給人舒適的瀏覽體驗,仔細觀看優秀設計師的作品,你會發現,好的作品會在瀏覽舒適的同時, 引導著你的視覺瀏覽順序,我們來看看案例。



          我們來簡單看看問題,首先是上圖,產品和文字之間的距離沒有拉開,信息層級區分不夠明顯,沒有明顯的視覺瀏覽順序以及舒適的體驗,設計本身就是一個細節見證品質產物,如果一個頁面里多個地方出現這種無層級的信息,則問題就大了。



          那么信息分層的方法有哪些呢?


          方法1:改變透明度,弱化其他信息的透明度來突出你想要突出的信息


          方法2.拉開信息間距,把主題放在視覺焦點的位置展示,一般為中心,或者視覺瀏覽順序,即左右,或者上下

          方法3:改變字體粗細,通過調整字體粗細來進行弱化和突出

          方法4:顏色,通過色彩來區分主次,黑白灰我稱為無色調,不算顏色。

          方法5:大小,通過改變字體或者圖片大小來進行弱化和突出

          如果結合多種方法,那么信息層級的區分就會非常明顯了,下圖用到了居中,顏色,大小,透明度。


          4.頁面平衡


          也是很重要的一點,平衡這個詞的概念非常廣泛,各種平衡,自然、物理、藝術、心理、色彩、空間等等都包含平衡,而在設計中,平衡也是不可缺少的一個構成要素,畫面不平衡就會導致看起來不穩定,在設計中,更多的是體現色彩與體積的平衡。



          那么頁面為什么需要平衡?


          我個人理解為,構成版面的所有元素,不論是文字還是圖片,都是有份量的,比如面積大小、顏色深淺、我們在排版的時候要做到各種元素在畫面中的占比達到和諧,畫面才會平衡,那我們來看看常用的平衡有哪些。



          4.1  色塊體積占比平衡



          上圖中,非常明顯的平衡就是上下兩個色塊的面積占比基本一致,給人一種平衡感,色塊平衡多用于平衡頁面重心,讓畫面看起來更加穩定,但是上圖因為圖片反著的,所以才會給人一種另類的感覺。



          4.2  位置空間的平衡


          上圖就是空間平衡,沒有用整個圖片素材填滿整張圖,而是文字部分和圖片各占據一半,形成平衡。



          在來看個栗子



          上圖兩張基本一致,上圖就是移動了一下文案和裝飾英文的位置,以及加了根條線,卻給人不一樣的感覺,可以想想為什么。




          5.對齊


          關于對齊真的是非常基礎的一項內容,也是非常重要的內容,放在最后來講也是希望在提醒大家一遍,畫面里的信息一定是遵循著某種規則而擺放,絕對不是隨意擺放,有位大哥說過,隨意擺放經不起時間推敲,有規則擺放則可能流芳百世 ~ 下面我們來看看對齊的例子。


          你都看到哪些地方對齊了?  這樣產出的頁面,是否更具說服感呢,元素切勿隨意擺放,讓每一個元素位置都滿足為什么。




          總結:


          版式中包含非常多的設計理念,從字體圖片的選擇、網格系統的規范、點線面的認知、視覺平衡感、信息分層等多項知識點。今天沒有講柵格,因為我覺得我理解的柵格還不是很系統規范,等后續稍微成熟點在做分享吧,希望本篇文章能對現階段的你帶來幫助,感謝瀏覽,有問題歡迎留言探討。

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

          日歷

          鏈接

          個人資料

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

          存檔

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