無論是高保真還是低保真原型，設計人員在軟件中的展現所有效果，最終目的都是傳遞給開發人員進行實現。當開發人員開始使用代碼還原頁面時，設計就不可以再隨意修改。
最重要的不是在設計軟件中展現的效果，而是實際在用戶設備上實現的效果，因此在設計時，要提前考慮代碼實現的成本。
盒子模型是一種描述對象尺寸和間距的方法。有四個部分組成：“邊框Border”、“邊距Margin”、“填充Padding”、“元素本身Element”。
Border：圍繞元素外圍的邊線。
Padding：元素及其子元素之間的間距。
Margin：元素和其相鄰對象之間的間距。
點（pt）取決于屏幕物理尺寸大小，是絕對尺寸單位。對應@1x圖的1px。
像素（px）取決于實際屏幕顯示分辨率，是相對尺寸單位。在@2x圖情況下1pt=2px，在@3x圖情況下1pt=3px.
建議使用“@ 1x”進行設計，其他尺寸圖可以從@1x進行衍生。
如果是以@2x進行設計，那么若要得到@3x則要先縮小50%然后再擴大300%，增加了不必要的工作量，并且很容易出現奇數、小數等不便利數值。
創建的每個UI元素都應該和像素網格對齊，防止出現半像素的“鋸齒“效果。
文本由于其圖形的特殊性，難免會出現無法對齊像素的情況，這里可以忽略。
文本是頁面中最重要的元素之一，但因為其本身的多樣性，產生的不同的字體、行高很難和其他元素一起適用網格。因此給文本設置基線網格，將基線網格采用4pt進行等距劃分，來和其他元素進行和諧搭配。
使用8的倍數來定義區塊和內部元素的尺寸，間距等。
當區塊元素為文本（例如按鈕）時，將文本設置成其余部分一致（或者平臺預先定義好）的大小，然后使用padding來確定區塊大小。如果是全寬的元素，使用padding來確定高度，并使用一致的水平邊距來確定寬度。
硬網格：將元素放置在以8為增量定義的顯示網格中，使用額外的透明背景元素，和前景元素組成一個整體。
軟網格：保證元素之間的的間距為8的倍數，以此獲得更快的處理速度，從而得到更流暢的體驗。
當所有尺寸都遵循相同的規則時，就有了一致的UI。
減少自定義的尺寸規則，得到更快的代碼運行速度。
無論設備外形如何，主流的屏幕的屏幕尺寸長寬值至少有一個維度可以被8整除。
有一些屏幕的尺寸無法被整除（iPhone 6的375*667pt），只需要保持padding和margin一致，適當調整區塊的大小來進行適配。
確保開啟了“對其像素網格”選項。
如果根文根大小設置了16px，則可以使用0.5rem的增量在8點網格上構建布局。
如果不喜歡這樣做，或者是不喜歡rems的使用方式，可以使用CSS或預處理器間距變量來處理布局，同時保留變量以供后期維護。
大多數軟件都可以設置快速“微調”，一般默認為10px，sketch中可將其調整為8px，便于快速的工作。
學習并善用快捷鍵，提高工作效率。
圖標設計通常需要進行視覺修正，因此，在其周邊放置透明框架（例如Hard Grid的方式），來保證整體的一致性。
設計時經常會放大預覽界面來進行設計，這會導致會略整體；如果以縮小的尺寸會導致看不到細節，因此要經常變焦畫面來確保能看到整個畫面。
文章來源：站酷 作者：YMOOM
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
什么是設計系統？
設計系統 = 設計價值觀和原則+設計規范+場景定義+工具包
為什么要構建設計系統？
問題1:
隨著業務的拓展，產品和項目數量不斷增加，發展中期設計和交互上不一致性的問題浮出水面，需要采取措施確保產品或產品線之間保持統一的品牌傳達、外觀和體驗，以滿足用戶預期并向其傳達統一的品牌認知。
問題2:
無統一的設計規范和交互原則，沒有統一的UI組件庫和代碼庫，各團隊設計和前端需花費大量資源陷于低質量溝通協作和重復造輪子，拖慢產品和項目設計和開發節奏。
問題3：
產品項目數量 vs 產品設計師，人員配比嚴重不足的情況下，團隊的設計師們無法從雜/亂/急的日常需求中剝離出來，影響構建產品壁壘的質量和速度。
設計系統的價值
產品側：
設計側：
開發側：
測試側：
主流設計系統-他山之石可以攻玉！
無需猶豫，直接基于現有的優秀的開源設計系統，
設計系統的打造不必從0-1構建， 例如：Ant Design業界優秀的開源設計系統，我們完全可以站在前人的肩膀，最終生產出符合達觀品牌、業務特性的設計系統。
字節跳動 Semi Design：https://semi.design/zh-CN/
字節跳動 Arco Design ：https://arco.design/
以原子理論構建設計系統
原子理論設計介紹
首先原子設計理論并不是什么高大上的規則。最早是由國外前端開發工程師 Brad Frost提出的，他從化學元素周期表中得到啟發，發現在化學世界中，所有的物體都是由原子構成，原子組合構成分子，分子組合構成有機物，最終形成了宇宙萬物。根據他的理論，設計體系主要包含 5 個層面：原子、分子、組織、模板、頁面。
原子理論設計不是一個線性的過程， 它更像是一個心理模型，來幫助我們把用戶界面看作是一個連貫的整體，同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設計系統層級中扮演重要角色。下面，讓我們更深入的了解每一個概念哦～
原子是物質的基礎組成部分，是構成設計系統的最基礎元素。
在界面中以「元素」的形式存在，例如：顏色、文字、圖標、分割線、間距、圓角、間距、陰影等。
簡單概述下來就五個字：色、形、質、構、質；
在界面中，分子就像是一個由UI元素組成的相對簡單的組織。如：按鈕、彈窗、搜索框等。
以按鈕為例，它的組成元素包含了文字、色塊、圖標和間距。這些抽象的原子從毫無關聯原則組合成一個分子，圖標和文字互相配合傳達意義，顏色定義了按鈕的特性，間距為按鈕定義了一個尺寸和規范。
組織(Organisms)層
分子+原子組合成更復雜和可擴展性的模塊，這個稱之為組織（區塊組件），如：列表操作區塊、列表展示區塊、表單區塊、數據統計卡片區塊。
以表單為例，一個表單我們可以通過數量的組合，以及間距的調整，元素的增減，在界面中表達不同的場景和含義。
模板(Templates)層
由原子+分子+組織構成的更復雜更具拓展性的模塊，如：分組表單頁、頁面級表單、詳情頁、列表頁、異常頁、dashborad。本質就是線框圖，模版在設計系統承載的作用就是保證設計方案在原型階段的多樣性。專注于頁面的底層的內容結構，頁面中的信息是占位作用，而不是頁面的最終內容。
頁面(Pages)層
帶業務邏輯的場景案例如：標注詳情場景、抽取詳情場景、權限管理場景。頁面將真實內容應用于模板；
頁面是模板的具體實例，填充了真實的內容（圖片、文字等）后形成頁面，也就是常說的帶交互邏輯的「視覺稿」即為高保真原型圖，將占位符替換為有代表性的真實內容，使設計系統有了生命。在模版的基礎上進行優化和完善就形成了頁面最終的設計方案。
關于設計系統的常見認知誤區
誤區1：設計體系就是設計規范或者組件庫嗎？
許多人認為設計系統就是單個代碼庫、組件庫、設計規范，但實際上他們不是一個層次的東西，準確度的來說設計體系包含設計規范，組件庫也是建立在設計體系內的，組件庫是記錄和共享設計模式的工具，就是設計體系工具化和表現層的部分；
誤區2：設計體系的存在扼制了組織內創造力，會替代掉設計師？
拋出這個問題，是因為經常在不同的場合聽到“設計系統是扼殺設計師的創造力”之類的觀點，我個人是很難以認同這個的，對design system的最大誤解就是限制設計師的想象力。首先設計系統本身就是一個龐大且復雜的設計觀集合，需要調動整個團隊的想象力和創造力，最終達到一個統一共識才有可能被實施和執行；
好的設計系統可以通過流程和機制促進創造力的，而且好的設計資產可以幫助大家從不必要的、重復的勞動時間內節省出來，當然也不能過度依賴過往的沉淀資產，把自己定位為設計系統的創造者，而不是使用的工具人，不斷的創造和貢獻好的解決方案被整個組織采用，就不必再擔心那些即將淪為沉沒成本的過往設計與技術資產的限制。不會替代掉設計師，反而是一個企業內部尊重設計師價值的開始！是企業對設計文化的認可！
設計體系是動態的，永遠是隨著組織需求和用戶需求而變化的，一切說自己已經完成了設計體系的建設的人都是錯誤的，都是將將靜態的設計規范曲解成了設計體系。
正確管理機制：少數人負責管理，多數人參與貢獻；避免你做、我用模式，這種生產消費模式非常內卷；避免如：我一個設計師為啥要用你的規范；這規范做的太垃圾用處不大，我才不用，用你做的規范；我苦逼做業務，你晉升拿結果的負面心態；
然設計系統也不是簡單的靠少數的人1-2個月用愛發電就能完成的，設計系統是一群人，對一種做設計文化的認可，每個與之相關的人都應該是設計體系的貢獻者與布道者！
需要克服的潛在難題
產品業務復雜性提升，提升建設難度
難以控制創造與控制間的平衡；
復用與定制間的平衡，刻意追求復用率而容易丟失整體觀，為特定業務目標服務時不如靈活集中化式方法等
資源問題，容易被當成是輔助項目而缺乏預算等資源….
缺乏良性有效的組件庫更新迭代機制，虎頭蛇尾….
收益短期不明顯，搭建體系的長期收益難以被組織短期內察覺；
盡管有一系列潛在的問題，但總的來說設計體系的帶來的收益是大于這些投入的，總的來說方向是沒錯的，下一個關鍵問題是：我們如何去建立一個更優秀的設計體系。
文章來源：站酷 作者：從你的世界經過
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1. 需求定義
需求是用戶對于自己碰到的困難從而提出的問題，是用戶對于已有產品的反饋和建議，是老板提出的商業訴求，就是運營人員減少工作麻煩的想法。需求和產品是一種問題導向與目標導向的結合，是用戶碰到了什么樣的問題，從行業屬性、用戶群體、業務場景、工作目標、商業利益等方面從而產出的輸出物，也就是所謂的產品。
需要：是解決問題或者滿足欲望，達到最終的目的。
需求：是需要付出一定成本來滿足，主要體現在解決方案中的具體產品和功能。
2. 名詞解釋
產品需求文檔（PRD）是將商業需求文檔（BRD）和市場需求文檔（MRD）用更加專業的語言進行描述。
3. 面向對象
開發、設計師、測試、老板、項目經理、產品經理、運營、市場、銷售、客戶、財務等其他角色。
4. 輸出物
文檔：Word、ppt
交互或者原型稿件：Axure、UI界面
5. 產品需求文檔結構
命名和編號
修訂記錄
背景分析（產品背景、行業背景、國家政策）
需求分析
用戶定位
產品目標
總體架構（技術架構、功能架構）
業務流程
功能設計（功能總表、用戶角色、功能詳情）
產品特色
產品模塊清單
產品適配清單（支持的瀏覽器、數據庫、中間件、操作系統）
6. 需求分析原則及方法
6.1. 產品需求的三個層次
基礎性需求、期望性需求、興奮性需求
6.2. 馬斯洛需求五個層次
生理需求、安全需求、社交需求、尊重需求、自我實現
6.3. 需求管理的四個環節
采集需求、分析需求、篩選需求、處理需求
6.4. 需求分析四象限
重要并緊急、重要不緊急、不重要但緊急、不重要不緊急
7. 需求分析及產出
WWH法：是什么？為什么？怎么做 ？
需求分析貫穿整個產品全生命周期，包括產品概念期、產品設計開發期、上線后-成長期、成熟運營期、產品衰退期。
7.1. 明確問題
7.1.1. 需求收集渠道
明確需求收集渠道，確定用戶群體和需求調研的方法，比如問卷調查、訪談、名義小組會議、頭腦風暴法、觀察法、親和圖、蒙特卡洛技術、魚骨圖、提示清單等方法。
提出需要解決的問題，明確需求帶來的價值。利用目標用戶、場景、問題三個思考維度，去定義真正意義上的產品需求，示例如下：
通過用戶針對不同的場景，明確了主要問題需求，怎么思考產品需求怎么體現到產品設計上面，從而體現產品價值，包括產品設計成型后的市場推廣方式至關重要。產品問題產生的產品價值示例如下：
7.1.2. 拆解需求
拆解需求指的是把已經明確的問題，從多個維度進行拆解，目的就是為了找到更合適的解決方案。
拆解問題的五個維度分別是積極層面、否定層面、轉移層面、拆解、腦洞。
? 積極層面：通?？梢圆鸾獬鲈趺醋鰧τ脩魜碇v可以產生更積極的情感。
? 否定層面：通常可以拆解，即使不做什么，依然可以產生好的結果。
? 轉移層面：轉移指的是不直接單獨解決當前用戶的問題，通過轉移法，用戶轉移、問題轉移等。
? 拆解：把當前問題刨根問底的拆，挖掘更多的可能性、找到問題本質。
? 腦洞：這個更多的靠靈感、經驗等進行頭腦風暴，補充其他維度考慮不到的地方。
7.1.3. 需求管理
7.1.3.1. Kano模型
Kano模型是對用戶需求分類和優先排序的工具，以分析用戶需求對用戶滿意的影響為基礎，體現了產品性能和用戶滿意之間的非線性關系。
Kano模型把需求分為五類：基本型需求、期望型需求、 興奮型需求、無差異性需求、反向型需求。怎么通過模型知道用戶的需求類型，示例如下：
7.1.3.2. 時間管理四象限法
時間管理四象限法分別按照緊急程度和重要程度分為重要且緊急、緊急不重要、重要但不緊急、不緊急不重要。具體示例如下：
本方法的優勢可以評估產品開發的時間優先級，對于一些重要且緊急的功能開發能夠做到心中有數。
7.1.3.3. ICE排序法
ICE排序法是一種比較嚴謹科學的分析需求的方法，通過幾個幾個維度給需求進行相應的打分，以總分的高低去排序。
I（Impact）：影響范圍。
C（confidence）：對上線效果的自信程度評估。
E（ease）：開發難易程度（工作量+技術難易程度）評估。
7.1.4. 需求輸出
7.1.4.1. 輸出內容
思維導圖、業務流程圖、原型圖、需求說明文檔、功能說明文檔等
7.1.4.2. 輸出角色
業務人員、技術經理、后端技術人員、前端技術人員、UI、UE人員
7.1.4.3. 溝通樣例
（一）業務人員
面對業務人員，主要是講產品功能實現和重點業務流程，主要依靠思維導圖或者原型圖去講解產品可帶來的價值和解決了什么樣的問題。
（二）后端開發人員
面對后端開發人員需要給技術經理協調和溝通，確定的項有數據庫怎么寫，字段（數據結構）怎么定義，最后生成什么樣的表，當用戶進行相關業務操作時（增刪改查），怎么去設計接口，接口設計對應數據庫，先調用什么樣的接口，傳輸什么樣的參數，返回什么樣的結果。進行前端解析，后臺數據圖形化，最后呈現給業務用戶。
（三）UI、UE人員
面試UI、UE人員從行業特征、用戶群體特征、用戶習慣等方面來確定產品視覺和交互形式。
（四）前端開發人員
通過評審后的UI設計稿交付給前端人員，進行前端頁面的開發。
（五）測試人員
面對測試人員，跟進產品測試情況，提供產品需求文檔和原型圖及UI設計圖，編寫測試用例，把控測試時間，協調相關資源，保證產品順利產出。
8. 產品迭代規劃與需求跟進
8.1. 產品全生命周期規劃
根據產品規劃的全生命周期，確實不同階段需求的落地情況，根據用戶對于需求的滿足情況。
8.2. 業務流程分析
根據已開發上線的所涉及的業務流程，先分析完整性，基于本流程從專業角度提出改進方案，不斷優化該流程，確定流程的可用性。特別是一些核心業務流程，要做到簡潔高效，提高效率。
8.3. 新需求管理
通過產品的不斷使用，收集和接收不同的新需求，并定期開展新需求評審，逐步完善到產品里面，以最小調整為基線確定新需求的開發計劃，保證產品總規劃的穩步實施。
8.4. 里程碑管理
把控整體產品里程碑管理，確保產品迭代重大節點變化能夠有理有據，為產品的營銷工作，提供支持?？偨Y產品優勢和產品亮點，對產品的銷售情況負責。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
情緒板的作用？
情緒板能夠更加幫助設計師與業務方達成設計共識，并且能夠幫助設計師定義視覺風格與找到設計方向，使設計更加合理，為產品賦能。
如何運用情緒板定義視覺風格
情緒板的制作流程
情緒板的制作流程大致分為5步：
1、明確原生關鍵詞
了解項目背景或需求本身的方向，通過內部討論，用戶研究和品牌等方式定出3-5個原生關鍵詞，通常定出的詞都比較抽象。
2、挖掘衍生關鍵詞
在原生關鍵詞的基礎上讓參與者發散得到更精準的二級詞語，能夠更加準確的定位到圖形傳達方向，最好是一些情緒和視覺表達的形容詞。
可通過視覺映射、心境映射、物化映射，得到用戶理解的“抽象關鍵詞”所對應的“具象定義”。
3、搜索關鍵詞圖片
確定完關鍵詞后，可在pinterest、花瓣等設計網站上建立情緒板圖庫，按照人，事，物，形、色、字、構、質等方向收集大量的對應圖片素材來匹配關鍵詞。
4、建立情緒板
對應每個關鍵詞，從情緒板圖庫中提取高質量能夠代表關鍵詞意思的人，事，物，形、色、字、構、質去展示，以此喚醒用戶對關鍵詞情緒體驗。
5、提取視覺風格準則
根據情緒板圖庫中的圖片提取出視覺風格準則，包含：圖形、顏色、質感、構成、字體等視覺風格準則。
舉個案例說明：
明確原生關鍵詞
討論原生關鍵詞
了解項目背景或需求本身的方向，通過內部討論（可叫上產品、運營、老板等進行討論），用戶研究和品牌等方式定出3-5個原生關鍵詞，通常定出的詞都比較抽象。
確定原生關鍵詞
從討論的關鍵詞中提取3-5個最適合的關鍵詞。
2、挖掘衍生關鍵詞
在原生關鍵詞的基礎上讓參與者通過視覺映射、心境映射、物化映射，發散得到更精準的二級詞語，能夠更加準確的定位到圖形傳達方向，最好是一些情緒和視覺表達的形容詞。
3、搜索關鍵詞圖片
確定完關鍵詞后，可在pinterest、花瓣等設計網站上建立情緒板圖庫，按照人，事，物，形、色、字、構、質等方向收集大量的對應圖片素材來匹配關鍵詞。
4、建立情緒板
對應每個關鍵詞，從情緒板圖庫中提取高質量能夠代表關鍵詞意思的人，事，物，形、色、字、構、質去展示，以此喚醒用戶對關鍵詞情緒體驗。
5、提取視覺風格準則
根據情緒板圖庫中的圖片提取出視覺風格準則，包含：圖形、顏色、質感、構成、字體等視覺風格準則。
總結
情緒板作為一種常用的設計方法論，能夠幫助設計師更加合理的總結出合適的視覺風格。設計不僅僅是只是跟隨著設計趨勢，怎樣找到適合產品的視覺風格，是每個設計師更需要去掌握的內容。
以上內容，是學習如何定義視覺風格的其中一種方法，希望對大家有所幫助，如有不同意見，歡迎指正！
圖片版權歸原作者所有
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近幾年不管是WEB端頁面還是APP，使用交互動效越來越多，加了動效的UI頁面看上去不再那么枯燥無味，能很好的抓住用戶眼球，既提升了用戶交互體驗同時也更好的展示了產品。通常我們會在哪些場景下使用動畫呢？例如菜單圖標、載入動畫，空白頁，產品介紹等都可以使用動畫，下面是一些示例：
今天給大家講解一下如何制作一個svg格式的動畫，開始之前先和大家說一下svg是什么，目前web或者app中的動畫大多使用svg格式，svg英語全稱是Scalable Vector Graphics，它是一種可縮放的矢量圖像圖形文件格式，這種格式的文件具有邊緣清晰、文件體積小、傳輸方便的特點，因此在網頁設計以及APP中比較常用?？梢允褂肐llustrator軟件或使用
專業的svg編輯器進行設計輸出，svg支持瀏覽器及任何文字處理工具打開。因此svg格式是一種開放標準的矢量圖形語言，可讓你設計激動人心的、高分辨率的圖形頁面。
如果你具有一些代碼能力，還可以直接用代碼來描繪圖像，通過改變部分代碼來使圖像具有交互功能，并可以隨時插入到HTML中通過瀏覽器或編譯器來觀看。
綜合起來SVG優勢如下：
可被非常多的工具讀取和修改
與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 可隨意縮放
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）
SVG 可以與 JavaScript 技術一起運行
SVG 是開放的標準
SVG 文件是純粹的 XML
目前制作SVG動畫的軟件主要使用AE（需要插件加持）或者在線的SVG動畫工具，如svgjson.com等，如果使用AE需要安裝bodymovie插件，我平時大部分動畫都是使用svgjson工具完成的，所以今天給大家分享的svg動畫教程主要也是使用在線工具svgjson來完成（完全免費），它支持導出svg或json格式動畫，可以滿足不同的需求，目前該軟件雖然是英文版的，但是上手還是比較容易，為了更好讓英語不是特別好的同學快速上手，我下面做了一個關鍵功能的中英對比說明。
軟件地址：https://www.svgjson.com/editor-page/
如制作一個loading動畫
制作要點：
創建2個圓形，一個底色（淺灰色）一個旋轉的圓圈（藍色）
在Store中設置Stroke Dash Array的圓圈長度，圓圈長度可以從Information中獲取
3. 設置Stroke Dash Array后，開始旋轉圓圈的長度，我設置了400，大家可以根據自己的需要進行個性化設置
4. 第四步我們來設置動畫，先選擇藍色的圓圈，然后在Transform中設置旋轉動畫，第0秒為0，第10秒為3600
度（記住別忘記按關鍵幀動畫按鈕，第一幀設置了動畫，后面更改參數會自動生成動畫關鍵幀）
5. 按空格鍵或者點擊時間條上的播放按鈕看看效果，如果沒有問題選擇導出SVG動畫，一個loading動畫就完成
了。
完成后效果
上面的動畫是通過Angle（角度）來實現的旋轉動畫，接下來我們可以通過Stroke Dash Offset來設置旋轉動畫
loading動畫進階教程
先看最終效果
由于svgjson的繪制能力相對較弱，所以我在其他軟件中先畫了如下圖這個動畫的基本元素（需要保存為svg格式），然后通過svgjson中的導入svg方式導入。
首先把“按鈕左”和“”放在一起拼湊成一個圓，然后把“按鈕中間部分”也放在圓中間，并且把它的Scale X值設為0.
把載入的圓圈放在剛剛的紅色圓中，并設置Stroke Dash Array值和Stroke Dash Offset動畫（具體參照上面的動畫教程）
把載入成功的勾號放在載入圓圈中，然后設置動畫Stroke Dash Array值和Stroke Dash Offset動畫
再設置按鈕左和按鈕右位移動畫，同時也需要“按鈕中間部分”的Scale X的動畫
通過上面的2個教程，相信大家對svgjson這個軟件有了一個基本的使用能力，svgjson中的Stroke屬性下的Stroke Dash Array和Stroke Dash Offset功能還是蠻強大的，可以通過這2個參數設置很多豐富的動畫效果。
下面的動畫主要使用x軸縮放功能實現的交互，當然也可以使用Stroke Dash Offset參數實現動畫效果。
這個動畫的核心點在設置對象的中心錨點位置，默認對象的中心點在中心，這個教程是把對象中心點移到了左側
接下來給大家演示如何制作一個變形動畫，變形動畫也是一個非常常見的交互
這個教程重點是對象的縮放，縮放前需要設置錨點位置，然后就是設置x軸和y軸的偏移值。
總體來說，svgjson網站提供的動畫能力還是很強的下面是我制作的項目樣例：
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
屏幕有效利用率這個話題想必大家并不陌生，在B端產品中，越來越多的產品和用戶把目光聚焦到屏效上來。站在體驗設計的角度，立足交互和視覺的設計手法，挖掘屏效提升的設計價值，讓屏效最大化是提升用戶體驗的合理方法。
在此文中，對于整個設計（交互、視覺）的手段方法不做過多的詳細探討，我們重點闡述如何利用實驗研究的手法驗證屏效提升。以某B端項目為例，利用科學的實驗研究方法，通過設計實驗假設、提煉任務場景、準備實驗物料、進行控制變量等完整的實驗方法，來驗證該項目中屏效提升的設計方法（提高信息密度、縮短操作路徑以及信息重組）最終是否提升屏效。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
目前為止，我發現大部分市面上的文章都在告訴大家，競品分析怎么做、場景分析怎么做、體驗地圖怎么做、訪談怎么做、度量模型怎么做，但唯獨少了最后落地方案怎么做。
我曾經試著利用迪士尼和環球影城的兩個案例來優化他們的產品，但是很多人開始無腦噴，因為沒有業務做背景，別人想怎么說怎么說，都是“我覺得”。正因為這樣，市面上你幾乎看不到有什么文章教大家實際的交互解決方案，因為怕被噴子噴，反正沒有業務背景你也無法論證自己方案的合理性，靠經驗？別人不認同，你也沒有數據來說服別人，所以這事大家都不敢去做。
但是沒有業務背景的交互方案就不能做了嗎？當然不是，有了業務背景你可以更針對性的選擇你自己知識庫里的方案和頁面結構來解決業務和用戶的問題，那么前提是你的知識庫里有那么多案例才行，否則有再多再清晰的業務背景，你掏不出來，沒有用。
所以從今天開始，我會陸續提供一些咱們小伙伴在做練習時候遇到的一些交互問題，大家一起來探討一下。業務背景會適當的提到，但是還是以交互方案的多樣性為主去討論，再強調一遍，不要揪著業務去框住自己的思維。
學習交互也好，學習UI也罷，如果你完全不懂理論是行不通的，所以很多剛入行的小伙伴基礎不夠扎實，覺得理論沒用，這是不對的，理論有用但是也配合實踐，利用更多的實際案例去加深理論的印象，做到舉一反三，這樣的效果比較好。所以在做案例之前大家務必也要多去了解一下交互的設計理論和基礎指南。
其實以前有文章聊到過，但是大家都有不同的聲音，那么我們就繼續來探討一下有哪些不同的方案。既然業務背景不確定，那么我們的交互方案就不存在最優解。
下文描述以圖片順序做記號，例如第一張界面即為p1。
產品功能為什么這么布局、為什么用這個控件、為什么用這個交互形式，取決于業務目標和設計目標，還有用戶的心智模型，以及該單元本身的屬性。那么首先來看案例1-p1，該練習的背景沒有描述業務特征，所以這個布局說明，該產品是一個平臺型的產品，有各種球館的列表，除了細節不完整以外沒啥大的問題。
再看p2和p3這兩個頁面是這個練習的核心頁面，我們總說產品形態取決于產品本身的定位，平臺型產品的球館詳情大致是可以這樣的，如果產品是自我品牌的產品，那么形態就會發生很大的變化。例如你可以在美團上點星巴克，你也可以在星巴克小程序上下單，但是這兩個應用中的星巴克，是不一樣的內容呈現。
我們從p2依次往下看，從業務和用戶兩個角度來看這個方案，首先從業務的角度看，有問題的點在于場地說明，平臺型的產品一般都會給商家做管理后臺和營銷工具，但是場地說明這個板塊就有點雞肋了，
原因1: 大部分球館的標準都是統一的，不可能一塊木地板一塊pvc這樣錯開，很難看，也不可能。如果有區別那么只有尺寸規格的區別。
原因2：場地類型展示并不是核心用戶需求，只是一種輔助決策，并且是“一次性”決策，該流程的核心任務還是要讓用戶可以去預定場地，但是目前整個頁面只有底部一個預定的按鈕（等會說這個按鈕）
原因3: 頁面頂部有場館的圖片及環境介紹了，所以場地圖片展示可以集中在頂部的圖片區域展示，例如大眾點評，點開后會有更多分類的圖片和視頻標簽。
所以中間這塊區域可以展示快捷預定的入口，比單純展示場地類型性價比高的多。
那么底部是否需要有一個立即預定的按鈕呢？如果這個產品是一個專門用來給籃球館做推廣的平臺，我覺得可以放。但如果是類似大眾點評這樣的平臺的話，就要繼續思考了。
而我們看到大眾點評為什么底部不做成一個大按鈕的形式，豈不是會更加強化這個任務的核心目標嗎？平臺類型的產品對接商家的種類非常多，同時類似這樣的平臺產品核心的產品定位是給幫助用戶去找到好吃、好玩、好看的地方，側重的是真實用戶反饋，所以說到真實用戶反饋這里再舉個小例子，大眾點評在評價的時候當點擊第五顆星的時候是顯示4.5星，而不會直接顯示5星，要再次點擊后才會變成5星。
產品認為為了快速點擊5星好評的行為并不是真實反饋，當真實想要給5星的時候才會再操作一步（題外話）。
回正題，平臺型的產品定位是為了把所有商家和用戶進行高效的匹配（花錢匹配度、曝光更高），而不是為某一個商家去做轉化。并且使用該產品的用戶場景和需求比較豐富，大部分用戶都只是來看看這些場所的評分、口碑和詳情。
所以底部就不會只放一個預定/買單的大按鈕，而改成了用戶反饋的相關功能。為了幫助商家做銷售，營銷管理工具做的還是很成熟的，什么拼團啦、套餐啦、代金券的工具啦等等。
有同學會問，那不就是大眾點評嘛，有什么區別。首先不要為了不同而不同，為了創新而創新，如果有更優秀的解決方案當然是最好了，但在當下的環境中，沒有什么必要。如果一定要做差異化，一定是業務訴求出現了。比如這個產品變成了自有品牌做的一個app/小程序，而不再是靠平臺幫我去宣傳籃球場地，那么會變成什么樣呢？
那我們可以想到的時候在預約入口的地方就會發生了變化（同星巴克），平臺通過列表進入，而自有產品則是在產品首頁中放一個入口，形態也完全改變，首頁不僅僅有場地預定，還會有私教培訓、課程套餐、活動組織等等，圍繞著這個場地衍生出很多的業務。并且像用戶評價這個東西，在自有產品中也變得不那么透明，表現形式肯定也會更加弱化。
所以在本身是平臺的屬性下，這個頁面正常就是這樣，p2缺少了用戶側的一些支線場景和功能的補充，例如咨詢入口、舉報入口等支線的功能。
再看p3，點擊預約入口后開始進行選擇場地的交互，選擇場地需要幾個關鍵要素：1.日期 2.時間 3.場地號 4.場地規格 5.價格，那么這里又涉及到業務背景了，場地號是什么？場地規格又是什么？商家如果要讓別人預定場地，是按照全場預定還是可以半場預定，場地的類型是否有多樣，都會影響到我們這整個預約的交互流程。
p3的這個方案的問題在于：
1.信息關聯度沒做好，這里的日期和時間要更緊密，和買電影票不一樣。
2.時間的交互效率低，并且沒有展示全，可擴展性不好，如果場館早上8點開門怎么辦？商家要求最低2小時起訂或者1小時起訂怎么辦？
3.半場和全場的選擇不夠簡單，全場其實等于兩個半場，而現在的展示形式變成了一個切換按鈕，雖然加了一個箭頭，但是這樣的交互形式和控件的用法是不符合常規的，并且指向性很差，當切換到3/4號場地的時候箭頭就指向了半場，這樣就會產生歧義，所以是不可行的。
所以我們這里就會發現這些信息是需要聯動的，聯動表單最常見的就是橫縱聯合。一般最初級的做法就是一個行為管一個信息，就比如這樣：把選項放入picker中
這種交互方式一般不單獨用，因為其實算是一種樹狀結構，這種結構一般運用在添加收貨地址等完全獨立的信息填寫或者一些多行表單中。
而這里的選擇日期、時間、類型、編號并不完全獨立，而且需要實時查看。
所以這樣也不夠直觀，picker擋住了價格，無法實時查看。更何況在這個頁面中所有內容都收起來版面利用率大幅下降，交互層級更深了。
再看一些其他的方案，難道就一定要選場地嗎？我只需要時間、日期行不行。不行，為什么？
那我們再來看下面這個方案：
這個方案中，同學把圖片加入進來，希望幫助用戶去輔助決策，其實沒必要，之前也說過，圖片屬于認知信息的一部分，在外面認知完了解過就可以了，里面就不需要再展示一遍了，可能也是為了不讓頁面這么空，因為底部用了一個卡片的塊選擇日期時間。但是少了場地類型的選擇（半/全）長，為什么說半全場和場地號一定要選呢？因為有很多場景缺失了，比如你要幫朋友訂另一個場地怎么辦？我要訂兩個半場打全場怎么辦？每次預定只定了時間，老板還要手動標記哪些場地在哪些時間沒有預定，非常的麻煩。所以不選擇場地是不行的。
再來看一個方案：
這個方案的選項和操作過于分散，而一般也不會將需要交互的選項放在左側，有個原則就是內容在上/左，操作在下/右，雖然不能一概而論但大部分情況都要遵循。參考古騰堡圖標原則，左側的日期不經意看以為是一個標題。大部分第一次做交互原型的同學可能都會這樣，一些按鈕和控件的用法和該放、可以放的位置不太清楚，在做交互的時候還有一件事要清楚，就是誰控制誰，控制器怎么觸發。
而這個方案和p3也是一樣，觸點順序亂了：選擇日期-選擇場地類型-選擇場地號-選擇時間。因為預約場地的場景是，今天小王想約朋友去打球，他問了一下朋友哪天有空，朋友說下周六都可以，最好是下午，于是小王打開應用軟件，選擇了下周六的日期和下午的時間，看看還有哪些場地可以預約。
同樣也是順序亂了：場地編號-日期-時間。為什么順序很重要，這就和我們買電影票的習慣一樣，大部分情況是我們想要看某一本電影，然后再考慮自己的時間和去哪個電影院，有人說，我就不一樣，我會先選擇電影院，比如我逛街途中突然想看電影了，再看看電影院最近有什么電影。我只能說，滿足大部分、大概率的用戶需求和場景才是正事，產品是無法滿足全部用戶的。
拋開日期和時間的關聯性，這個方案還有一個問題就是如果要預定多個場地就會比較復雜，例如只有1號場地和9號場地的某一個時間段可以預約，那么就需要用戶在幾個場地中展開收起進行操作，非常繁瑣。
再來看一個案例
這位同學將步驟分為了先通過picker選擇日期和時間，確定后再選擇場地。這個流程問題就在于：
1.picker用的不對，picker雖然叫做選擇器，但往往不會作為一個中間任務承載的模塊去用，而是對于一個頁面中需要選擇一些選項的時候才會用到，選擇完后依然停留在該頁面。否則進入下一個頁面后，再返回，就看不到picker了，還要再選擇一次。
2.場地可能會出現被人預定的情況，所以當選擇日期和時間后再選擇場地，如果被預定了，那么用戶就會比較抓狂。
所以在這個頁面中我們會選擇將其全部展開，怎么展開呢，有人覺的日期時間可以不動，把場地和類型展開。有人覺得全部展開才更直觀，那我們來看這兩個方案
如果日期和時間不展開，會有一個問題，那就是無法選擇多個時間段的場地，只能選擇某個時間段的多個場地，無法滿足這部分用戶需求，并且在信息展示上也會比較擁擠。那么我再看看全部展開，全部展開之后將時間和日期也做一個橫縱形式，然后將半/全場和編號進行結合，默認選擇一個塊即為半場，但是在場地命名上還是需要做一個小心思，那就是如果有人要包全場，如果我們單純給場地編號1、2、3、4….就會讓用戶不知道哪個半場和哪個半場是一體的，所以命名就可以改成1號場A、1號場B…...
當然如果不要編號問題也不大，主要是場地還有些特殊情況，比如不同場地的通風、燈光的區別，所以會有場地編號。
在之前的留言中，也有小伙伴會問，即便是自有產品，用戶在選擇場地的時候到底是否需要再看場地的圖片，直接從入口進來不顯示圖片就讓用戶去定場地合理嗎？這里主要就是分針對老用戶還是新用戶，只要去過一次的用戶基本上也就不需要再看場地圖片了，新用戶的話就需要，他們還需要知道場館的地址、聯系方式等等，所以這些內容會聚合在選擇場館的上一步，也就是首頁，具體首頁可以怎么放這些內容留給大家思考。
我們講到這里，還有一些抬杠冠軍又要說了，一個頁面這么多信息太復雜了，我選擇第一個方案，多簡單，就兩個選項。如果我們知道復雜性守恒定律，那么不管怎么壓縮信息復雜度是不變的，把那么多場地選擇壓縮在一個picker中會更加復雜和難操作。
其實當大家看到這些原型的時候，都明白問題出在哪里，真實情況是，如果讓你們從0開始，一下子就懵逼了。比如預定籃球場地的這個流程，從無到有，如果讓你自己來設計一遍，你可以完整的做下來嗎？每一個細節是否到位。大家產生了一種幻覺，看懂了，等于自己會做。一定一定要腳踏實地去做一遍才知道自己哪里搞懂哪里沒有搞懂。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
什么是設計？簡而言之，就是用邏輯和美來解決人們的問題，滿足他們的愿望。在本文中，我們將討論美在用戶體驗設計中的作用：讓我們看看它如何讓用戶和企業都感到高興。
為什么美對設計很重要
網站或移動應用程序應該有效、輕松、直觀地解決他們的問題。但是接下來會發生什么，當產品不再是唯一的，不再是獨家的東西，自然競爭開始發揮作用時？人們開始看得更深，爭取更多。他們將審美愉悅和情感吸引力添加到他們的愿望清單中。而在兩款功能同樣出色的產品之間，絕大多數情況下，用戶會選擇美觀的一款。
基于需求層次，人們獲得的越多，他們的選擇就越復雜。教育和收入水平讓他們思考超越功能：除此之外，用戶追求和諧與美感。所以，美的作用越來越高。
以下是美在用戶體驗設計中以這種方式起作用的一系列原因：
1) 它使設計充滿情感，也就是人性化
2) 它使數字事物與現實世界保持聯系
3) 它支持可用性
4) 滿足審美需求
5) 它將不同的事物與一種風格結合在一起
6) 它讓產品在競爭中脫穎而出。
美與美學是連接設計的過去、現在和未來的堅實橋梁。今天，新的布局和圖形基于數百年來收集的豐富的世界文化遺產?，F代設計師和藝術家通過一些趨勢和創新對其進行改造：建立一個新的文化歷史圈，他們保留了歷代最優秀藝術家的作品。這就是藝術和美學吸引力在設計中發揮作用的時候。我們不是在重新發明——我們是讓它變得現代化，讓它解決人們的問題。
審美-可用性效應
用戶體驗設計大師尼爾森諾曼集團將其描述為審美可用性效應現象。它指的是用戶傾向于認為有吸引力的產品更有用。人們傾向于相信看起來更好的東西會更好地工作——即使它們實際上并沒有更有效率。這種效果是為什么良好的用戶體驗不能只是功能性UI的一個重要原因——設計一個既有吸引力又實用的界面是值得付出努力的。
基于此，讓我們考慮一下美感對UX 目標的影響。UX設計有 4 個基本方面，外觀視覺和諧呈現出賦予所有要點的因素。
可用性意味著產品可以工作并且用戶了解如何工作。
可訪問性則允許界面適用于具有不同能力和跨各種設備的不同人。
實用性意味著它可以解決問題。
可取性意味著它是令人愉快的，并使用戶感到高興。
業務目標
但是，啟動新產品或改進知名產品的公司也必須從另一個角度思考。它通過各種財務因素、轉換、銷售和所有其他業務來運作。
銀幕上的美會影響他們的商業目標嗎？確實會。色彩理論和心理學、屏幕上的和諧、可讀的文本內容和有吸引力的圖像不僅是讓用戶開心的關鍵。
用戶體驗美學元素
不同的元素可以讓美融入用戶界面并構建其美學，其中包括：
a) 排版
b) 布局
c) 照片
d) 插圖
e) 3D圖形
f) 動畫片
g) 視頻
h) 人物
所有這些元素構成了交互的美感，并直接影響積極的用戶體驗。
一致性
從美學可用性效應考慮的另一個核心點在于用戶體驗和業務的十字路口——一致性。正如雅各布尼爾森所說，“一致性是最強大的可用性原則之一：當事情總是表現相同時，用戶不必擔心會發生什么?！?
事實上，它比交互更進一步。它還有助于建立強大的品牌。標志和品牌商品、網站、應用程序、電子郵件和社交網絡——產品與其用戶的每個接觸點都應遵循一個總體理念和一組價值觀，并以一致和完整的風格包裝。
最后
在全球范圍內，所有的設計解決方案都應該回答一個問題——Why？我們做出的所有決定都應該從“Why”開始，這將形成如何與用戶交談，無論溝通的來源是什么。無論與品牌的連接點是什么，您都應該確定與您交流的是什么。這會建立信任感并使品牌更強大，而這正是美有助于使用戶體驗更加穩固和有用的地方。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
絕對時間包含：年月日、時刻
絕對時間適用于對時間精確度要求較高的時候，比如說訂單創建時間、某項活動開始/結束時間、特定節假日簡稱等。絕對時間在信息表達上更加精準、正式，給人確定感和安全感；但是內容顯示過長，占用的空間較大。
相對時間的展示形式：剛剛、XX分鐘前/后、XX小時前/后、X天前、昨天、明天、今天等
相對時間適用于對時間精確度要求不高的時候，比如說消息、通知類功能、Feed流。采用相對時間對用戶來說理解成本低，不用去往前推算出發布的具體時間點；但是不夠精確、并很難衡量兩個時間點的臨近性。
目前主流App上，年月日的常見的用法有“2022-01-01”、“2022.01.01”、“2022/01/01”、“2022年01月01日”、“2022-01-01 ～ 2022-12-30”，那這些日期格式是否都正確呢，日期的連接應該使用什么標點符號？
《中華人民共和國國家標準GB/T15834-2011標點符號用法》中對于連接號、點號、分隔號的使用場景有明確規定。
連接號（短橫線“-”、一字線“—”、波浪號“～”）：標示某些相關聯成分之間的連接；
點號（.）：作用是點斷，主要表示停頓和語氣；
分隔號（/）：標號的一種，標示詩行、節拍及某些相關文字的分隔。
基于國標對于連接號、點號、分割號的使用場景說明，用阿拉伯數字表示年月日時應采用短橫線“-”。在比較正式的文件、公告中，日期一般不用分隔符連接，而是直接采用中文的年月日連接。
Antdesign規定日期范圍需要在日期或時間范圍之間顯示波浪號 （前后需要空格），這種方式是不符合標點符號的使用規范的。
在標示時間的起止時，應該使用一字線“—”，而非波浪號“～”，波浪號主要用于標示數值范圍而非日期的起止。日期帶有分隔號橫短線“-”時，可以采用“至”作為連接符；日期不帶有分隔號橫短線“-”時，可以采用一字線“—”作為連接符。注意日期與連接符之間用「空格」隔開。
時間計時方法包含十二小時制、二十四小時制。在設計過程中注意區分十二小時制，上/下午和A/PM的位置區別。
當日期和時間連在一起時，兩者之間用「空格」隔開，如“2022-01-01 16:00:00”、“2022年01月01日 16:00:00”。
涉及到周的時，可以將周放在日期與時刻之間，用「空格」隔開，如：“2022-01-01 周三 16:00:00”、“2022年01月01日 周三 16:00:00”。
涉及到日期和時間范圍時，可在表示日期范圍的基礎上添加時間，如“2022年01月01日 16:00:00 — 2022年01月01日 16:00:00”、“2022年01月01日 16:00:00 至 2022年01月01日 16:00:00”、“2022-01-01 16:00:00 至 2022-12-30 16:00:00”。
以月、日為標志的事件或節日，用漢字數字表示時，只在一、十一和十二月后用間隔號；當直接用阿拉伯數字表示時，月、日之間均用間隔號。
設計雖然有很多的表達形式，但還是需要遵循文字規范哦。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn