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

          首頁

          工作經驗|設計資產庫中的組件,應該如何命名?

          seo達人


          設計系統的基礎工作之一就是給組件命名。這個工作看上去并不起眼,似乎還有些機械重復,但實際上卻需要具備嚴謹的邏輯和對細節的錙銖必較。

          組件的命名方式并不唯一,你可以按照你對組件構成的理解,來規劃你的命名邏輯。下圖以我工作中用到的一款組件庫為例,呈現出組件的命名邏輯:

          圖片

          可以看到,我們在命名時分了 5 個層級,依次是類別,元件,模式,等級,狀態。

           

          1、類別

          類別指的是組件最本質的作用和寬泛的應用場景。通常我們會分為:通用、導航、數據錄入、數據展示、反饋等幾個類別,類別以及其中的部分組件如下圖所示:

          圖片

           

          2、元件 / 組件

          元件即具體的、單一的組件,比如 “導航” 這個類別下就包括了固釘(返回頂部)、面包屑、下拉菜單、導航菜單、分頁、頁頭、步驟條等幾個組件:

          圖片

           

          3、模式

          目前的模式通常會分成暗黑模式(Dark Mode)淺色模式(Light Mode)兩種,但隨著對用戶體驗的不斷重視,未來也有可能會出現 “護眼模式”、“色盲模式”、“高對比度模式” 等模式。

           

          4、等級

          等級的分類和數量由組件的基本功能和在產品的具體需求決定,有些組件比如 “分頁器”、“面包屑” 通常只有一個等級,在命名的時候就可以不體現;而有些組件如 “按鈕”、“標簽頁” 、“導航” 則會有多個等級:

          圖片

           

          5、狀態

          狀態即組件在交互時的變化樣式,通常包括普通(默認)、懸?。☉彝#?、點擊、失效(禁用)等,根據不同組件的特性,也可能會包括危險提示、聚焦等狀態。

          根據上述這個規則,我們就可以對所有組件進行有規律的命名,下圖中組件懸停狀態的命名為:Navigation/Sidemenu/Light/Primary/hover

          圖片

          圖片

           

          組件命名的注意事項

          在給組件命名的時要注意以下幾點:1. 含義清晰

          組件的命名能夠清晰的體現組件的性質和狀態,不要僅僅使用數字 1、2、3 來代替狀態。舉個例子,你的產品品牌色主色名稱的結尾應該是:“……brand/primary”,而不是 “brand/blue1”,或 “brand/ #E60326”。

          除了色板,我們對于組件也是要盡量清晰的描述組件的類別和狀態,而不是它的外觀。比如按鈕在“懸停狀態”的時候是淺藍色,你命名到 “懸?!?nbsp;的狀態就可以了,這時你的按鈕名稱后半部分應為:“……/button/primary/hover”,不需要提及按鈕的顏色變化。

          這種命名結構可以最大程度上確保組件與系統一起發展,如果當主按鈕的顏色發生變化,你也不必在整個系統和組件中更新其名稱。

           

          2. 遵守邏輯

          命名結構要有邏輯,名稱根據一定的邏輯結構進行推導,以便于當組件有新增、或組件庫有革新時可以順暢的添加和修改。

          由于不同組件的等級和狀態千差萬別,建議你也可以先梳理出上文圖中的命名邏輯層級表,按照表單進行工作,簡單清晰,也方便團隊的其他設計師一同協作。

           

          3. 良好習慣

          養成良好的工作習慣,建立標準的工作流程和規范,包括:

          • 用斜杠 “/” 分隔單詞
          • 不要隨意添加空格
          • 僅使用小寫字母
          • 盡量使用英文單詞
          • 修改內容后及時同步給團隊等等

           

          在公眾號后臺回復 “組件”,會看到更多與之相關的干貨講解。如果你還有其他與組件相關的問題,歡迎向我提問。

           

          原文鏈接:長弓小子(公眾號)

          作者:元堯

          轉載請注明:學UI網》工作經驗|設計資產庫中的組件,應該如何命名?

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          如何快速制作3D樣機-作品包裝神器

          seo達人

           初識操作界面 

          先來看一眼這款神器的操作界面吧,無需安裝,在線版更方便。軟件界面簡單易操作,基本沒有什么學習成本。(溫馨提示:如果英語不好的同學可以使用谷歌瀏覽器自帶翻譯)

          圖片

           

           

           

           樣機模型選擇 

          軟件里面為大家存儲了手機、筆記本電腦、臺式電腦等基礎模型供選擇,可以獨立使用,也可以疊加選擇到畫板中進行組合創造。

          圖片

           

          除了樣機模型以外,也提供了一些裝飾元素,比如一些操作手勢和設備零部件等,方便設計師進行自由創造。

          圖片

           

          當然,還有更多各式各樣的模版,傾斜的組合模版、各種顏色搭配的組合模版、各種手勢的組合模版等等。方便一些基礎薄弱的同學可以直接選擇使用,也是非常的便利。

          圖片

           

           

           強大的操作界面 

          了解了各類預存的資源后,黑馬哥帶大家看一下軟件的操作界面。非常的簡單易懂,基本一看就會。

          當我們選擇好基礎樣機模型之后,可以通過左側操作欄調整樣機的顏色、位置、透視角度、大小等。點擊上傳可以選擇自己設計好的界面替換到模型中,畫質還是很高清的。

          圖片

           

          下方就有類似于圖層的操作,可以管理多個組合樣機模型,復制、隱藏、刪除等操作。

          圖片

           

          在畫板底部也有一些常規的功能操作,可以進行調節。比如畫板的背景色、視角、陰影設置等。

          圖片

           

          在畫板右側可以對整體的燈光進行設置,滿足我們環境渲染的需要。調節的方法也非常簡單,大家可以動手嘗試一下。

          圖片

           

          當然,如果覺得通過各種參數調節透視比較麻煩,你也可以像操作 3D 軟件一樣,直接在畫板中操作 X、Y、Z 軸來隨心所欲的創造,是不是很酷呀!

          圖片

           

          好了,說了這么多相信大家能夠上手了,更多的功能操作就留給大家啦!希望這款神器可以帶給你作品包裝的新大陸,創造出自己滿意的設計效果。

          3D樣機神器網址:
          https://things.morflax.com/

          溫馨提示:僅作為學習交流,勿做他用。

           

          原文地址:黑馬家族(公眾號)

          作者:黑馬青年

          轉載請注明:學UI網》如何快速制作3D樣機-作品包裝神器

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          用動效創造可用性:動效設計的基本原理

          seo達人


          在用戶界面中,動效不僅僅是一種視覺裝飾,而是一種強大的力量,它可增強產品參與度并擴展設計交流的范圍。

          本文給大家介紹了十二項最基本的動效設計原理,這些都適合用于UX/UI設計項目中,是非常有用的運動原理,建議收藏反復食用。

           

          原理一:緩動 Easing

          緩動效果模擬了現實世界中對象隨時間加速或減速的方式,它適用于所有運動的元素。自然界中沒有東西是從一點呈線性地移動到另一點。現實中,物體在移動時往往會加速或減速。我們的大腦習慣于期待這種運動,因此在做動畫時,應利用此規律。自然的運動會讓用戶對你的應用感覺更舒適,從而產生更好的總體體驗。

          線性動畫

          沒有任何速度上的變化的的動畫稱為線性動畫,如坐標圖所示,運動的曲線成直線狀態。這種動畫效果往往顯得很僵硬,不自然,讓用戶覺得不協調。一般來說,應避免線性運動。

           

          緩出動畫

          運動的開頭速度很快,結尾處逐漸減速的動畫稱為緩出動畫。運動曲線呈拋物線狀態,緩出動畫最適合界面里面的動效,快速的入場給人反應很快的感覺。

           

          緩入動畫

          和緩出相反,緩入動畫是開頭慢結尾快,這就像自然落下的球體一樣,速度越來越快。但是,從交互的角度來看,緩入可能讓人感覺有點不自然,因為結尾很突然;在現實中移動的物體往往是減速,而不是突然停止。緩入還有讓人感覺行動遲緩的不利效果,這會對網站或應用的響應速度給人的感覺產生負面影響。

           

          緩入緩出動畫

          把緩入和緩出曲線連接在一起,就是完整的緩入緩出動畫,它的運動過程可以想象一輛汽車從起步到停車的動作,可以實現比單純緩出更生動的效果。由于開頭慢、中間快和結尾慢,動畫將有更強的對比,會讓用戶感到愉悅。

          因此,緩動原理實際上是使動畫不再那么尖銳或生硬的過程。

           

          原理二:變形 Transformation

          變形是由一個形態變成另一個形態,這種形變是動畫里最引人注目的。通過元素形態的轉變,告知用戶元素的狀態或作用發生了改變。

          例如這個下載動畫,下載完成后變形為按鈕,其實是符合用戶預期的。這種無縫轉換,可以提高用戶的認知度,提

          升了動畫的連貫性。

          在動效中,利用擠壓變形原則能夠喚起用戶的主觀記憶。是剛性的還是柔軟的,通過物體運動的變形狀態就能很好的體現出來。

           

          原理三:克隆 Cloning

          當元素被克隆時,可表達出元素與元素之間的某種連續性。在此原理中,如何讓物體的出現和離開具有連續性、關系和過渡,是信息準確傳遞的關鍵。

          例如這個發布按鈕,點擊它會創建多個新對象,引導注意力,非常清晰的表達了他們之間的關系。

          還有這個運動健康頁面,在添加練習項目時,從主按鈕克隆生成一系列練習項目,選擇完成后原路返回。

           

          原理四:覆蓋 Overlay

          利用覆蓋原理能讓原本有限的空間得以延伸,用以顯示額外的可見元素,補償了用戶體驗中的單一統一視野或“客觀視圖”。覆蓋原理在UI設計中常用于列表橫滑,通過覆蓋,隱藏相關操作,以減少視覺上的干擾。

          在某種程度上,作為設計師,“層”的概念是顯而易見的,不言而喻。我們用層來設計,層的概念被深深地內化了。但是,我們必須小心區分“制作”和“使用”的過程。

          作為不斷參與“制作”過程的設計師,我們要非常熟悉我們正在設計的物體的所有部分(包括隱藏部分)。然而,作為用戶,那些不可見的部分是根據定義和實踐,在視覺和認知上隱藏的。

           

          原理五:偏移和延遲 Offset & Delay

          偏移和延遲原理是表明元素之間的層級與關系,在新元素入場時利用偏移和延遲讓信息或界面元素按照秩序進退場,定義對象關系和層次結構。

          在上面的示例中,浮動操作按鈕 (FAB) 轉換為頭部背景。數據圖表在時間的延遲下依次出現,暗示用戶這里的信息與其他元素之間的區別,吸引用戶注意力。

           

          原理六:遮罩 Masking

          遮罩是決定元素變化的結果是什么,通過暫時使對象顯示和隱藏,以連續無縫的方式轉換,保持了敘事流程的效果。雖然對象本身保持不變,但因為它有了邊界和位置,這兩個因素決定了對象是什么。

          例如這個轉動的咖啡杯,借助遮罩,通過改變logo的位置和吸管的朝向,造成杯子在自轉的假象。

          在上面的例子中,音樂封面改變了邊界形狀和位置,但沒有改變內容。轉換發生在用戶執行操作后激活,是相當巧妙的技巧。

           

          原理七:父子關系 Parenting

          父子關系是將界面元素關聯起來的重要原則,創建出空間和時間層次關系。它最適合作為“實時”互動,例如拖動列表順序時,其他信息會同步跟上。

          回想一下,很多元素屬性都可以創造這種聯動的繼承關系,例如不透明度、位置、旋轉、縮放、形狀、顏色等。

           

          原理八:數值變化 Value Change

          文本和數字的變化是如此普遍,以至于我們忽略了它們,而我們卻沒有給它們帶來區別和嚴謹來評估它們在支持可用性方面的作用。

          數字和值表示現實中正在發生的事情,既可以發生在實時活動中,也可以發生在非實時活動中。它可能是時間、收入、速度、游戲得分等。當我們使用動態的數值變化時,它激活了一種“神經反饋”,用戶會覺得自己與這些數值有關聯的。如果這些值是靜態的,就感覺與現實的聯系會減少。

          數值的變化在各類金融理財和日歷APP中經常出現,數據的動態表達和交流可能會對數據的價值產生影響;如上圖中的數值的動態變化,讓用戶感知到自己可能有能力影響到數據,提升了參與活動的意愿。

           

          原理九:蒙層 Obscuration

          蒙層與原理四的覆蓋類似,只不過蒙層帶有透明屬性,它擋住了后面的信息,但又沒有全擋住。iOS中常見的毛玻璃效果就是如此,它讓用戶意識到正在操作的對象,還有另一個世界。拓展了Z軸的層次結構,補償用戶體驗中的單一視野。

           

          原理十:視差  Parallax

          當用戶滾動時,在視覺平面中創建空間層次結構。其目的是為了建立各元素的層級關系,移動速度更快的交互式元。對用戶來說顯得更接近,較慢的非交互式元素,會退回到背景顯得更遠,從而更好把內容和環境區分開來 。

          設計師可以利用時間本身來創建這些關系,告訴用戶界面中的哪些對象具有更高的優先級。用戶不僅認為界面對象現在具有超出視覺設計中確定的層次結構,而且現在可以利用這種層次結構,讓用戶意識到設計之前掌握用戶體驗內容。

           

          原理十一:多維 Dimensionality

          維度是將界面的元素多維化,使元素看起來像可翻轉的,可折疊的,浮動的。可以使不同的UI元素實現無縫的過渡銜接,它通常以折紙維度、浮動維度和對象維度這三種方式來呈現。

          此外,維度原理克服了視覺平面中的分層悖論,其中缺乏深度的物體存在于同一平面上,但出現在其他物體的“前面”或“后面”。

          折紙維度可以被認為是“折疊”或“鉸鏈”的三維界面對象,它由多個元素組合成“折紙”結構,隱藏的物體在空間上仍然可以說是“存在”的,即使它們不可見。

          浮動維度為界面對象提供了空間起源和離開,使交互模型直觀且具有高度敘事性。常見的“3D”卡片就是通過這一維度來實現的。

          對象維度會產生具有真實深度和形式的維度對象,可以看到,雖然在2D層,元素卻可以3D視角呈現真實的維度。

           

          原理十二:平移與縮放  Dolly & Zoom

          平移與縮放是電影概念,指的是與相機有關的對象的運動,以及畫面中圖像本身的大小從遠景平滑變化到特寫鏡頭(反之亦然)。

          在某些情況下,無法判斷對象是否正在縮放。可能是在在 3D 空間中向著相機移動,也許是相機在向對象移動,又或者是對象自身在放大縮小。以下三個示例說明了可能的情況。

          鏡頭平移:被拍攝物保持靜止而鏡頭移動或鏡頭保持靜止,而被攝物體進行遠離或接近鏡頭的前后移動。

          鏡頭縮放:鏡頭與被攝物體在位置上保持靜止,而被攝物自身進行縮放。

          縮放:是指視角和對象都沒有在空間上移動,而是物體本身在縮放(或者我們的視野正在縮小,從而導致圖像放大),這向觀看者傳達了附加界面對象在其他對象或場景“內部”的信息。

          移動還可以結合維度原則,從而產生更多空間和深度體驗,并向用戶傳達當前視圖“前面”或“后面”的其他區域或內容。縮放允許無縫轉換 – 實時和非實時 – 支持可用性。在創建空間心智模型時,Dolly & Zoom Principle 中采用的這種無縫性非常強大。

          以上,便是有關動效設計的十二條基本原理,希望能給你帶來一些啟發。

           

          參考資料

          https://developers.google.com/web/fundamentals/design-and-ux/animations/the-basics-of-easing?hl=zh-cn

          https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

           

          原文地址:站酷

          作者:印跡_

          轉載請注明:學UI網》用動效創造可用性:動效設計的基本原理

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          用戶規模測算: 為用戶增長設立目標

          seo達人



          通過問題定義、拆分成計算公式、公式中的每個指標可被量化賦值:

          1. 自上而下法,也被稱之為「從供應端出發」,從產能方面,比較適合供給端存在瓶頸,供<求,例如下雨天不好打車,用戶需求遠遠高于司機供給,只能通過司機能提供多少供給去測算單量。
          2. 自下而上法,也被稱之為「從需求端出發」,從用戶需求方面,比較適合供給端能滿足用戶需求的情況,供>求。

          按照這類方法的特點是:

          1. 偏于宏觀方面的估計;
          2. 測算方法相對成熟;
          3. 測算速度比較快,測算精度上有待不足。

          測算精度的問題主要是基于每一步計算過程都是數量級的估算,導致顆粒度比較粗,但企業中一般存在相對精確的數據,因此可以使用市場規模測算的方法做出相對精確的測算,本文著重介紹市場規模測算中的自下而上法在企業中的應用。

           

          Chapter One .
          用戶規模測算的使用場景?

          對于公司來講,產品上線之后,通常需要設立用戶增長目標,設置過高的目標往往難以達成,過低的目標通常過于容易達成,進行用戶規模測算可以為用戶增長提供適當的參考范圍。

          1. 對于不同的產品階段都可以使用,比較推薦新產品上線階段,這時候往往還沒有那么快去設立增長目標,這時候業務方對于業務增長的信息較為模糊,通過用戶規模測算可以設置一個較為清晰的目標和數量級。
          2. 在制定年度規劃階段,對于未來的增長目標不確定,可以通過此確定量級。

           

          Chapter Two .
          為什么不直接用數據庫里面的數據去預測?

          這個問題確實值得被考慮,而且在大數據分析領域中,也有各種模型預測,為什么不用數據分析模型去進行,而使用調研去獲得相應的數據,如果數據層面有相應的行為數據可以進行相對準確地預測,則也可以數據模型預測,比如電商、快銷品等。

          實際上,除了行為數據之外,還有用戶態度數據,比如需求情況、購買意愿、購買偏好等,這些很有可能無法通過數據庫數據得到,因此可以通過問卷進行推算。

           

          Chapter Three .
          測算的流程是怎樣的呢?

          圖片

          先來劃分一下市場:

          • 潛在市場:這個潛在的需求有多大,
          • 可服務市場:有多少需求已經被滿足了,滿足需求的形式不限。
          • 可獲得市場:有多少需求被我們滿足了。
          • 獨占市場:有多少需求是別人無法滿足的,只使用我們去滿足的。

          圖片

          如何去獲得相應數據呢?

          我們通過問卷抽樣,來確定每個切分市場所代表的部分,然后按照問卷抽樣推算總體的情況。

          這個總體可以分成:域內總體和域外總體,總體由用戶導流來決定,比如如果是一個新產品的孵化,一般會從域內先去導流,通過域內的流量能做前期的產品價值點驗證,再逐步拓展。如果是領域有明顯差別,需要從域外導流,那么后續的用戶增長目標大概率由域外向域內的流量或者是線索。

           

          第一步:通過問卷得到需求和使用數據

          根據目標設計問卷問題,在總體用戶中進行問卷投放,投放問卷得到相應占比。

          圖片

           

          第二步:獲得總體大盤的相應數據

          如果是域內導流的產品,則總體數據既是大盤數據(特別地:抽樣期間的大盤數據);如果是域外導流的產品,則總體數量可以選擇市場占有率計算。市場占有率的計算方式,可以去第三方平臺投遞問卷,經過計算得到相應的數據。

           

          第三步:計算產品數據

          根據總體大盤數據和問卷相關比例,計算產品日活(highcase~lowcase)

          • highcase,屬于最大需求量
          • basecase,屬于某產品滿足需求的情況,可以作為基準線,basecase可以
          • lowcase,屬于某產品優先滿足需求的情況,獨占市場的份額

          圖片

           

          第四步:計算細分需求量、使用情況等

          除了日活、月活、銷量等數據,還可以計算細分數據,比如行業、職業、會員等,可以采取同樣的思路進行計算,為細分領域的拓展提供思路。在這里需要注意的是也需要考慮大盤中的量,最終的需求量、使用量是有總體大盤的數量、針對該產品的需求量來決定的。

          需求占比=所在總體中的細分領域用戶規模比例*細分領域有需求的用戶占比。

           

          Chapter Four .
          案例

          我們通過問卷獲得了以下的數據:

          圖片

          圖片

          看到最后,大家會不會好奇?

          圖片

           

          原文鏈接:酷家樂用戶體驗設計(公眾號)

          作者:魚日

          轉載請注明:學UI網》用戶規模測算: 為用戶增長設立目標

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          如何系統化的思考設計改版?

          seo達人


          1.為什么要改版?

          如果你已經開始工作了,那么對于設計改版你應該不陌生。改版目的是為了優化產品體驗,增加品牌粘性,提升數據轉化。

          一般情況下,產品在一年中至少會有一次大改版。其他情況下不會特別大的變動,畢竟每次改版都是會影響數據的變化,領導也不敢隨便冒險。

          那么到底什么情況下會改版?下面看一張圖,就一目了然。

          圖片

          從上圖看出,通常在這些條件下,公司業務層、用研側、設計側驅動、年久未迭代、產品需求出發,企業基本就會做設計改版。

          這里簡要說下用研報告,用研團隊和設計配合完成一份研究報告。那么這份報告里面就會有用戶對產品主觀評價,和測試過程中發現的一些體驗問題或者產品問題,這些關鍵結論可作為設計改版的依據。

          如果你在的團隊有會每年都去改版,那么恭喜你,要好好把握每次機會,改版最能鍛煉設計師的時候,也是設計師價值體現,平時小迭代版本真的就像小修小補一樣。

           

          2.改版中常出現的問題

          • 目標不清晰或者說不知道如何推導

          在啟動改版過程中,很多設計師不清晰設計目標,要達成什么要的效果。從大家作品集邏輯推導中就能看出,比如,很多設計師的目標關鍵詞常出現的情況是:簡潔、清晰、高級等等,我們可以想象下這樣的詞匯,是不是對任何產品都能用,沒有體現出產品要真正解決的問題。

          那么對于設計目標來說,我們應該從哪幾個維度思考?

          圖片

          在一般情況下,可從以上四個大維度去挖掘設計目標。設計師首先就需要對每個目標充分理解,最好能和老板、產品、領導對齊各方向目標后,開始去拆解可量化的設計目標。

          這里補充說明下,如果只是單純的視覺層面的改版,是很難得到多方協同支持,而且價值意義不是很大。所以,改版一定要挖掘出對產品產生明顯影響的問題。

          • 不知所云的用戶畫像

          在包裝過程中,如果你只懂皮毛的用戶畫像,還是盡量不要把用戶畫像東西放進去,沒有多大意義。放進去反讓人覺得你是套模板,大家可以看看大廠公眾號中改版文章,幾乎很少看到用戶畫像。

          那么用戶畫像一般什么情況下會出現?比如是0~1設計啟動,這時候是需要細分人群定位,但是在設計側角度來說,建議別放,除非你對這塊非常懂。

           

          3.設計改版流程

          雖然網上流傳出很多各種經典設計思維模型,比如斯坦福大學設計學院設計流程、尼爾森諾曼集團設計流程等,這些都大同小異。在真正做的過程中,還會有很多問題出現,我們還需從實際情況出發,遇到問題解問題。

          圖片

          上圖就是一個大致的改版設計方法,從洞察問題、目標確定、發散收攏、方案探索、結果匯報、推動落地等6個步驟,每個步驟都有很多事情要做,所以設計改版真的是一個很龐大的工程。

          除了我們日常工作中這樣去推進,在包裝作品集思路時,也是可以使用這樣的流程去思考,只是可以去掉最后兩個步驟。

           

          4.寫在最后

          前面有說到,我們真正在改版過程中可能并沒有很順,會出現很多突發狀況,這也是考驗設計師是否會靈活變通。最重要的一點是在啟動項目的時候,不要單點去看產品的問題,最好能系統的思考和業務方對齊關鍵目標,找準發力點,循序漸進,這樣也是為了減少設計過程中的返工問題,或者考慮不周的情況,不然會有失專業水準。

          設計師路還很長,我們都需要在過程中學習成長,通過實戰提高思維應變和設計能力,通過設計驅動價值體現。

           

          原文地址:功夫UX(公眾號)
          作者: Tony
          轉載請注明:學UI網》如何系統化的思考設計改版?

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          用例驅動設計,讓你的設計更嚴謹!

          seo達人



          圖片

          復雜的AutoCAD與Inventor工具

           

          用例(Use Case)的概念早在1986年就已被提出,它是需求分析的好幫手,可有效的劃定范圍、錨定用戶、區分關系、定義價值,通過不同顆粒度的抽象層次,不斷瓦解復雜系統,使設計和管理有序化。本文基于早已發展成熟的用例驅動設計理念,試圖從中找到一條適合體驗設計師介入的小徑,來應對復雜業務的產品設計。(備注:用例、參與者、UML等詳細的內容不在闡述范圍內,本文僅探索一條可行的方式。)

           

          1、什么是用例

          定義:參與者與系統交互的一系列活動的集合。

          可以發現,一個用例以一組活動集合來表現,集合中包含兩個角色,參與者、系統。參與者是“活的”(不一定是人類),TA的訴求驅動了這一系列活動,此訴求即用例的核心,也是價值的體現。一個參與者可以對系統有多個訴求,詳見如下案例:

          圖片

          由用例驅動的體驗設計過程,著重關注對“行為”的設計。與系統的互動“行為”被協調的、有組織的設計后,為界面表現設計建立堅實基礎,避免因邏輯的變更使界面設計反復推倒重來。試圖通過在界面設計的過程中尋找線索和靈感,反向的去設計背后邏輯是本末倒置的,個中原由在于我們更易于把控具象的視覺感知,較難把控抽象的行為。

           

          2、系統用例和業務用例的關系

          在劃分用例前,有必要澄清系統用例和業務用例的關系。

          業務用例是從客戶當前的業務邏輯中抽象出的用例,與數字產品無關,即便沒有該產品服務,客戶的業務體系也可以流轉。新的產品服務實際上是對傳統業務體系的替換關系,而系統用例就是從該產品服務中抽象出來的,圖示業務側和產品側的對接關系:

          圖片

           

          用例驅動設計的案例:

          總述:

          為清晰闡釋我們是如何利用”用例“這個概念作為切入口,最終一步步驅動、解構、細化體驗設計的,下面將完整展示一個注冊登陸試用產品的案例進行講解,本案例為虛擬案例,方便設計過程的串連。

          圖片

           

          step1:  整理故事與確定用例

          故事中包含了用戶的行為及其所處情境,將更易于被理解、共情和傳遞,故事情節的內在聯系,上下游的完整性也直指價值的輻射范疇。在開始設計前,我們能從各個渠道收集到相關、相似的訴求,整合這些信息后以“故事”的方式表達出來,非常重要。

          本案例的注冊登陸試用故事從”企業“、”用戶“兩個維度進行描述,能確保在用戶訴求達成的情況下,也能達成商業訴求,和諧統一的以產品服務提供出去。

           

          1.1 企業故事:

          公司統一了Platform賬號體系,在保證多設備產品端的一鍵暢通體驗的同時,收集用戶行為信息,以提供更精準的售后服務。同時與授權中心合作,通過網上商城定期開展活動,以下放試用天數,獲得試用授權。產品經理與銷售部門達成持續的合作,通過試用用戶的手機號進行電話回訪,提高購買轉化率。同時軟件的設計應能最大限度的提升客戶自發購買行為,需要在何時的時機,合適的位置提供購買入口。

          獲取用例的方式:

          • sys_運營人員→獲取用戶信息
          • sys_運營人員→開展活動

           

          1.2 用戶故事

          新家裝項目開展在即,大量的圖紙設計使張經理感到困難。在受到同行推薦的Platform出圖軟件后,回到辦公室,通過Platform官網找到軟件信息,并利用現場wifi網絡下載安裝;迫不及待的啟動軟件,雖沒有購買,但軟件提供了試用入口,張經理提交Platform賬號后開始試用軟件。連續使用了兩天,后面每次自動登錄提高了試用的體驗過程,產品一鍵自動化生成圖紙初步解決了張經理的煩惱。經過和集團溝通后,張經理在界面上找到購買入口,并購買軟件正版。他將軟件推薦給朋友劉經理,他是Platform造價產品的老用戶,且已購買過Platform加密鎖,啟動軟件后,界面自動顯示為正式版, 不用登錄試用讓張經理艷羨不已。

          獲取用例的方式:

          • sys_采購經理→試用軟件

           

          step2: 快速描摹流程圖

          用戶和企業的“故事”是一種情節式的、場景式的描述,它易于想象、理解和整合。但為了更清晰的輔助設計,我們需要根據描述,進一步梳理出流程關系,將其具象化。在繪制流程圖時,可不用關注角色的職責關系,旨在快速描摹出所涉及到幾個業務點的關系,將企業和客戶的訴求點包含進去,并在反復確認過程中思考、推敲,大體設計出其中的基本結構。過程中,可能需要補足新的故事描繪,或對既有的故事描述進行修正,以達成一個訴求與技術實現的平衡點。

          圖片

           

          step3: 泳道角色化

          理清核心業務流程關系后,將進一步繪制其角色泳道圖,每個泳道下對應參與的角色。泳道圖仍然是分析過程的一步,它在這里的意義是可清晰的觀察到各個模塊間的協作互動,是細化過程,各個“對象”的職責不同,他們之間的交互關系存在進一步優化的可能,以保證整體行為的和諧,減低系統冗余。

          圖片

           

          step4: 業務實體的獲取

          事實上,帶有角色的泳道圖僅是在很粗的層面描述了業務所參與的對象,是單純從流程圖層面歸納出來的“對象角色”。在面對詳細的功能分析時略顯不足,可能缺失實際參與的“對象角色”,如不分析出來,將導致用戶與系統的交互”行為“的缺失。我們需要進一步挖掘其中涉及的各個參與“角色”,完整的描繪出其交互行為過程,才能對該封閉系統做完整的設計。

          從哪里可以獲取到全部業務實體呢?當然還是故事。業務實體天然的包含在用戶或企業故事中,才得以支撐故事的完整發生,這與故事描述的程度有關,我們第一步就需要填充完整的故事。

          備注:什么是業務實體——用于達成業務目標的實體與過程中的記錄信息。諸如“點餐”用例中的“打印單”就是一個實體,打印單上的手機號是記錄信息。外賣員之所以能將外賣送到你的手上是通過打印單,查看上面的手機號和地址才能找到你。

          下面是結合”故事“,進一步獲取業務實體的案例,把所涉的可見的業務實體標識出來。

           

          4.1 企業故事:

          公司統一了Platform賬號體系,在保證多設備產品端的一鍵暢通體驗的同時,收集用戶行為信息,以提供更精準的售后服務。同時與授權中心合作,通過網上商城定期開展活動,以下放試用天數,獲得試用授權。產品經理與銷售部門達成持續的合作,通過試用用戶的手機號進行電話回訪,提高購買轉化率。同時軟件的設計應能最大限度的提升客戶自發購買行為,需要在何時的時機,合適的位置提供購買入口。

          圖片

           

          4.2 用戶故事:

          新家裝項目開展在即,大量的圖紙設計使張經理感到困難。在受到同行推薦的Platform出圖軟件后,回到辦公室,通過Platform官網找到軟件信息,并利用現場wifi網絡下載安裝;迫不及待的啟動軟件,雖沒有購買,但軟件提供了試用入口,張經理提交Platform賬號后開始試用軟件。連續使用了兩天,后面每次自動登錄提高了試用的體驗過程,產品一鍵自動化生成圖紙初步解決了張經理的煩惱。經過和集團溝通后,張經理在界面上找到購買入口,并購買軟件正版。他將軟件推薦給朋友劉經理,他是Platform產品的老用戶,且已購買過Platform加密鎖,啟動軟件后,界面自動顯示為正式版, 不用登錄試用讓張經理艷羨不已。

          圖片

           

          step5: 時序圖的繪制

          接下來,我們將進行最重要的一步:基于已明確的核心業務流程和已拆分出的業務實體,構造出一整套完整的系統行為。將使用到UML語言的重要工具——時序圖。時序圖能天然的表達多個對象間的復雜行為關系,在產品研發領域應用廣泛。(時序圖的繪制有一整套完整的語法,本文不講解該部分內容)時序圖的“對象對話”形式,原生的契合了“交互”這一概念,游戲大師Chris Crawford和設計專家Jon Kolko都對此有所定義:

          發生在兩個或多個活躍主體之間的循環過程,各方在此過程中交替地傾聽、思考和發言,形成某種形式的對話(conversation)”

          ——《Chris Crawford on Interactive Storytelling, 2nd Edition》

          “所謂交互設計,是指在人與產品、服務或系統之間創建一系列對話(dialogue)”

          ——《houghts on Interaction Design, Second Edition》

          時序圖重點強調了“行為”的發生與互動,使整體目標達成。一系列有邊界的行為活動合集,就組成一個完成的、有意義的“用例”。讓我們再次回到開頭的“用例”上來,并將該用例系統化。

          用例:

          • sys_運營人員→獲取用戶信息
          • sys_客戶人員→試用軟件
          • sys_客戶人員→授權軟件

          圖片

          除確保能服務于運營人員、客戶外的核心邏輯能達成外,為帶來更好的使用體驗。我們需要從諸多體驗維度考慮各個系統行為?!绑w驗因子”將作為系統行為的一部分目標,使整個交互活動更易于理解和順暢??芍苯咏梃b一些通用的體驗因子來評估,對于不同形態、業務的產品,體驗因子有所偏重,諸如工具類產品對“操作便捷度”、“工具易學性”、“工具幫助引導”有較高要求。

          回到注冊案例上來,考慮到“易學性”和“幫助引導”兩個體驗因子,可以對用戶“輸入手機賬號”的行為進行優化設計,提前或實時對手機賬號進行校驗,避免出錯后再提示,徒增挫敗感。同時提供“獲取驗證碼”的觸發入口,引導用戶執行該操作,很大程度上降低系統的理解負擔。在行為設計過程中,存在顆粒度問題,復雜系統涉及到大量互動會話行為,可以有粗細的逐步細化。

          圖片

           

          step6: 觸點行為的競品調研

          完成系統互動行為的設計后,可以開始正式的界面信息設計?!靶袨椤钡谋磉_是極度精煉的,行為本身就是價值取向,并暗合用戶的內心想法,由用例行為來驅動界面設計,才能真正做到按需設計。諸如“我感到肚子餓,第一想法是吃飯“、”早上該上班了,第一想法是走路去、打車去或坐地鐵“。

          在面對”輸入手機號碼“行為的界面設計時,除了個人創新外,也可調研市面上有哪些優秀的界面承載方式,作為一種”學習輸入”,或者激發出新的創新行為。這種由內而外的驅動設計,能使設計過程變得更有序,且避免遺漏。

          圖片

           

          step7: 觸點支線、異常、極限情況的排查

          最后一步是對支線、異常、極限情況的排查,得益于時序圖系統行為的可視化表達,我們可以清晰、有序的排查每一個對話過程中可能出現的異?;蝈e誤,諸如“驗證碼無法到達”、“信息返回錯誤”等異常,都將被有效地排查出來。同時,還能從行為對話結構中,洞察到新的設計優化機會點,諸如“提交賬號信息”環節,必然需要網絡的通暢,故斷網環境下需要給出明確的反饋。如下示例:信息返回錯誤、異常流程高發地、頁面跳轉……

          圖片

          圖片

          時序圖會話的先后順序也將直接影響到界面的表達,圖示中“輸入手機賬號”與“填寫驗證碼”是有先后時間順序的,如果同時在界面中展示兩個輸入信息,無疑造成并列的誤解。(可惜市面上幾乎大多數注冊環節都如此,大家早已習慣)

           

          3、找到體驗的最大撬動點

          總結

          所謂用例驅動體驗設計,是借用例的概念來定義問題和范圍,并使用UML來分析問題,使整個設計過程變得有序、系統、嚴謹,在應對復雜系統、多鏈路多角色的業務時較為有效。用例在整個設計過程中是核心的存在,一旦模糊就會出現偏差,引入無關內容,同時也會失去對用戶價值的把控。用例的獲取很不容易,而精準統一的用例更難,涉及到顆粒度、抽象層次、參與者、受眾等等內容,本文未對“用例的獲取”做詳細闡述,僅專注在用例如何驅動設計過程,有興趣者可移步學習。

           

          撬動點

          以用例為中心的體驗設計,從業務邏輯出發,轉化為系統邏輯,在構建這個過程時就持續考慮體驗因素,是把控體驗的有效辦法,我們站在結構上思考體驗,將徹底的優化系統的體驗。單純從界面表現和框架呈現上做體驗優化,上限明顯,只有扎得更深,才能從結構上找到優化的“最大”杠桿點,帶來體驗提升,并有可能直接對研發程序設計帶來指導。而UML的建模語言是有效的輔助工具,兩者的配合使這一切成為可能。

          圖片

           

          原文鏈接:酷家樂用戶體驗設計(公眾號)

          作者:同舟

          轉載請注明:學UI網》用例驅動設計,讓你的設計更嚴謹!

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          設計如何做出高級感?

          seo達人



          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          怎么樣?滿滿的高級感有沒有?這類設計為什么會有很高級的感覺呢?有哪些地方可以值得我們去借鑒、學習呢?
           
          蔥爺總結出了它們

          9大特點:

          1.使用純色

          漸變色可以做得很時尚很有個性,但要說高級,那還是純色比較有優勢,你看奢侈品牌就很少用漸變色,所以,如果想要高級的效果,版面的背景和色塊要多使用純色。

          圖片

          圖片

          圖片

           

           

          2.使用素色

          高級的設計不但喜歡用純色,而且是喜歡用比較素的純色,即飽和度比較低的顏色,比如米色、卡其色、灰色、白色等等,看起來很素雅。

          圖片

          圖片

          圖片

          圖片

           

           

          3.襯線字體

          除了色彩,字體對于設計作品是否高級也非常重要,一般來說,襯線體給人的感覺最高級,無襯線體次之,手寫體排最后。當然,英文的效果會更好,所以我們在做設計的時候可以搭配一些羅馬體英文,比如Bodoni、Didot、Voyage、Ogg等等都是不錯的英文襯線體,文章末尾蔥爺會分享幾款英文字體的下載鏈接。

          圖片

          圖片

          圖片

          圖片

           

           

          4.干凈的圖片

          說完文字我們再說說圖片,高級的版面,其圖片一般比較干凈,這個干凈不是說一定要有很多留白,而是指顏色和元素不要太花、太雜,比如在下面這些作品中,模特穿的衣服也是比較簡單的,這些圖片本身看起來就很高級。

          圖片

          圖片

          圖片

          圖片

           

           

          5.使用幾何輪廓圖片

          除了矩形輪廓的圖片,我們還可以試試把圖片的形狀設計成其他簡單的幾何狀,比如圓形、橢圓形、圓角矩形、拱門形、菱形等等,這些形狀會顯得沒那么常規,而且會給版面騰出更多的留白空間。當然,圖片的輪廓要根據圖片的內容來做選擇,不能影響了圖片內容的展示。

          圖片

          圖片

          圖片

          圖片

           

           

          6.圖片與線的組合

          版面中僅僅是圖片和文字,你可能會覺得很齋(單調),而如果加圖形和色塊又怕太突兀,或者搶走主要元素的風頭,所以,加線條或者線圖形是一種不錯的方式,既能起到豐富版面、增強設計感的作用,又不會太搶戲。

          圖片

          圖片

           

           

          7.圓弧形圖片配弧線文字

          版式對于設計的氣質也會有很大影響,很多服裝品牌的設計喜歡用一串文字,繞著圓弧形輪廓的圖片排版,這種排版方式可以與版面的邊界以及其他水平排列的文字,形成鮮明的對比,視覺效果很不錯。

          圖片

          圖片

          圖片

          圖片

           

           

          8.大文字、大留白、小圖片
          大圖片、小文字的版面可能我們看的比較多,感覺比較大氣,而大文字、小圖片,再加上大面積的留白,又是完全不同的另一種感覺,相比前者會更有設計感、更富有變化,使用得當也會很高級。

          圖片

          圖片

          圖片

          圖片

           

           

          9.克制
          高級的設計往往是很克制的,包括對色彩、字體、元素、特效、技巧等方面的克制,例如下面的幾件作品,除了必要的元素,幾乎沒有任何多余的東西,但設計師通過對字體、字號、字間距、行距、對齊、留白的控制,讓版面顯得并不單調,反倒很高級。

          圖片

          圖片

          圖片

           

           

          圖片
          使用純色、素色、襯線字體、干凈的圖片、幾何輪廓圖片、圖片與線組合、圓弧圖片配弧線文字、大文字大留白小圖片、克制。記住啦,下次想做高級的設計時,不煩試試這幾個技巧,然后多找一些服裝品牌的網頁設計來看看。不過使用技巧的時候切忌生搬硬套,根據具體情況靈活使用才是正解,希望這篇文章對你有所幫助。 
           
           
          原文地址:蔥爺(公眾號)  
          作者:蔥爺  
          轉載請注明:學UI網》設計如何做出高級感?

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          五個案例教會你怎么做卡通 LOGO (一)

          seo達人


           

          圖片

          圖片

           

          事情的來源是今早 9 點零三分,我還在夢里吃著澳龍,突然微信的震動把我震醒了。我一拿手機,原來是我的恩師胡曉波給我發來一條消息,讓我試著能不能寫一篇關于卡通 LOGO 的教程。當然我是一個很樂于分享的好人,所以有了今天的這篇分享。

           

          圖片

           

          準備好了嗎?我要進去……哦不,我要開始了!

           

          圖片
          圖片 
          做好一個卡通 LOGO,有幾個關鍵的點需要注意。如果這幾點做不好,那么你做出來的卡通 LOGO 總覺得帶著一股鄉村氣息,總做不出那味兒。下面拿這個案例演示的時候,我會一一提到。

          首先先去網上找一些關于青蛙的素材,當然,你可以找照片,也可以找一些青蛙的卡通形象參考。然后在網上我看到了這張圖,覺得非常有意思?;④|一震,決定把這個拿來當動作參考。

           

          圖片  
          重點 1:

          在做卡通logo的時候,找照片素材最好是找姿態、動作比較有故事性、有意思、有特點的,這樣出來的形象也比較生動。

          接著,把這張照片墊底,試著草圖一下它,把它的輪廓先用 AI 鋼筆工具勾出來,這樣就得到了一個初始的外輪廓。

          圖片

          再處理下這個外輪廓,得到這個初始的輪廓后,感覺這個形象完全可行,那么我們現在需要把它的線條變的更順滑,整體的形象顯得更可愛(既然是卡通,可愛一點會更好看)。

           

          重點 2:

          怎么能讓一個形象變得 Q 萌可愛?長時間的研究卡通,我得出這么一個結論:形象偏矮胖、敦厚、圓潤,就比較能突出可愛的特征,把你勾勒的初始輪廓適當壓扁,讓它變矮胖。

          經過線條的優化(使其圓滑),外輪廓的壓扁處理以后,就得到了最后的這個結果。

          圖片

          整體形象確定以后,再給青蛙畫五官,這里,我們再去網上找一些青蛙的卡通形象的處理方式(或者不局限于找青蛙也可以找一些與青蛙形象相近的動物,例如蜥蜴等等)。

          圖片

           

           

          重點 3:

          卡通的五官,處理方式其實很簡單,盡量用幾何圖形去作為臉部的五官特征。

          在這個案例上,因為主體是青蛙,所以不能單純用一個小圓點去作為青蛙的眼睛,我們可以看到青蛙眼睛的特征,是有一個較大的眼白與較小點的眼珠。所以這邊的處理方式,就是一個白色的大圓+黑色小圓。

          圖片

          單單這個形象還是不太夠,雖然這個坐姿已經比較生動了,我們可以根據這個形象展開聯想,讓它更充滿故事性和趣味性,這里觀察青蛙的姿勢,這個屁股的角度,可以讓它坐在跟大自然有關的物體上,加上這個雙手護胸的動作,讓它叼一根樹枝,更能體現悠閑的氣質。

          圖片

           

          重點 4:

          卡通吉祥物的標志,利用本身的的姿態動作,適當展開聯想,加一些小物件可以讓它更生動,更有趣。

          接下來就是上色跟補充一些細節了。如果配色較差,可以去網上找一些配色的參考。這里我找到一個卡通的配色,剛好也是綠色為主,適合青蛙,且背景也可以參考它做一個疊底。

          圖片

          最后,選個自己覺得較為合適的字體,如果會做字體的話最好是自己做個字兒,再做個排版,就OK 啦~

          圖片  
           
           

          重點 5:

          卡通 LOGO 的排版,不要太復雜,因為卡通標志本身的圖形具象,排版簡單更好看,用字的字體氣質要符合圖形。

          圖片
          圖片

          前面的案例,想必大家都已經 get 到了步驟,還我還是要再演示一下這個案例,嘻嘻。

          還是一樣的,這張照片是我偶然看到的,覺得非常有感覺就保存到手機了。在做這個 LOGO 前突然想到有這么一張圖,立馬開始操作。

          圖片

          其實大家在日常生活中看到比較有意思的圖片,都可以保存下來,說不定哪天它就能變成一個好看的 LOGO 是不是呢?

           

          好了不說廢話,開始勾輪廓!

          圖片

          這張圖的松鼠,看起來還是比較飽滿的,所以在后期調整優化曲線的時候會比較輕松,但是這個圖的外輪廓,相比第一個案例的青蛙,是比較復雜的,這里需要耐心一些。

          這里繪制的外輪廓,線條都不是合并的,但是我們發現,這個 LOGO 是需要做一些高光跟陰影的,所以這里先給大家普及一個基礎知識。

          圖片

          三種描邊模式,我們選擇第三種——使描邊外側對齊,因為我在給圖形做剪切陰影或者是高光時,不可能 100% 沿著輪廓去勾勒,這樣太累了,所以一般會超出外輪廓一些,再去做剪切,這樣能省不少時間。

          圖片  

          重點 6:

          卡通 LOGO 的繪制,基本都是用到外輪廓,這樣好做高光跟陰影的剪切。

          回到主題,我們接著畫這個松鼠。

          圖片

          剛剛我們已經把草圖大概勾勒出來了,現在把這個草圖墊底,讓它形成一個合并的狀態(注意先觀察草圖找好錨點的起點,否則很難讓整個輪廓連起來),并且過程中、優化線條曲線(這一步還是有點難度的,鋼筆工具不太熟的同學需要多練習)。

          勾勒完成后的線條是圖 1 這樣的,不少同學會有疑問,為什么有些地方會呈現雙線的狀態?別急,把它換成外描邊模式你就明白了。

          圖片

          因為外描邊模式,當有兩條相近的線條時,是有可能重疊的,這樣就能形成一些細節線條。

          圖片

          接著,我們繼續調整有些不完美的地方,比如重疊到的地方線條粗細不統一等等,調整完后我們看下效果。

          圖片

           

          到了這步以后,其實最難的點已經被你拿捏了,剩下的就是補一些細節。另外,松鼠的尾巴,這邊是沒有按照圖片的線條去處理的,因為現在這個圖形是往下走的趨勢,如果尾巴還是往下垂,那整個圖形的重心就不平衡了。

          圖片

          這邊尾巴的處理也可以網上找一些參考,因為上面說的平衡問題,所以我把松鼠尾巴處理成往上走的趨勢。

          大體造型已經完成,現在剩下的就是填補五官、填充顏色,加高光陰影。

          圖片 
           

          重點 7:

          陰影跟高光這部分,其實不需要過于嚴謹。沒有美術功底的同學也不用發愁,在一些有交錯,遮擋的部位加陰影,在頭頂或者身體外邊緣加高光,基本是沒有什么大問題的。

           

          這樣圖形就完成了,最后加上排版就完成了。

          圖片  
           
           
           
          圖片
          圖片

          第三個案例跟前兩個其實很相似,都是我在網上看到比較有意思的照片,下載下來做成卡通標志。廢話不多說,上圖了。

          圖片

          其實我個人很喜歡做猴,當然大部分原因是因為我愛人叫……猴子,圖片emmm好像離題了,收!

          因為猴子本身是一種帶著調皮、聰明、智慧性質的動物,做猴 LOGO 其實可以讓它賦予多種性格。

          圖片

          如上兩個案例的方法,先大概繪制一下猴子的外輪廓,看一下圖形大概的感覺(這里還是與第一個案例說的,圖形整體看起來比較瘦高,可愛氣質會偏弱,我們可以嘗試壓扁)。壓扁后我覺得是我想要的一個高度,但是壓扁后頭部也會變形,那么接下去只要我們把這個壓扁后的猴子輪廓復制一個,再使用第一版繪制的頭部就 OK 了(這里不做具體演示)。

           

           

          重點 8:

          卡通類型的 LOGO,一般身體都會比較短,頭比較大,圓,這樣可愛的氣質才會突顯。

          經過一番調整操作后得到這樣一個輪廓,但是現在這猴子是沒有尾巴的,所以我們要給它添加一根又粗又長……的尾巴。

          圖片

          這樣得到了一個最終的輪廓形態。接下來就是給它畫上臉,五官,還有增加一些高光細節了。

          這里看你想給猴子定義什么樣的表情氣質。原照片的這猴子,表情略帶無辜,我覺得還蠻不錯的。那么我們嘗試一下畫上表情,注意簡化。

          圖片

          委屈、無辜的表情,如果你不知道怎么畫才能表現出來,可以對著鏡子裝個委屈的表情看下,或者度娘一下委屈、無辜的照片。一般委屈無辜,眼睛的形狀都是呈現一個眼角往下的狀態。

          圖片

          加完五官以后,現在整個猴子的大致形象已經出來了,那現在這個姿勢,需要加點什么才能讓它變完整。原照片上,是兩根分叉的樹干,其實照著畫也沒什么不妥,那我們就給它畫上樹干,再上個色。

          圖片

          畫完樹干,上完色后,整個圖形是不穩的。原因是分叉的樹干其實是個 V 字形,所以我們為了讓它穩住,在底部加一個類似陰影的形狀去壓住它就完全 OK了。

          圖片

          本以為到這,就完成了。端詳許久,總覺得還差點啥,感覺這猴兒還不夠靈性。這時候我突然想到我前幾天買的毛線帽,然后想著,天冷了,給猴兒個帽子吧……

          圖片

          畫完后,又看了許久,不禁發出感嘆,我 TMD 真是個天才……最后老規矩,加排版,完事兒!

          圖片  
           
           
           
          圖片
          圖片 

          前面的都是根據一些照片去做的吉祥物卡通標志,其實創造性不屬于特別高,我個人其實更喜歡是這類 MIX 標志,把兩種不相關的物體結合起來,但卻不違和,反而更顯趣味創造性。

          這個案例的靈感來源是我在 BE 上看到一個我很喜歡的設計師做的一個標志(下圖) ,把老鼠與胡蘿卜結合,非常有意思。

          圖片

          做這個 LOGO 之前,我就一直想做個胡蘿卜的創意性標志(出于對波哥的愛圖片),這類型的卡通 LOGO,有時候就是靈感一瞬間迸發的事兒。但是沒靈感的時候,我都會去網上瞎看,有時候看著看著,就能想到做啥了。偶然間看到幾張坦克的照片,靈雞一動,把胡蘿卜跟坦克結合,因為剛好坦克的炮管,可以用胡蘿卜代替(想到這里,我露出了姨母笑)。

          那么胡蘿卜跟坦克的造型怎么畫呢?首先還是打開你的網頁,可以先搜一下胡蘿卜的造型,再搜坦克的圖片(這里找到的坦克圖片,已經是手繪圖了,所以我們要把它概括簡化一下)。

          圖片

          我先不用管胡蘿卜的部分,因為胡蘿卜的角度是要根據坦克輪子的角度來做,所以我們先把坦克的部分繪制一下。仔細觀察坦克底座的構造,拆解繪制。

          圖片

          到這里大家可能會有點困惑,這樣的圖片我要怎么下手?不要急,其實不難。上面我們已經把坦克底座的部分拆解,現在只需要繪制一排車輪跟輪子上面的鐵蓋。這里需要注意的是,因為坦克的特征十分明顯,就是一根長長的炮管與底部的一排輪子,所以只要把這兩個特征能抓出來,基本不難看出是坦克了。

          圖片

           

           

          重點 9:

          當你要把一個實物/動物圖片轉化成卡通風格時,要仔細觀察它原來的線條,使其更幾何化,去繁從簡。

           

          坦克部分處理完就可以搞這個胡蘿卜了,這里就不用做太多演示了,胡蘿卜這么好畫!注意跟坦克合上的角度就 OK 了!

          圖片

          這個角度先畫個草圖,放上去試試合不合適。

          圖片

           

          可以!

          再觀察下胡蘿卜的細節,因為它要充當炮管,所以我們不加上面的葉子,但是這樣會不會看不出是胡蘿卜?那我們可以觀察下胡蘿卜身體部分有什么細節,再加上胡蘿卜的橙紅色,說看不出我不信!

          特征:胡蘿卜身上的劃痕

          圖片

          別急,現在看不出胡蘿卜不要緊,上色以后一切都會好的~

          好了,可以合體了!注意各個組件的圖層關系。

          圖片

          上色!排版!完事兒!

          圖片  
           
           
          圖片圖片

          這個案例跟上個案例其實非常相似,都是 MIX 系列的卡通 LOGO 這個 LOGO ,這個 LOGO 靈感來源于我偶然在網上看到了這張圖片,以獼猴桃代替了鸚鵡的翅膀,配色也完全不違和,是非常優秀的作品了。

          圖片

          萌生了想長做一個類似的 LOGO,當然我們不能再用獼猴桃的元素了。想想,其實很多水果可以做這樣的「代替品」。但是這里需要注意的是,什么樣的水果切開,還非常具有特征,讓人一眼就能辨識出來。最后我選了西瓜,西瓜可以有半圓,也可以有三角形,這樣的話,鳥的翅膀形態發揮空間就很大了。切開后的西瓜籽加上紅色的瓜瓤十分具有辨識度。

          圖片

          當然我們先要做的是「鳥」這個主體的造型。這邊還是先去網上找一下鳥的圖片,最終,我選用這張圖片來作為這個 LOGO 的主體(因為它本身圖片就有可愛的氣質,更方便我們后面創作)。

          圖片

          這里我只提取了這只鳥的身體跟嘴的部分,翅膀我們要用西瓜代替的,所以暫時先不去繪制。確定好身體部分以后,我們再嘗試先畫切開的一半的西瓜。這里也不難,網上搜一下西瓜,很多素材可以參考著畫。

          圖片

          畫好的西瓜,我們再嘗試旋轉角度,跟鳥的身體部分合體一下。

          圖片

          看起來真可以??!

           

          現在的造型看起來是不是還不戳!是吧~但是還沒完!一般展翅的鳥兒,爪子是什么狀態?別慌,繼續度娘!

          圖片

          可以看到,展翅后的鳥兒,爪子都是往前伸。我們秉著卡通能簡化就簡化的原則,把爪子處理成線的形式即可。加以上色,「西瓜鳥」就出來了。

          圖片

          圖形這樣已經是完成了,現在就剩下排版。當我加上文字以后,發現這個 LOGO 越看越顯得空,那咋辦?加個背景色塊其實就解決了(這里的背景色塊,也是根據鳥的身體走勢做的橢圓)!

          圖片  
           
           

          重點 10:

          當你的卡通 LOGO 做完后發現整體看起來不飽滿,嘗試加個背景色塊,屢試不爽。

          圖片   
           
           

          總結Tips:

          • 在做卡通 LOGO 的時候,找照片素材最好是找姿態,動作比較有故事性,有意思,有特點的,這樣出來的形象也比較生動。
          • 怎么能讓一個形象變得 Q 萌可愛?形象偏矮胖、敦厚、圓潤,就比較能突出可愛的特征,把你勾勒的初始輪廓適當壓扁,讓它變矮胖。
          • 卡通的五官,處理方式其實很簡單,盡量用幾何圖形去作為臉部的五官特征。
          • 卡通吉祥物的標志,利用本身的的姿態動作,適當展開聯想,加一些小物件可以讓它更生動,更有趣。
          • 卡通 LOGO 的排版,不要太復雜,因為卡通標志本身的圖形具象,排版簡單更好看,用字的字體氣質要符合圖形。
          • 卡通 LOGO 的繪制,基本都是用到外輪廓,這樣好做高光跟陰影的剪切。
          • 陰影跟高光這部分,其實不需要過于嚴謹,在一些有交錯,遮擋的部位加陰影,在頭頂或者身體外邊緣加高光,基本是沒有什么大問題的。
          • 卡通類型的 LOGO,一般身體都會比較短,頭比較大,圓,這樣可愛的氣質才會突顯。
          • 當你要把一個實物/動物圖片轉化成卡通風格時,要仔細觀察它原來的線條,使其更幾何化,去繁從簡。
          • 當你的卡通 LOGO 做完后發現整體看起來不飽滿,嘗試加個背景色塊,屢試不爽。

           

          初試卡通,或許效果沒有很好,但是都是能靠多看,多練,練會的。喜歡它,你就能靜下心去做它,練它,興趣是最好的老師。所以如果你也喜歡卡通類型的 LOGO,讓我們干起來吧!

           

          原文地址:胡曉波工作室(公眾號)

          作者:小章魚

          轉載請注明:學UI網》五個案例教會你怎么做卡通 LOGO (一)

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          3種狀態+5種模式,從UX角度分析加載設計

          seo達人


          三種加載狀態

          頁面加載進程會受多方面的影響,例如頁面里圖片、圖標的數量,頁面中是否有三維場景或模型,是列表式設計還是卡片式設計…

           

          逐一加載

          對于可以同時進行多個加載任務的產品,更適合應用逐一加載的形式,這樣做能減少用戶對于等待的感知程度。任務列表逐一加載的過程會給用戶帶來一種秩序感。

          圖片

           

          完全加載

          進入一個網站或App,很多頁面都會一下就顯示出來所有內容,這種頁面完全加載的形式對用戶來說更熟悉。

          同樣,頁面完全加載的形式會讓用戶的操作和瀏覽過程更流暢。

          圖片

           

          延遲加載

          延遲加載是用戶主動觸發的操作,根據操作系統反饋對應的結果。延遲加載包括三種形式:

          • 無限滾動當檢測到用戶快要到達列表或頁面的末尾的時候,通過無限滾動來作為觸發器,引導用戶獲取更多內容。

          • 加載更多:通過點擊“加載更多”按鈕來獲取更多內容,這個過程由用戶主導決定,是否選擇點擊。

          圖片

          • 分頁加載:分頁是在不同頁面上進行的延遲加載。這個過程也是由用戶主動選擇,但和“加載更多”按鈕不同的地方在于,分頁是頁面間的切換,并且用戶能清楚地看到具體的頁面數量。
          圖片

           

          五種加載模式

          加載模式需要依托場景去考慮。比如一個1秒就能加載的頁面和一個需要5秒才能加載出來的頁面,我們就需要考慮使用不同的加載模式設計,這樣才能做到差異化設計。

          這里我做了一個表格,將頁面加載需要的時間以及對應的加載模式進行了整合。

          圖片

           

          0.1秒以內

          如果加載時長低于0.1秒,用戶不需要等待加載過程,內容就能即時呈現出來,有一種“還沒開始就已經結束”的感覺。

          0.1秒以內的加載不需要在頁面中添加任何加載狀態,但要一個場景需要格外注意,如果用戶剛完成一系列復雜的操作,點擊提交之后,考慮為用戶提供撤消機制

          圖片

          用谷歌郵箱發送郵件時,發送成功之后會彈出一個撤銷提示,允許用戶在5s內撤銷剛才發送成功的郵件。

           

          0.1-1秒間

          大多數產品的頁面加載速度都在這個區間,用戶幾乎不會注意到這種加載延遲。所以我們不需要增加額外的加載動效來填充這段加載時間,不然可能會起到畫蛇添足的反面效果。

          試想一下,如果在每個頁面加載的過程中都加上加載動效,不僅會分散用戶的注意力,并且屏幕上總出現不斷跳動的內容,會讓人感到很焦躁。

           

          1-2秒間

          如果加載時間超過1秒,用戶就會感知到這個加載過程,這個時候我們就可以考慮適當添加加載動畫,緩解用戶等待的焦急感。

          • 微加載1-2秒的加載時間對用戶來說,說長不長說短也不短,優先推薦輕量級的動畫加載形式,為用戶提供一種進度感。
          圖片

          在下載內容的過程中,使用這種輕量級的環形動畫來顯示加載進度,簡潔清晰,而且還能作為組件來復用,能夠極大提升工作效率。

           

          • 骨架屏用于整頁加載,這種加載形式在產品中的應用也越來越頻繁。骨架屏可以讓用戶在等待加載的過程中,先了解頁面的架構。

          圖片

          在骨架屏基礎上,可以“選裝”一些好看的效果,增加頁面加載時的視覺體驗觀感:

          • 微光效果在骨架屏基礎上添加微光效果,光感的加入能將用戶的注意力從等待中轉移開,有效地減少等待感知。

          圖片

          • 脈沖效果:效果和微光效果很像,差異的地方在于脈沖效果用于單個的任務或卡片列表。

          圖片

           

          2-10秒

          這個加載時間對于用戶來說已經很長了,對于設計師來說,需要對這段加載時間進行合理有效地設計,來提升用戶體驗。

          • 時間提示在開發中很難以分和秒為單位來精確地估計加載時間。

          圖片

          如果在加載的過程中,想給用戶一個期望的時間值,告訴用戶整個加載過程需要多長時間,我們可以用“這可能需要幾秒鐘”這種提示方法,既能展示加載需要的時間,又能給用戶一個時間預期。

          • 進度條:最常使用的加載形式,加載過程中使用緩入動畫會讓整個過程看起來更像在加速。

          圖片

          • 分步提示如果加載過程過長,可以將整個過程分為幾個不同的步驟,幫助用戶預估操作完成需要的時間。如果系統正在處理多個項目,分步提示的設計能讓用戶明確了解已完成的操作。

          圖片

           

          10秒以上

          • 百分比加載使用百分比加載雖然不能告訴用戶加載完成需要多長時間,但是能提供一種過程感,讓用戶自己來估計加載時間。圓形進度條+百分比是最常見的加載形式。需要注意的是,不要在加載到99%的時候讓進度條卡住不動,這樣會讓用戶感到焦急。

          圖片

          • 后臺加載如果一項任務需要加載很長時間,我們不能讓用戶看著進度條干等,其他什么都做不了,這種情況我們可以考慮將任務放到后臺去加載。

          圖片

          在Google Drive中上傳較大的文件時,系統會立即給出反饋,將任務窗口縮放到屏幕的右下角,我們可以通過這個小窗口檢查上傳進度和上傳情況,而且還不耽誤使用頁面上的其他功能。

           

          最后

          把加載細分成這五種模式,可以覆蓋很多使用場景,這樣的對癥下藥既能保證用戶體驗,還能讓產品豐富化,起到錦上添花的作用。

          在對的時間和對的場景下做對的事,這句話用在什么地方都不為過,設計也是一樣。

          最后考慮到大家經常使用卡片式UI排版,為大家整理了90+個iOS卡片模板,源文件已經打包好,大家可后臺領取。

          領取方式:關注公眾號,后臺回復【小組件】獲取源文件。

          圖片

          慢慢來比較快,希望對你有幫助!

           

          原文地址:Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學UI網》3種狀態+5種模式,從UX角度分析加載設計

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          2022的100種設計法!

          seo達人



          圖片

           

          01.字形再設計

          通過對0和2字體的解構與再設計,衍生出了各種形式的數字圖形組合,凌厲或圓潤、抽象或具象,無不表現出了設計師強大的圖形想象力,是很好的設計參考。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片
          圖片
          圖片
          圖片

          圖片圖片

          圖片

          圖片

          圖片

          圖片
          圖片
          圖片
          圖片
          圖片
          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          02.插畫與文字

          熱衷于插畫設計的設計師們將文字巧妙的融合的圖形元素中,這種形式更能傳達設計師的想法,使其更為具象化的表現在欣賞者的面前。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片
          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          03.3D設計

          3D軟件讓設計師們不在拘泥于二維世界當中,更全面的視角和細膩的質感表達,讓設計作品煥發出全新的力量!

          圖片
          圖片
          圖片
          圖片
          圖片
          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          原文地址:設計師深海(公眾號)

          作者:設計師深海

          轉載請注明:學UI網》2022的100種設計法!

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          日歷

          鏈接

          個人資料

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

          存檔

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