整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
019-10-28 20:49
10月23日，榮耀手機官方宣布Magic UI 3.0的升級公測計劃正式開啟，今日，榮耀手機官微又公布了升級路徑，四款榮耀機型——榮耀20、榮耀20 PRO、榮耀V20和榮耀Magic2的用戶均可在“花粉俱樂部”APP進行升級申請，只需八個步驟即可開啟全場景式智能生活體驗。
公測升級路徑，八步簡單操作即刻開啟品質生活
自榮耀方傳出Magic UI 3.0的升級公測計劃后，便一直備受廣大用戶的期待。在此次升級計劃中，Magic UI 3.0在產品消費、智慧生活等方面都體現出了強大的技術性突破。不論是系統流暢度還是視覺呈現，都將為相關用戶帶來更為優異的使用體驗。現在，只需8個升級步驟，即可輕松暢享新系統下的高品質生活。具體步驟如下所示：
人性化AI美學彰顯品質升級，無感無縫智慧生活全面暢連
得益于Magic UI 3.0的賦能，極具產品競爭力的榮耀20系列在麒麟980的強大AI能力下，將在更加注重產品的人性化美學設計的同時，優化更多的產品細節體驗，全面革新用戶的消費使用感受。
例如，其采用了可以AI美學分析的“雜志鎖屏”功能，通過AI對雜志鎖屏的圖片進行布局分析，使文字布局“因圖而異”，實現媲美雜志封面的專業美工效果。而且為了提升系統整體交互體驗，Magic UI 3.0將“手、眼、心”合一的設計理念運用在點擊動效、切換動效、返回動效中，為用戶帶來更加自然流暢的綜合感受。
此外，Magic UI 3.0不但可以一次開發多終端部署、很好地兼顧分布式安全，還突破性地打破了Windows與Android的系統壁壘，實現了雙系統下的同屏操作、無縫拖拽的智能化文件互傳，以及無感、無縫連接的智慧行車高級體驗，讓用戶擁有的電子設備能夠實現完美的互助共享，感受高品質智能生活。
如虎添翼，榮耀20系列成最具競爭力手機
除了軟件的升級，榮耀20系列自身還搭載了出眾的硬件基礎和算法性能。旗艦芯片麒麟980保證了榮耀20系列強悍的游戲性能以及出眾的AI性能。后置4800萬超清AI四攝鏡頭、業界最大F1.4光圈、雙OIS四軸光學防抖以及204800 ISO超高感光度等硬核科技，保證了用戶白天、黑夜拍照的個性需求，而五項全球自研黑科技更是讓榮耀20系列手機成為同價位段最具競爭性的手機之一。
出色的性能，強悍的配資，相信適配升級Magic UI 3.0后的榮耀20系列，能夠以更強大的軟硬件協同式操作，在消費體驗和共享互聯等方面帶來更加強悍的性能反饋，從而完成智慧生活的新迭代升級。
責編：黎曉珊
版權作品，未經環球網 huanqiu.com 書面授權，嚴禁轉載，違者將被追究法律責任。
為UI設計師，整理設計規范也是設計能力的一種體現。所以，無論是自己設計創作的階段還是和程序員溝通推動產品開發階段，你的設計規范是否完善，對產品的質量起著決定性的關鍵作用。
在UI設計的過程中，設計規范是一個關鍵步驟。如何通過設計規范提高品牌一致性和推動開發高度還原設計？
這里，為大家整理了設計精細并且優質的設計規范模板，干貨多多，有助于你整理設計規范的時候理清思路，完善細節。
先為大家整理了設計規范中的分類情況，UI設計規范有幾大分類組成，分別是：Logo、標準色、字號、段落設置、圖標、圖片、間距、圓角值、大小、陰影、組件等。
品牌印象的直接感受，根據頁面不同背景所使用的Logo圖也不同。將產品中所使用到的Logo統一分類，以下引用Moby’s Petshop UI Style Guide的Logo資源例舉說明。
Moby’s Petshop UI 的Logo由圖形和文字組合而成，而品牌色為藍色，Logo的使用也需要考慮到Footer黑色背景下的Logo。所以用Logo的橫豎向排版和單個Logo圖形來分類更好。
分類里面則展現品牌色的Logo、品牌色背景的Logo、Footer黑色背景的Logo。
顏色是設計最重要的部分，沒有之一。細節決定品質，所以對顏色的運用格外細致，顏色的搭配直接決定產品的品質感。顏色大致可分為品牌色、文本顏色、背景色、線框色等。給顏色添加關鍵詞，明確用于什么界面。
以下引用real-pixels UI Style Guide的顏色規范，可以借鑒的是每個顏色不僅標注了顏色值，而且右側給出了顏色使用的場景，值得借鑒的是按鈕Normal狀態和Hover狀態的顏色值放在一起，這樣，對不同狀態顯示的顏色感受更直觀。
對顏色值統一規范命名變量，提高開發效率的同時更好的維護設計規范。
在前端開發中，對顏色值進行編號，這樣對代碼也有著極大的優化。定義一個設計規范的CSS樣式庫，開發過程中就不用重復修改CSS參數值，直接引用定義好的變量名就可以，這樣修改設計規范的成本大大降低。
字體是設計中必不可少的考慮因素，不同的字體氣質不一樣，并且不同場景下帶給人的感受也不一樣。所以需要在設計的時候考慮到字體的設計效果，然后在設計規范中注明。
以下引用的是Retail Banking Service UI Style Guide中的字體規范，在定義字體名稱的同時也定義了字體的風格，并且添加了不同字體風格的預覽效果，常見的字體風格有：Light、Regular、Italic、Semibold、Bold。
在實際的產品設計中，段落有很多種樣式，不同場景下的段落要求也不一樣。比如：閱讀內容的段落要求文本可閱讀性強，所以對字體、字號、顏色、行間距等要求簡單易讀。而帶有裝飾性的段落文本則不需要那么嚴謹，裝飾性強就可以。
需要注意的是：在定義段落默認字體的時候還需要定義一個后備字體，即默認字體不能正常顯示情況下顯示的字體。設計的水平層次就在于對細節的打磨，這也就是段落規范在設計中存在的意義。
圖標是重要的軟件標識，在設計資源中是最重要的模塊之一。在軟件產品中甚至可能每個頁面都存在圖標，圖標除了美化的作用以外，還有著明確指代含義的計算機圖形。
具體分為以下三個作用：
圖片也是屬于設計規范最重要的部分之一，按照用途分類整理圖片資源，設計風格系統化。
在設計的過程中，我們經常會使用一套規范的度量標準，來保持產品的一致性，分別為圓角值、間距、大小。
對度量解釋最好的是設計中經常使用到的柵格系統（Grid Systems），運用固定的格子設計版面布局，其風格工整簡潔。這就是我們在網頁和APP設計的過程中經常使用到柵格系統的原因。
陰影風格及參數也是設計規范中的一部分，在整理設計規范的時候，需要注意的是陰影的參數值是網頁中控制陰影的參數值，而不是設計軟件中的參數值。
舉個例子：網頁中陰影對應的參數值為：box-shadow: type:Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:#000000 ，不透明度：10%，這才是程序員需要的陰影參數值，否則最終開發出來的陰影會出現不一致的情況，無法達到規范的目的。
常用的UI組件（Component）：Button控件、下拉框、選擇框（單選\復選框）、時間選擇器、輸入框、搜索框、進度條、分頁器、提示框、警告框、表格、彈出面板、數字步進器、選項卡等。
Button控件
按鈕是最常見的組件之一，按鈕有5個狀態：Normal、Hover、Active、Disabled 、Loading。
需要在規范中分別羅列出這五個狀態，標注上對應的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文本大小、顏色值。如果是圖標按鈕的話，除了上述參數值以外還需要標注icon和按鈕文本之間的間距和icon圖標的大小。
下拉框是為用戶提供多個選擇的單選組件，優點是用最簡單的界面布局方式收納了很多的選項，需要注意定義下拉選擇框彈出的時候，鼠標移動上去的Normal、Hover、Active狀態。
顧名思義，單選框是眾多選擇里面選一個，而復選框是眾多選擇里面可以無限制選擇。單選框和復選框都需要三個狀態，即未選中狀態、選中狀態和不可點擊狀態。
時間選擇器：
時間選擇器是選擇年月日的組件，分別對應年月日星期的信息，在設計的時候需要考慮到4個狀態，分別是：Select、Not_Select、Hover和Disable，并且寫進設計規范。
輸入框：
輸入文本框是我們軟件產品設計必不可少的組件，文本輸入框有4個狀態：Normal、Active、Disable和Error。
搜索框：
和輸入框相同的地方是都需要聚焦然后輸入內容完成操作，應該有為Normal、Active、搜索下拉狀態、Error狀態。
進度條：
這個需要在規范中注明上傳進度條的整個交互操作流程，對Normal狀態、點擊上傳/拖拽上傳狀態、上傳中、上傳成功、上傳失敗，整個流程狀態的整理。在上傳過程中，任何用戶操作都應該有及時響應的動作，這樣用戶在使用的過程中才不會迷茫。
分頁器：
分頁器是用于切換內容頁面的復合組件，常規的分頁器有上下頁操作按鈕、分頁頁碼按鈕、輸入頁碼手動查找的搜索框，以及分頁器的4個狀態：Normal、Hover 、Active、Disabled。
提示框：
提示框是一個事件觸發彈出面板顯示的組件，經常使用提示框的地方是，刪除按鈕、疑難問題點、提示類彈出信息等。這個風格設計就比較多了，設計風格各不相同，定義底板樣式、文字樣式和陰影參數。
警告框：
頁面報錯時的顯示樣式，常用的警告類信息是：操作成功、提醒用戶注意、警告用戶注意等。
表格：
表格類信息居多，應重點整理表格樣式以及文本顏色大小。
彈出面板：
彈出面板主要由4個部分組成，分別是面板內的文本信息、按鈕、面板大小樣式、蒙版顏色和透明度。
數字步進器：
數字步進器屬于復合類型的組件，可以理解為按鈕和輸入框聯動的組件，所以輸入框和按鈕擁有的屬性狀態，步進器都有。
選項卡：
切換選項卡即切換內容，和下拉選擇框不同的是，選項卡是將多個選項都排列出來的單選組件，需要考慮4個狀態：Normal 、Hover 、Active 、Disabled 。
設計規范對整個項目的規范性推動很強大，但是需要花時間和耐心細心打磨，所以需要花費很多時間和精力去整理資料、編輯素材、分類整合，最后還要在設計軟件中將整個規范重新排列設計。
本文由 @ jongde 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Pixabay，基于 CC0 協議
概是18年的時候，那時候我還是一個很稚嫩的小前端，我記得很深刻，當前GitHub上有個叫做Screenshot-to-code的開源項目沖榜賊猛，短短幾天就獲得了好幾千的star，這個項目主要表達的是在未來三年內，深度學習將改變前端開發。它將會根據設計圖自動生成對應的html，css代碼，從而拉低開發軟件的門檻。
也就是說我們前端以后不需要再畫靜態了！
項目地址：https://github.com/emilwallner/Screenshot-to-code
Screenshot-to-code-in-Keras 是 Emil Wallner 實現的一個可根據設計草圖生成基本 HTML 和 CSS 網站的神經網絡。以下是該過程的簡要概述：
1）給訓練好的神經網絡提供設計圖像
2）神經網絡將圖片轉化為 HTML 標記語言
3）渲染輸出
Emil Wallner 分三步從易到難構建三個不同的模型：
這里只做簡單介紹，感興趣的朋友可以在頭條搜索中搜 Screenshot-to-code 即可看到更多詳細內容
前幾天體驗了一下藍湖內測的設計圖轉代碼功能，真的挺震撼的。廢話不多說，大家請看視頻！
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
（第二張示例圖中標簽文字溢出并不是bug，因為谷歌瀏覽器最小文字只支持12px）
從上面視頻可以看到，UI小姐姐只需要把畫好的項目設計圖放上去，我們前端就可以直接生成完整的靜態頁。目前來看主要支持vue和普通的html頁面。css倒是兼容得非常好，less和sass都支持不過這畢竟只是一個內測版，相信等正式推出時應該是可以兼容到react等主流框架的。
感覺這對我們前端來說其實還是利大于弊，因為前端最主要的交互和邏輯未來五年內應該是不可能像靜態一樣可以生成，那么設計圖轉代碼的功能的推出其實還是可以在一定程度上減輕我們的工作負擔。
因為畫靜態頁對大部分前端來說都是枯燥無味的工作。如果以后都不用畫靜態的畫，那么我們就可以有空閑時間來學習新技術，新知識。比如現在挺火的云函數啥的，學學總沒有壞處。或者學一門后端語言等都可以不斷完善自己的技術棧,提高自己的行業競爭力。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
