<p id="hlhh7"></p>

              18326051278

              O2O解決方案>>

              社區物業O2O
              連鎖電商O2O
              上門維修O2O
              農村電商O2O
              多用戶商城

              行業平臺類

              汽車服務平臺
              家居服務平臺
              綜合電商平臺
              家政服務平臺
              多門店商城系統

              網站解決方案

              全能型企業站
              營銷型網站
              高端定制網站
              品牌設計站
              HTML5網站

              APP解決方案

              生鮮APP開發
              物流APP開發
              家居服務APP
              汽車金融APP
              多用戶商城APP

              定制開發類

              APP開發
              微信開發
              小程序開發
              網站建設
              平臺合作
              返回列表
              新手教程-六步透視網易設計規范,毅耘科技
              安徽毅耘科技有限公司,安徽app開發,合肥APP開發,新手教程-六步透視網易設計規范2017-12-22毅耘科技2844

              新手教程-六步透視網易設計規范

              新手教程-六步透視網易設計規范【毅耘科技】

              新手教程-六步透視網易設計規范

               

              讀者對象:剛接觸產品設計的視覺設計師

               

              序:對于剛入行的新人,可能覺得設計規范是一件很嵬峨上又很讓人頭疼的事情,面對這么多設計模塊感到無從下手。設計規范假如考慮不到位,往往會出現規范太空洞缺乏現實指導意義、規范太死板影響設計發揮等問題。這篇文章會從新人的角度出發,總結一些設計規范要點,算是一次溫故總結的分享。

               

               

              一、設計規范有什么用?

              設計規范能為團隊解決不少問題,并提拔工作效率,主要體現在以下三個方面:

               

              1、解決多人協作時控件紊亂問題

              新手教程-六步透視網易設計規范

              一個大型項目的視覺稿,往往會有幾十個甚至是上百個頁面。對于第一次做這種大項目的設計師,假如在視覺風格成型后沒有做規范的話,哪怕自己一手包辦悉數頁面,恐怕也很難同一視覺樣式。在創作階段設計其他頁面時,假如沒有規范來指導,設計過程中很容易產生細微的出入,導致每個控件都會有細微的差別,經常會做著做著就出現控件不一致的問題,比如A頁面的按鈕是4PX圓角,B頁面的按鈕又做成了6PX圓角,再后來做的C頁面的按鈕又做成了2PX圓角。假如一向用心苦干趕頁面,沒檢查出這些問題,頁面做的越多錯誤就越多,到時候幾十個頁面的控件都要修改,那可真是苦不堪言啊。

               

              一小我做頁面尚且會出現這種樣式不同一的問題,更何況是多人協作。因此,在進行多人協作一個項目前,可由主視覺設計師出一份視覺規范,其他一路協作的幾個設計師遵循這個規范,才能把控視覺同一性,提高效率,削減返工率。

               

              另外,當新人加入團隊的時候,他們對產品的品牌基因可能理解不透,這時設計規范就可以幫他們快速上手,并且保持產品的同一性。

               

               

               

              2、解決開發效率、代碼冗余問題

              新手教程-六步透視網易設計規范

              假如沒有做規范,就拿按鈕這個常見的控件來舉例,程序員不知道具體的規范,每個程序員用代碼寫了A頁面的按鈕樣式,然后在開發B頁面時又要重新用代碼寫按鈕樣式,頁面越多程序員的工作量也就越大,影響項目進度,代碼也會越來越臃腫。

               

              假如做了規范,程序員從視覺規范中了解到哪些控件是可以一次性寫好并能重復調用。在規范的輔助下,程序員在搭建全局共用元素時規則更加清晰明了,如按鈕、行間距、字體大小、色值等等。

               

              另外,對于末端界面沒有規范到的角落和由規范控件組成的新頁面提供了有用參考,比如規范中已經列出的5種常用彈窗樣式,后來需求迭代時出現由原有規范樣式混搭組成的新彈窗,這時程序員就可以借鑒原有5種彈窗里的題目、間距、按鈕等樣式去完成該工作。

               

               

               

              3、解決產品迭代中品牌形象會走樣問題

              新手教程-六步透視網易設計規范

              產品在迭代過程中,往往是小版本進行幾個功能的迭代比較多。假如沒有做規范,在多次迭代過程中會忘掉設計初衷,同樣一個TAB控件,可能會出現多種不同樣式的TAB,舉一反三,這種太隨意的設計會讓產品控件紊亂,導致品牌形象走樣,看起來很不協調,像是幾個風格不同的設計師共同完成的半制品。

               

              有了規范,后續迭代中也能保持設計初衷,遵循定制好的設計規范,維護好品牌形象。就算是后來加入新的設計師,新的設計師也能通過主設計師做好的規范,同一品牌形象。

               

              規范能使產品在賡續更新迭代中保持品牌形象不走樣,保持產品特征,產品的規范同一增添了用戶使用認知,不同程度有用提拔用戶體驗。

               

               

               

              ~~~~~~~~~~~~~~~~~~~~~~~~分割線~~~~~~~~~~~~~~~~~~~~~~~~

              二、設計規范操作的五大誤區

               

              設計規范的工作量不小,開始脫手之前應了解一下有哪些誤區,盡量少走彎路,更科學高效地完成一份有用的規范文檔。

               

               

               

              錯誤一:規范建立時機舛錯

              新手教程-六步透視網易設計規范

              規范建立的時機很主要,太早或者太晚都會給后續迭代帶來許多麻煩。

               

              如上圖所示,假如在創作初期就做設計規范,這時視覺風格還沒成型,投入太多精力去做規范,在視覺風格定位后,之前做的視覺規范又要推翻重做,因此太早做設計規范會造成沒需要的返工。

               

              假如等V1.0上線后才開始做規范,已經錯過了最佳時機。因為在V1.0開發的后半部分的兩大工作是設計師拓展頁面和程序員進行開發,在設計師拓展頁面的階段,假如沒有設計規范的指導往往會很難保持視覺同一性,這時把頁面交到程序員手里,同樣一個控件在各個頁面中的呈現樣式卻不一樣,紊亂不協調的控件庫會對程序員造成困擾,從而影響開發進度。在程序員前期開發階段,假如有了規范,就可以快速根據規范搭建控件庫,高效完成工作。

               

              因此,最佳時機是在完成風格定位后做規范,可以承上啟下高效完成工作。

               

              錯誤二:對非主要界面進行規范設定

              新手教程-六步透視網易設計規范

              記得以前剛接觸設計規范的時候,覺得設計規范就像一本設計圣經可以特別很是詳盡周全的指導設計工作,然后我對悉數界面都做了具體的規范,花了許多時間和精力做出的設計規范多達幾十頁好幾十個細分模塊,最后現實應用時發現自己被這份設計規范打臉,因為有時做新的頁面,假如死板的100%遵循了規范,做出來的視覺效果不好;假如完全拋開設計規范,那之前做的過于周全的規范等于白做了,可見太過周全的規范會影響設計師發揮,并不是一件好事。

               

              所以,整頓規范時,應只針對控件、色值、質感、動效、品牌元素等主要界面進行規范設定。

               

               

              錯誤三:規則沒彈性

              新手教程-六步透視網易設計規范

              采用28原則只能針對產品80%的界面進行規范。這里講的80%和20%是一個相對的概念,80%代表色彩、按鈕、字體、間距等主要內容,這些內容需要進行具體的規范說明。另外的20%是指某些控件是不可復用并且不主要的,這種20%的內容不需要花費精力做進規范里。這個28原則需要設計師根據具體情況具體分析,作出更適合當下的設計。

               

              假如對所有界面進行100%規范,一方面會約束設計師的發揮,另一方面也會影響產品迭代的設計彈性,比如一個產品官網進行了100%規范,需求迭代時要在導航加上一個運動入口,這時假如死板的遵循原先的導航規范來加這個運動入口,視覺效果和運動數據效果可能并不理想,所以在面對這類需求的時候,適當的做出導航調整也是可以的。

               

               

               

              錯誤四:規范沒有迭代

              新手教程-六步透視網易設計規范

              在完成v1.0版規范后,產品還會一向迭代,產品改版過程中必定會賡續優化設計。

               

              假如設計師沒有跟著產品改版的節奏去迭代視覺規范,一般會出現兩種情況:一是被原規范的舊樣式約束,死板的遵循最初的規范,長久下去會出現視覺樣式過時的問題。二是改版中用了新的視覺風格,沒有及時總結歸納成規范,這樣一來又會出現品牌形象走樣的問題。

               

              所以在產品迭代過程中需要對舊的規范進行更新優化,不好的、過時的規范需要及時同步歸納,并及時通知到項目相關人員。要不然,陳舊的規范起不到幫助設計工作的開展,反而是一種負面影響。

               

               

               

              錯誤五:規范沒有執行力

              新手教程-六步透視網易設計規范

              有兩種規范是缺乏執行力的:

               

              第一、規范內容不具體,缺少對核心模塊的細節說明。各個模塊缺少必需的說明,比如色彩模塊中有主色卻缺少輔助色的說明,按鈕模塊中缺少滑過、點擊、不可點狀況的說明,字體模塊缺少字體磅數的分布設定。這種沒有核心內容的規范,沒有參考價值,規范的作用幾乎等于零,其他參與項目的設計師還得找制作規范的設計師要相關的規范才能進行下去,所以這種類型的規范是沒有執行力的。

               

              第二、規范太周全死板太臃腫,無從看起,對后續設計有約束。對所有界面的所有元素進行規范,連不主要的元素也強行歸納進來,多達幾十頁的規范文檔。造成三方面的影響,一是會增添大量沒需要的工作時間來制作規范,二是設計師和程序員需要花許多時間精力去看無關緊要的內容,增添了許多負擔。三是設計原本就不是一件絕對的事,需要20%的天真空間,不然后面碰到新的頁面,死板的把規范用在新的頁面上,出來的效果可能并不好。

               

               

               

              ~~~~~~~~~~~~~~~~~~~~~~~~分割線~~~~~~~~~~~~~~~~~~~~~~~~

               

               

              三、設計規范怎么做?

              設計規范的模塊分類有許多,會讓新人感到無從下手,怎么樣梳理才更能科學易用?以下六個維度可以作為參考。

               

               

               

              1、信息系統:字體選擇、顏色、層級區分

              新手教程-六步透視網易設計規范

              產品中的字號應該有一個全局的規劃,在統一個界面內,盡量少用太多太接近的字號,比如一個產品詳情頁的正文部分,假如同時用了12、13、14、15、16、18去排版,文字的層級對比會比較弱,不利于閱讀,視覺效果也會有點凌亂。

               

              假如你對全局的字號沒把握,不妨參考一下上圖的字號分布,這套基于12、14、16、20和34號的字號分布能夠優秀的適應布局結構,條理明晰,所以具有一定的參考意義。當然以上僅供參考,沒有絕對的字號布局方案,設計師可以根據具體的產品情況來分布。

               

               

               

              新手教程-六步透視網易設計規范

              如上圖所示,「L」和 「XXL」用了兩個很相似的顏色#666666和#6e6e6e,這兩個顏色肉眼難以區分,在統一層級去做字體顏色區分是沒需要的。統一組中的內容屬于統一層級,從信息層級來講應該要用統一種顏色,透露表現是統一個層級。

               

              產品文字中一般會有一級題目、二級題目、一級正文、二級正文、提醒文字、輔助文字等,為了區分層級便于瀏覽,通常會根據產品需要把字體顏色深淺分成3到5個層級,常見的有#333333、#666666、#999999這個組合,這個組合的層級區分比較分明,適應性比較廣,因此有一定的參考價值。

              新手教程-六步透視網易設計規范

              從技術實現層面來講,對于字體的選擇,產品設計和推廣設計有較大的區別。

               

              推廣設計的風格多種多樣,需要根據需求選擇字體來營造氛圍,推廣設計的字體往往是做在圖片上,不需要考慮用戶的設備中有沒有包含該字體。

               

              產品設計的字體,很少會做在圖上,大多數字體由前端工程師來實現,設計師一般會選擇用戶設備里自帶的字體來進行設計。假如在頁面中用了蘭亭黑、正黑等大量第三方字體,用戶的設備沒有這些字體就會以默認字體來顯示,最終效果會和視覺稿有很大出入。

               

              另外,從視覺層面來講,文字的層級一般用字號去區分,假如既用字號去區分,又用不同字體去區分信息,會顯得凌亂缺乏美感,因此字體的數量應做減法,能用2種就不要用3種,能用1種就不要用2種。

               

               

               

               

              2、控件系統:按鈕的樣式同一

              新手教程-六步透視網易設計規范

              在產品中按鈕控件的復用度是很高的,同樣的一個確定按鈕也會根據頁面環境不同來設定不同寬高尺寸。

               

              需要注重的是,即使按鈕寬高不同,按鈕樣式也需要同一寬高比例、描邊、直角、圓角、色值、文字區域、字體、字間距等,以保證按鈕樣式的同一。

               

              另外,在一般情況下,按鈕會有四種鼠標狀況。不同顏色的按鈕之間,相同的鼠標狀況也需同一視覺效果。比如同層級的藍色和綠色按鈕放在一路,這2個按鈕在hover狀況下的明度轉變看起來應相對同一。

               

               

               

               

              3、布局系統:界面內不能出現多余的行間距

              新手教程-六步透視網易設計規范

              在設計的過程中,間距這個隱形元素往往會被新人忽略,間距能注解內容之間的層級和從屬關系,凌亂復雜的間距會對用戶認知造成較大困擾。

               

              因此,設計師需要將間距當做色彩、字體、字號一樣的元素來設計。一個界面中能用5種間距,就不要用6種;能用3種就不要用4種,這是一個需要做減法的設計原則。

               

               

               

              新手教程-六步透視網易設計規范

              另外,內間距盡量不要大于外邊距。大多環境下,外邊距小于內邊距時內容會有外擴力,顯得擁擠,有閱讀壓力。外邊距大于內邊距時,有適當的留白,內容沒有外擴力,用戶的視線不受干擾,更專注于內容自己。

               

               

              4、配色系統

              新手教程-六步透視網易設計規范

              選擇主色調時,首先確定產品的調性、用戶對象和所要表達的氣氛,以及行使色彩所希望達到的目的,色彩取向決定了這個產品的風格。產品的輔助色可用主調色的鄰近色,也可用對比色。確定主色和輔助色之前,建議應用到各種頁面中去看看現實效果,因為每個頁面的使用環境都不同,反復驗證后才能確定最終的色彩方案。

               

              一般情況下,可選擇一到三種輔助色配合使用,整個產品的色彩最好控制在四種顏色之內。

               

               

               

               

              5、品牌系統:LOGO應用

              新手教程-六步透視網易設計規范

              LOGO會應用到各種頁面中,在LOGO定稿后需要將LOGO的各種組合體例整頓出來,便于后續的現實應用。比如LOGO的左右結構及上下結構;反白的情況;詬誶的情況;單色的情況;黑底白底的情況;最小尺寸;以及錯誤的使用體例都需要標示出來。

               

               

               

               

              6、推廣系統

              新手教程-六步透視網易設計規范

              新手教程-六步透視網易設計規范

               

              推廣規范設定應凸起商品、主體內容和主要文案。不得使用無版權的圖片和字體,文案排版需吻合閱讀習慣,避免折行,字體不要過小,字體筆畫均勻識別度高,輔助圖形不得擾亂文案信息和產品展示。

               

              以及具體的排版結構,它是上下照舊左右,先圖后文,照舊先文后圖,周圍的邊距和文案的間距,可以和不可以的排版行為需要標示。

               

               

               

              ~~~~~~~~~~~~~~~~~~~~~~~~分割線~~~~~~~~~~~~~~~~~~~~~~~~

               

               

               

              四、設計規范案例

               

              新手教程-六步透視網易設計規范

              新手教程-六步透視網易設計規范

              新手教程-六步透視網易設計規范

              網易云音樂android端V3.0版規范遵循28原則,對產品80%的主要界面進行規范,ICON的風格同一和色彩的整體把控,以及品牌的同一性,都有條有理的安排在規范中。這份考究嚴謹的設計規范,列出大量方便復用的控件,在內容的框架梳理和模塊的細節說明上極具參考性,特別很是適合設計新人借鑒參考。

               

               

               

               

               

              新手教程-六步透視網易設計規范

              新手教程-六步透視網易設計規范

              新手教程-六步透視網易設計規范

              LOFTER經過幾個大版本的迭代,設計風格和LOGO都有所改變,因此規范也隨之迭代優化。對比V1.0和V5.2規范,可以發現LOFTER在V1.0產品初期階段,只需對色彩、字號、按鈕等主要模塊進行規范,隨著產品的發展,到了V5.2版設計規范,對規范進行了更多的增補說明,以及保持產品自身的品牌調性。

               

              LOFTER這份精而美的設計規范,頁數不多,但每頁都是經過三思后得出的總結,推薦一看。

              PS:原文提供網易云音樂和LOFTER的規范文檔下載,迎接下載。

              文:網易UEDC / 吳良
              來源:
              ui2702



              本文標題:新手教程-六步透視網易設計規范

              本文網址:http://www.bjlydc.com/index/index/news_detail/id/670.html

              原創網址:合肥APP開發公司<毅耘科技> 版權所有,轉載標明出去,并以鏈接形式鏈接網址:www.bjlydc.com

              文章標簽:合肥APP開發 合肥軟件開發 合肥o2o社區 合肥商城開發 合肥B2B2C商城開發

              毅耘科技(www.bjlydc.com)是一家擁有新型網站建設與程序開發經驗的公司,致力于解決企業網絡服務問題,緊跟著網絡變化的步伐,為企業提供網絡科技服務。平臺服務:品牌網站建設?、網站開發、微信開發、APP開發、軟件開發、網校系統開發、多用戶商城開發、分銷商城開發、微商城、一元云購系統開發、O2O系統開發、商標注冊、網絡營銷等項目。是專業為企業提升價值的公司。

              分享到:

              相關文章

              国产无夜激无码AV毛片专业知识
                  <p id="hlhh7"></p>