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

          首頁

          如何做到配色讓人滿意

          用心設計

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

           

           


          b40d58b7f468a801219c77f82931.jpg

          7ae358b7a65da801219c7737a969.jpg


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

          Feed流設計:那些容易被忽略的圖片適配知識

          用心設計

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

           

          在產品設計中,大家很容易跟著產品原型走而忽略了一些設計上的細節問題。本文筆者總結了在Feed流中容易被設計師忽略的,卻最容易出現問題的幾種圖片適配方式。
          我們每天被淹沒在各種Feed流中,感覺它的設計是如此簡單,只需設計一個卡片,然后復制粘貼整個界面就大功告成了。
          但是,大家很容易忽略圖片適配的問題,比如:微信朋友圈你無法保證用戶發幾張圖片,也無法預估圖片的比例,那么就需要我們對它設定相應的規則。
          下面我總結了最易出現問題的大圖布局、宮格布局、拼圖布局的圖片適配方式。
          大圖布局也就是不管用戶上傳幾張圖片,Feed流中以一張大圖進行展現,點擊詳情或通過滑動才能查看其他圖片。大圖布局的圖片適配方式一般有兩種:一種是展示圖片比例固定;另一種是隨圖片而變化。
          不管用戶上傳的是橫圖還是豎圖,其展示圖片的比例都固定。采用該適配方式圖片占用空間小,可提高用戶的閱讀效率,因此,當你的產品目的想要提高用戶的閱讀效率時可以使用,比如字里行間。
          Feed流中容易被忽略的圖片適配知識
          Feed流中容易被忽略的圖片適配知識
          當用戶上傳不同比例的圖片時,圖片展示寬度為屏幕寬度,而圖片的展示高度根據確定的寬度等比例縮放。采用該適配方式能將圖片信息表達完善,圖片占用空間大,適合圖片質量高,用戶以圖片瀏覽為主的產品。
          Feed流中容易被忽略的圖片適配知識
          Feed流中容易被忽略的圖片適配知識
          需要注意的是:采用該方式需要設置閾值,當圖片的高度超過一定數值,高度就不在增加以閾值為準,當圖片的高度小于一定數值,高度不在減小,以閾值為準。
          宮格式布局也就是用戶上傳的圖片會適配到一個個的方塊中,宮格布局的形式多種多樣可以是九宮格、五宮格、三宮格,下面以較為復雜的九宮格的適配為例。
          九宮格的適配未對屏幕進行區分,但對只上傳一張圖片進行了特殊的處理,二張或二張以上直接以最小邊為方塊的寬,然后等比例縮放,圖片的具體適配方案如下:
          Feed流中容易被忽略的圖片適配知識
          Feed流中容易被忽略的圖片適配知識
          當圖片為三張時,3、5位置對調,排成一行:1、2、3。2)當圖片為兩張時,直接將圖片適配到1、2格子。
          當圖片為1張時,如果0.5 < = 寬 / 高 <= 2 時,被限定在1 – 4格子的范圍大?。òㄩg距),也就是凡是寬高比在這個范圍時,最長的那邊暫兩個格子加間距。
          Feed流中容易被忽略的圖片適配知識
          Feed流中容易被忽略的圖片適配知識
          當圖片為1張時,寬 / 高 > 2的圖片(如全景圖),最多占三欄,高最多占一欄(包括間距大?。?
          Feed流中容易被忽略的圖片適配知識
          Feed流中容易被忽略的圖片適配知識
          單張圖片,寬 / 高 < 0.5(如微博長圖),高最多占二欄,寬度最小占二欄1/3(包括間距)
          Feed流中容易被忽略的圖片適配知識
          Feed流中容易被忽略的圖片適配知識
          這種布局方式是將幾個圖片拼成一個矩形,樣式新穎類似雜志的排版,因此也叫雜志式布局,不過因為其對圖片的要求較高,因此多應用在圖片社交中,如in。
          Feed流中容易被忽略的圖片適配知識
          Feed流中容易被忽略的圖片適配知識
          下面,我總結了宮格布局的規則,在設計時你可以不用把每種情況都設計完,只要把不同圖片適配的方案發給開發即可,他們會選用相應的規則。
          Feed流中容易被忽略的圖片適配知識
          Feed流中容易被忽略的圖片適配知識
          大家在設計時,很容易跟著產品原型走,從而忽略一些小設計。
          尤其是對于新手設計師來說,更容易考慮不全面,因此建議大家在看到一些干貨的文章,就收集起來,以后在工作中遇到也能夠很快的找到文章,從而就可以規避這些問題,少走彎路。

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

          如何合理創建間距系統,來更快的實現設計方案

          用心設計

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

           

          讓設計師和開發團隊有意識的利用好間距系統,可以提高產品的可讀性和一致性。
          Cheatsheet總結了我的方法
          我最近致力于為電子健康記錄(EHR)產品定義間距系統,以改善產品頁面的可讀性和一致性。我提出了3個間距規則(3C規則)和以4為基準的間距網格,并且這些規則與新的印刷系統配合得非常好。
          存在的問題
          當定位垂直元素時,設計師不應做出隨意或者任其自然的判斷。通常設計師通過按住Shift和上下箭頭鍵在Photoshop中實現垂直增量:“根據實際情況來決定使用5px或10px?!边@種方法雖然是10的倍數并且可用,但是它不符合任何印刷要求的規范。
          ——Robert Bringhurst,著有《印刷風格元素》一書。
          我們在EHR產品中使用了5px、10px、15px、20px的邊距/填充,但是在何時何種情況下使用這些間距,我們并沒有一個嚴格的規范。
          邊距/填充只是間距系統的一部分,字體行高也會增加額外的高度空間,但目前我們沒有為現有(舊的)文字樣式創建行高規范。
          相似的組件和內容在產品中看起來不一致,這造成了EHR產品的整體樣式不統一,并且因為數據疏密程度不同,造成了閱讀體驗的不流暢。
          解決問題
          步驟1:確定文本行高(確定基準網格)
          首先我們假設使用非常流行的8點基準網格(即以8的倍數為一個間距規單位)會達到好的效果,因此在實驗中,我把基準主體字體大小設置為13px,行高設置為8的倍數即16px或則24px然后看看這兩個行高規則是否有用。如果沒用,則意味著8點基準網格是不適用的。
          然后我將基準字體大小設置為13px,并在16px和24px之間的偶數尋找行高值。開始我將它與18px(6的倍數)匹配,如果成功那就意味著我采用了6點基準網格,也就是6的倍數(間距會是3、6、12、18、24)。后來我嘗試了20px的行高,使用起來效果很好,所以我采用了4點基準柵格(也就是間距為2、4、8、12、16、20等)。
          步驟2:用??硕珊蛶缀渭墧祦泶_定間距值
          “隨著可選擇數量的增加,做出決定的難度將會增加?!?
          ——??硕?
          我們要想出一個可感知的間距系統來簡化設計決策,另外將所需值的數量保持在一個最小范圍內。
          間距值是基準網格的倍數數值(如步驟1中確定的4點基準網格),因此我的間距值為4點基網格(2、4、8、12、16、20、24、28…)
          一般來說,4–-5個間距值已經為產品設計提供了足夠的差異性,即使對于復雜的企業產品也足夠了,但是在實際過程中可能需要靈活的在規范中增加間距值。
          我決定使用4點基準網格,因為它提供了更好的視覺可感知區間,對于層次結構的展示來說非常好,因此間距值應該是(2、4、8、16)。
          如何以可預見的方式應用這些間距值?3C法則來拯救你。
          我深受Nathan Curtis上面文章中介紹的Insets,Stacks&Inline等間距詞匯的影響。我決定在其基礎上構建一個額外的詞匯組,以便我的團隊更容易理解每個詞匯的使用環境。我將所有的間距規則分解成3個C:容器、內容和組件。
          · 容器規則使用了平方差的概念(使用16px)
          · 內容規則使用了堆棧的概念(頭部堆棧使用2px,葉節點堆棧使用0、4、8、16px具體取決于內容類型)
          · 組件規則使用內聯的概念(大多數情況下使用8px,4px表示關聯關系)
          第1C:容器規則
          容器是UI中的框架,其中包含內容,通常這些內容是頁面、卡片、模態、彈窗等。由于容器在層次結構中處于最高層次,所以我確保所有容器的間距值(在我的例子中是16px)。提示:切勿在任何間距計算中包含邊框。
          第2C:內容規則
          內容存在于容器內部,內容包含:
          標題(h1、h2、h3、h4、h5) 以段落,列表,表格,表格的形式穿插數據。
          所有這些內容都是使用頁邊距垂直疊加的,但字體行高也為指定的頁邊距增加了額外的間距。我無法以一致的方式解決這個問題,因此我同時考慮了行高和邊距,創建了自己的處理堆棧的方法,以下是我的過程:
          A)首先解決頭部堆棧
          為了簡化這2個選項之間的行高決策,我計算了每個行高比,并決定使用等于1.5或更高的行高。對于選擇哪個行高,我仍然猶豫不決,但是在進行了視覺探索并回顧了設計團隊的結果之后,我們確定了應該采用那個行高選項。
          視覺探索的過程
          我從頂部的H1開始,嘗試使用2px、4px、8px等的不同間距選項。行高為36px的間距選項都很緊湊,但4px間距與行高40px感覺恰到好處!
          然后我在所有標題(H2、H3、H4、H5)和列表、段落、表格之間進行了間距值0px、2px、4px和8px的實驗。2px和4px的間距相差無多,但是我們在設計團隊內部審查結果時,2px的視覺感知更好,盡可能的堅持只有一個邊際數值,因為它簡化了設計和開發過程。
          標題和葉節點間距實驗
          標頭堆棧 - 間距為2px和4px
          B)接下來解決葉節點堆棧
          EHR有4種主要類型的葉節點:
          我開始為最簡單的內容類型——段落來處理間距。
          每個段落內的間距
          這非常簡單,只需要清空段落中的所有文本行空間,這樣兩行之間就有0px邊距。
          Sketch中的排版段落(行高20px是通過視覺探索得出的,并使用WCAG SC 1.4.8進行驗證,其中規定“ 行間距至少是段落內的空間的1.5倍 ”(20/13 = 1.538)
          兩個連續段落之間的間距
          我第一個想法是使用行高為20px的間距,但后來看到了WCAG SC 1.4.8,其中指出 ? “段落間距至少要比行間距大1.5倍,因此一段最后一行的行高為250%,這樣可以保持距離下一段第一行間距更合適。 假設%值是根據基本字體為13px的大小計算的,我計算出兩段之間的實際間距應約為(ps - ls)= 13px,將使用margin-bottom:13px在CSS中定義。但是13px不是我們在步驟2中確定的間距值之一,因此我選擇了16px作為段落底部的邊距。
          解釋WCAG SC 1.4.8中的段落間隔規則
          在Sketch中多段落排版
          如果對計算結果有疑問,我總是用視覺探索進行交叉檢查。與其他可能的值相比,段落之間的16px間距最佳。其實我認為12px間距會更好。但是我不想僅為這個用例為整個間距系統添加額外的值,另外我們的EHR產品沒有很多段落,幾乎沒有任何連續的段落。
          列表中列表項內的間距
          列表是由多個同質數據項組成的數據結構,由于列表將所有這些同質數據項組合在一起,因此列表項不像段落(它們之間有16px)那樣間距很重要。同時列表項仍然需要稍微分開,所以我嘗試了0px和16px之間的間距,我只有3個值可以試驗2、4、8,總體看起來列表項之間的間距為8px看起來最適合層次結構。
          帶有標簽的2個連續輸入字段之間的間距
          表單有連續的輸入字段,一個接一個地疊加在另一個之下。
          無標簽2個連續輸入字段之間的間距
          無標簽對于可訪問性來說并不是一個好的處理方式。然而在某些情況下,標簽最好不要顯示,這些情況是:
          第3C:組件規則
          組件有按鈕、輸入字段、圖標等,這些組件通常放置在一起(內聯)。此外所有的組件的尺寸均為4的倍數(也是8的倍數),因此按鈕和輸入域內部有一個24px高度的空間(加上1px 頂部和1px的底部邊框,整體高度為26px)。當組件能完美利用好基準網格,并且按規則設置間距時,整體布局才會完美和諧。
          2個組件的間距
          我用了一個簡單的規則,即在大多數時候任意2個相鄰組件之間使用8px間距。在少數情況下使用4px來顯示兩個組件之間更緊密的關系(格式塔的接近性原則)。
          組件內部間距
          我對組件內部的任何左/右填充都使用了8px。
          圖標在組件內部間距
          根據格式塔的接近性原則,將圖標放在組件內,將他們的間距設置為4px,而不是通常的8px。
          外部圖標與組件間距
          如果圖標與組件關聯組合,則其與組件間距為4px以顯示其關聯關系(格式塔的鄰近原則)。但是如果圖標與一組組件關聯,那么它與最后一個組件間距8px,以表明它不僅僅是與最后一個組件關聯,而是與整個組件關聯。

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

          如何利用走查表驅動設計改版

          用心設計

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

           


          UI走查表有什么用?




          一套成熟的UI走查表能更科學更地改稿;減少設計中的反復試錯、評審交付時更言之有物;不僅僅停留于“看上去順眼”、“我覺得挺好”、“先這樣”的視覺表層。更深一層來說,走查表有助于培養設計師的結構化思維,形成一個完整的設計體系。


          Image title


          Image title


          Image title


          01.頁面要表達的意思是否正確




          在設計頁面的時候,需要注意頁面要傳達給用戶的信息重點,例如本次案例的產品需求中,該頁面的功能是促使用戶快速下單,信息上則要側重于價格與優惠信息。


          Image title




          首屏信息是給用戶的第一印象,在用戶打開頁面,盡可能展現出更多用戶感興趣的內容, 而此次頁面需要突出促銷優惠信息,次要信息則放在后面。




          Image title




          02.頁面視覺重點




          相信大家平時經常聽說0.618的黃金比例(斐波那契數列),屏幕方寸間合理運用黃金比例可以讓界面視覺重心更加平穩,視覺更加舒適。同時有助界面區域分割,集中視覺焦點,承載更重要的信息,讓整個界面布局更加合理。




          Image title




          淘寶、京東到家等成熟的一線產品黃金比例運用,o在視覺焦點區域都向用戶展示了關鍵信息。


          Image title


          Image title


          02.元素間距符合各層級的關系




          為什么頁面會雜亂無章?主要是信息一味地堆砌,分布沒有區別,但只要遵從以下方法,頁面就會清晰很多,有節奏的呼吸感也出來了。




          同類的板塊不應被混亂的間距區隔開來,他們應該更集中,并且整體與別的板塊區別開來,同理,不僅僅是板塊,元素與元素之間也是如此,這樣用戶可以更加快速地看到自己想要的東西。


          Image title


          那么,如何更好地讓信息按照相似屬性分布合理呢?這就要利用5分、等分原則來讓分布變得更合理,假設相同板塊的間距值為a px,則不同板塊為2apx。這樣不僅在視覺可以將信息分布開來,還能讓整體的布局更加規整,不會凌亂,盡可能使用同一或者同倍數的間距,更便于開發。




          案例中,相近元素的間距為16px(a px),則不同類別的元素則為32px(2a px)。


          Image title


          Image title


          Image title


          01.字體種類的控制




          一個產品如果字體種類過多,會導致界面的不統一與混亂。通常字體控制盡量在3種以內,中文字體、英文字體以及特殊數字字體。如下圖:


          Image title


          02.字號與粗細控制




          字號過多使信息失去重點,基礎字號控制在3種以內,目的在于清晰區分信息的層級。正文字號建議為28px,副文案為24px,大標題、價格等重要信息需按實際情況加大,令信息的層級區分更明顯。




          加粗字體往往是整個界面的視覺焦點,重點的文本(如標題、價格)需要加粗處理,注意控制字體加粗的使用,以免造成信息層級的混亂。 下圖為調整字號及粗細的前后對比:


          Image title




          03.行距控制




          行距太小不便于用戶閱讀,太大會顯得松散,所以控制在1.2-1.5倍的范圍是較為舒適的范圍。下圖為調整行距的前后對比:


          Image title




          04.字體顏色




          字體主要以黑白灰為主:#333333?#666666?#999999;字體顏色深淺有序能讓信息層級主次分明,產品應該根據不同模塊以及同一模塊的層級需要調整不同的灰度值,并在產品中反復使用,統一規范輸出。


          Image title


          信息越重要,字體顏色越深。除此之外我們還需要注意到什么呢?也是很多剛入行的設計小伙伴很容易忽略的細節,產品的實際使用環境。比如,我們此次改版的產品詳情界面就是線上下單,線下提貨的運營模式,不僅需要考慮室內使用環境,還需要考慮到特殊的室外強光環境。結合下圖感受一下。


          Image title


          如何在強光環境下保證產品良好的視覺體驗呢?這也是UI走查表需要注意到的細節點:強光測試(大于4.5:1)。


          4.5:1經驗數值參考前輩行業經驗總結:


          https://www.w3.org/TR/WCAG20/


          https://www.sitepoint.com/making-bootstrap-accessible/




          我們先觀察一組顏色對比,如下圖:


          Image title


          我們會發現字體顏色層級依然是深黑色、中黑色、淺黑色,相信很多設計師朋友已經注意到我們使用的顏色更深了,為什么呢?為了保證好在強光環境下的信息閱讀可閱讀性,如下圖:字體信息最淺層級,淺黑色的色彩數值對比數值都大于4.5:1。


          Image title


          強光測試鏈接:https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF


          有細心的設計師朋友或許已經注意到色彩值并沒#333/#666/#999那么便于記憶了,為什么呢?


          為了提升更好的視覺感受與界面的品質感,我們在字體顏色中采用了偏藍灰,至于為什么,大家不防給我一起觀察下圖,上圖灰色看上去略微有一些臟臟的感覺,下圖視覺更耐看、更有質感。




          Image title


          騰訊新聞、金色財經App中的也應用到了偏藍灰,帶來種撲面而來的清爽。




          Image title




          除了常用字體層級的顏色對比,在界面中針對關鍵的賣點信息還用到強調色,即品牌色


          品牌色也會經常運用到特殊字體、提示文字、鏈接等等。


          改版前,促銷信息缺少提示入口;改版后,以品牌色作為入口字體顏色,引起用戶注意。




          Image title


          Image title


          01.視覺比例




          由于圖標通常都是成群結對的出現,彼此之際的統一性顯得非常重要,但是常常容易被忽略,可以制定如下圖的圖標盒子來規范尺寸。


          Image title




          02.圖標設計要點




          設計圖標時應注意基礎形狀復用,保持整體識別性。如下圖重復使用矩形、圓形、橢圓形等基礎形狀進行設計,既能統一大小又有整體感。




          Image title




          面性圖標


          設計時需要注意挖空比例的一致性,保持圖標的整體性。如價格走勢、降價通知這一排圖標,挖空比例控制在20%


          Image title


          線性圖標


          設計時應注意保持良好的線條粗細的統一,案例中使用2px的粗細線條重復使用,所有圖標的粗細與文字粗細一致,和諧統一


          Image title


          03.圖標尺寸




          在app中,功能圖標大致可分成兩種:可以點擊的按鈕;不可點擊的展示圖標。


          可以點擊的按鈕常用于導航欄、tab欄、操作欄(吸底按鈕圖示)常用尺寸為:48x48px 64x64px。如下如的導航和吸底按鈕都用了48x48px的大小。




          Image title


          不可點擊的展示圖標常用于信息展示位置(價格走勢/規格/評論等圖示)常用尺寸為:24x24px 32x32px,如下圖,評論模塊中的展示圖標使用24x24px,價格走勢則使用了32x32px的尺寸。




          Image title



          04.標簽的走查規范




          從商業的角度,標簽是為了凸顯產品賣點,比如你在商場時常能看到“全場低至2.9折”這類的促銷信息,其實在界面中同樣也會有,目的就是為了抓住用戶貪小便宜的消費心理,對比沒有標簽的同類商品,用戶會更佳傾向與有有標簽的商品。


          常用標簽樣式有三種表現樣式,面性:填充一整個色塊;線面結合:低飽和度的色塊結合高飽和度的描邊;線性描邊:1px粗細描邊;


          Image title


          如上圖:為展示清楚,在原來基礎上放大了1倍,運用規則與之前提到的圖標一樣,根據模塊功能的重要性去搭配,按照重要到次要的排序是:面性>線面>線性




          標簽呼吸感規律:




          很多初級設計師都在疑惑到底標簽文字定多大合適呢?標簽字號一般為:18-22px


          以"自營"標簽為例


          Image title


          如上圖:外框邊距橫縱向成2倍的倍數關系,所以以后在畫標簽,只要先定好字號大小,剩下的邊框邊距就按照2倍的關系去拓展


          Image title


          為了確保我們做視覺稿的時候易于文本的閱讀我們通常會用到一些配圖,而這些配圖通常也影響著我們整個界面的美觀度,一個優秀的設計師在設計作品時都會特別的注重圖形與圖象的比例,圖片的選取當然也是重中之重,那么我們在項目中應該如何選取圖片并且正確的使用圖片的比例呢?




          01.圖片使用的規范




          第一點:首先就是要做到讓圖片的背景保持統一并且做到干凈整潔


          第二點:圖片主體的比例大小跟其他圖片保持統一避免出現有些圖片展示局部有些圖片展示整體


          Image title


          02.圖片模塊的常用使用比例




          UI設計中圖片的比例會比較的多常用的有下列幾種




          1:1,這種比例比較適用于電商,它可以讓商品圖片展示最大化。也是目前電商最主流的圖片使用尺寸。如下圖:




          Image title


          16:9,這種比例比較適用于視頻,這是標準的人體工程學比例,根據人體工程學家的研究發現人的兩只眼睛的視野范圍并不是方的,而是一個長寬比例為16:9的長方形,所以我們看到的視頻比例通常會采用16:9。如下圖:


          Image title


          4:3,這種比例應用于新聞類APP比較的多,它源自于一些微小型相機最原始的尺寸比例,不需要進行過多比例的裁剪,應用起來比較方便,對于需要展示大量的圖片信息類的產品來說特別的適用。如下圖:


          Image title


          如果你還是不知道如何去使用尺寸,那么你可以直接查找相關競品進行設計。


          Image title


          壓軸給大家帶來一個小驚喜,我們整理了一個較為完整的設計走查表,希望在實踐中能夠幫到大家。


          Image title

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

          整理!點贊設計分類。

          用心設計

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

           點贊設計的分享!

           微信圖片_20190321162040.jpg微信圖片_20190321162058.jpg微信圖片_20190321162101.jpg微信圖片_20190321162104.jpg微信圖片_20190321162113.jpg微信圖片_20190321162117.jpg微信圖片_20190321162120.jpg微信圖片_20190321162122.jpg微信圖片_20190321162125.jpg微信圖片_20190321162139.jpg微信圖片_20190321162143.jpg微信圖片_20190321162145.jpg微信圖片_20190321162148.jpg微信圖片_20190321162154.jpg微信圖片_20190321162157.jpg微信圖片_20190321162200.jpg微信圖片_20190321162204.jpg

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

          設計語言 - 側邊導航欄/分頁

          用心設計

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

           

          不管是做設計(感性)還是設計規范(理性),都是仁者見仁智者見智的,都很主觀。我是想闡述出自己的想法供大家參考,文章中的數值也不是固定標準,還是希望大家根據不同的項目需求,去解決不同的實際問題。



          目錄


          1.下拉菜單

             1.1 了解側邊導航欄

             1.2 繪制矩形框 

             1.3 文本行高

             1.4 層級劃分

             1.5 確定距離


          2.分頁

             2.1 了解分頁

             2.2 繪制普通分頁

             2.3 繪制首末分頁

             2.4 繪制跳轉分頁


          3.步驟條

             3.1 了解步驟條

             3.2 繪制步驟條




          1.1 了解側邊導航欄


          側邊導航欄就是固定在側邊或從側邊劃出的導航欄,一般應用在企業網站的觸發型導航欄上,或后臺頁面/系統的左側功能性導航欄上。側邊導航欄的方向是根據業務需求來做調整的,方向在那邊就往哪邊對齊。我們先了解一下側邊導航欄的樣式。

          undefined設計師的對設計的理解和審美決定了周圍要留多少的空白。



          1.2 繪制矩形框


          矩形框的高度可以隨著屏幕高度的變化而變化,所以不需要考慮。那只定義矩形框的寬度就行了,寬度分別是:?。?40px)、中(280px)、大(280px)。當我們決定采用哪種尺寸后,就要定義矩形框與內容之間的距離了。下圖所示的例子是以中等尺寸來做參考的。

          undefined



          1.3 文本行高


          當我們繪制好矩形框,就要往里填內容了。文本行高上一章已經講過了,就不多說了。文字的行高是由鼠標狀態(Hover)的高度來確定的,Hover的高度有多高,文字的行高就有多高。但要注意的是,側邊導航欄的文本左右多留一下白,不能使導航欄看上去太緊湊,給人感覺太壓抑,就會顯得不是很美觀了。

          undefined



          1.4 層級劃分


          因為側邊導航欄中有樹形結構,一個主級別可以分散為多個子級別,所以就需要劃分一下層級。劃分層級的方法也有很多,可以改變字號、改變顏色、改變字形、改變距離,那我用的方法是改變距離。采用哪種方法還是要看具體需求,像那種需要想突出層級且對比強烈的需求,可以采用改變字號和改變字形(加粗)。下圖中顏色越深層級越高,另外要注意的是,大類也有層次,越往上層級越高。

          undefined



          1.5 確定距離


          當我們把矩形框繪制好,文本也填進去后,就要確定每一個層級的距離了,我們要做出1>2>3的感覺出來,細微調整每個層級的間距,使它們的差異突顯出來。確定距離指的是每個層級左側的距離,這就像樓梯一樣,在上層的樓梯往往優先級是最高的。層級1(收藏夾)與層級2(藝術類)之間多留了4px的空白,目的是為了突顯主級別與子級別之間的差異,稍微強化了一下主級別。

          undefined

          來看一下最終效果吧。



          2.1 了解分頁


          側邊導航的講完后來講講分頁,分頁有三種樣式:普通分頁、首末分頁、跳轉分頁,名字是隨便起的,能理解什么意思就行了,來讓我們了解一下它的樣式。

          undefined



          2.2 繪制普通分頁


          接下來我們學著畫一下它。我把所有的分頁分為三種尺寸(大中小),分別是32px(?。?、36(中)、40(大),每一個小按鈕的曲率分別是4px(小)、6px(中)、8px(大)。每個小按鈕之間的間隔我用的是4px,也可以用8px,4px雖然更容易誤觸,但視覺效果要比8px好很多。

          undefined當然了以上數值也不是絕對的。尺寸、曲率和間隔都是需要根據項目需求與設計師自身審美來決定的。



          2.3 繪制首末分頁


          首末分頁就是在普通分頁的基礎上加兩個按鈕,分別是“跳轉到首頁”和“跳轉到末頁”。只要注意把“數字按鈕(分頁)”與跳轉首末頁按鈕”按優先級分隔就可以了,要把控好這首末按鈕與數字按鈕之間的距離,距離過短容易誤觸,距離過長會破壞整體性。

          undefined



          2.4 繪制跳轉分頁


          跳轉分頁是在首末分頁的基礎上加上“總頁數”與“跳轉至指定頁數”這兩個功能。跳轉分頁前端顯示總頁數,后端顯示跳轉至指定頁數。所有按鈕模塊的間隔都成倍遞減,這樣不同分頁的功能,區分就會更明顯一些,而且它們之間也有隱性的關聯。

          將分頁組件與其他組件組合起來看一下最終效果。圖片壓縮效果不是很好,要與實際效果(原始比例)差很多。



          3.1 了解步驟條


          步驟條相對比較簡單,這里穿插一下講了吧。步驟條的樣式比較多,但他們的繪制方法都大同小異,我只單拿出一個來講,就不一一的進行講解了。

          undefined



          3.2 繪制步驟條


          步驟條其實不難繪制的,注意對象和元素之間的距離就可以了。留的距離也要講究一些,要勻稱不能出現左面留太多而右面留太少的情況,具有關聯性的部分距離差異不能太大。另外就要考慮視覺平衡性的問題,不能一味的采用水平或垂直居中。只要熟練把控好距離,知道什么需求下留多少的白,那繪制不同樣式的步驟條,也會顯得游刃有余,做出的東西也更自然舒服體驗也更好。

          做設計要精益求精,把每一個像素點都要考慮到并合理運用它們。

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

          從UX 到產品設計,聊聊用戶體驗行業的巨大泡沫

          用心設計

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

           

          上周和小伙伴一起翻譯了一篇 medium 上點贊量超多的文章(8.1k贊),該文作者在電子產品的界面設計領域有13年的從業經驗,也經歷了從架構師到用戶體驗設計師再到如今的產品設計師的多次職業轉換,文章主要是講他對用戶體驗設計的犀利吐槽,以及對產品設計所代表的工作方法的無限看好?;蛟S觀點上并沒有什么新意,但是,就像某大佬說的,設計是對混亂的馴服。想要馴服混亂僅憑理論套路是遠遠不夠的,而設計師真正的價值或許也就在于此:投身于未知與混沌的灰色之中,并且還要從中分出黑白。

          那么為什么我要翻譯這篇巨長的文章呢?就我個人而言,單純很喜歡作者傲慢中帶著犀利的風格,就像看一篇文字版的吐槽大會般有趣。我在翻譯的時候加上了自己的思考和看法,所以,文末也留了 medium 的原文鏈接,可以去查看作者的本意,并觀看其中的演講視頻。

          這是關于我從架構師轉變到用戶體驗設計師的一段經歷,以及我是如何看待行業現狀的。

          十年前的某一天,我決定要把我的職業從架構師改成用戶體驗設計師。我記得當時很多可用性專家、架構師、界面設計師、交互設計師對我說:這只是潮流而已,「用戶體驗設計」這個表述并不,簡直就是胡說八道,體驗怎么可能被設計?

          然后在去年,我又突然決定把我的職業從用戶體驗設計師改成產品設計師。同樣的,一群用戶體驗設計師又來對我說,這只是潮流而已,用戶體驗設計師和產品設計師之間并沒有什么本質的區別。

          但是,對我來說,它們是不同的。在我看來,產品設計更加的謙虛真誠。我覺得這是用戶體驗設計師不具備但最應該學會的:謙虛務實。

          我不是在勸你像我一樣改換職業名稱(坦白地說,你最好別這么做),我真的一點兒也不在意。我只是想告訴你,我決定轉變的原因,以及我是如何看待行業現狀的。

          很膚淺的話題,聊職稱大概是世界上最無聊的事兒了,但是作為設計師們,我們又確實很喜歡討論它?;蛟S,這次我們可以聊的更深入一點。

          用戶體驗設計的出現是因為我們設計師的需求

          我一直很喜歡 Alan Cooper 提出的這個詞:交互設計師(interaction designer)。我認為它很地抓住了這項工作的本質。但是早在十年前看來,這個詞的定義就已經很狹隘了。數字產品的設計師們希望工作能觸及到更多的內容,而「用戶體驗設計」似乎就承擔了這個「需要觸及更廣泛內容」的責任。

          它確實抓住了這個需求,現在 UX 這個詞廣泛流傳,每個人都在使用這個縮寫,但問題是每個人對它的理解是不同的。所以,直到現在它也是個令人疑惑的概念。

          在Peter Merholz 的一次訪談中,Don Norman 對創造 UX 這個詞的初衷做了如下解釋:

          我發明了這個詞是因為我覺得人機交互和可用性這兩個詞兒太狹隘了。我想要創造一個可以覆蓋人們體驗各個方面的系統,包括圖形設計,界面,體感交互和這個系統的使用手冊。但從那之后,這個詞就開始廣泛地流傳,慢慢地失去了它本來的意義。

          如今它偏離本來的意義越來越遠,以至于 Alan Cooper 先生說:根本沒有用戶體驗設計這回事。

          UX設計師是如何看待自己的以及他們真正做的是什么?

          在我們盡可能擴寬工作邊界的努力之下,我們把 UX 這個氣球吹得快要爆掉了。UX 現在承擔了「設計不同觸點的體驗」的任務,包括組織轉型,制定策略,改革創新,市場營銷,設計從 app 到廣告、服務、設備、地點、事件,甚至公司文化在內的所有事情。

          或許用戶體驗確實應該做到這些,但是問題是,沒有一個用戶體驗設計師能一個人把所有的這些事情做好,要創造一個復雜的產品,你需要的是一個由不同領域專家組成的團隊。

          我不得不說很多 UX設計師真的是眼高手低,他們根本不具備足夠的技能或者經驗去支撐他們的野心。

          我同時也負責招聘的工作,大多數申請 UX 這份工作的求職者可以分為以下幾類:

          • UI/UX設計師,其實就是圖形設計師,他們并不擅長信息架構、定義目標和需求,創建交互模型,考慮商業利益。他們只生存在追波上。
          • UX設計師,他們靠畫規范的線框圖謀生,有時候也做做可用性測試。(順便說一句,他們是最有可能成長為優秀的產品設計師的人。很多有經驗的 UX設計師叫他們「線框仔」,我真的很討厭這種沒必要的鄙視。他們忘了自己也是這么成長起來的。)
          • 空想家,專注于建工作坊,喜歡在墻上貼便利貼和畫布,但是通常沒有把想法轉化為實際設計方案的能力。

          當然,以上只是一種簡單的歸納,但是從我的觀察來看,很多做 UX 的都可以歸到這三類人當中,因為真的很少見到那種既懂戰略又會戰術,既有創造力又有執行力,既了解商業又懂設計的人才。

          UX設計師日常做的事情以及他們對商業的價值根本配不上他們的自我認知:「用戶體驗設計很重要 」。

          用戶體驗設計實際上并不像很多「什么是UX」的文章寫的那樣是所有事情的中心。我推薦你去看Paul Addams在UX London 2018上的優秀演講——《The end of Navel Gazing》。標題「用戶中心論的終結」很好地表達了這個意思。

          UX專注于用戶和工具,但是這兩點并不足以解決真正的商業問題

          我觀察到的另一個現象,是關于用戶體驗設計目前的狀態的。UX設計師們每天都會發表數不清的文章,它們大部分都是關于研究工具以及方法論(例如用戶畫像,用戶體驗地圖,原型制作工具,用戶研究方法等等),各種教程,無關緊要的圖形設計趨勢,或者用戶界面細節。

          Fabricio Teixeira 和 Caio Braga 寫了一篇優秀的文章來說明這些理論的狹隘之處:

          https://essays.uxdesign.cc/state-of-design-publishing/

          然而,這些我們經常討論的東西,對于處在殘酷商業競爭環境下的產品設計團隊來說,并沒有什么用。因為計劃與管理實際的產品開發進程和理想的「Design thinking 五步法」之間并沒有太大的關系。

          整個 UX 行業好像對商業這部分都沒什么興趣,也難怪,「用戶體驗設計」這個名字就暗示了他們只關注用戶。商業是別人的事。

          UX設計現在很像一個宗教,而且它的信徒的想法通常都很接近

          也難怪會冒出 UX 的忠實捍衛者們了,如果你膽敢不同意他們的信仰,他們就會把你的心扯出來。

          僅僅只要說一句:用戶研究不是總是被需要和有實際意義的。他們就會告訴你如果你不會用戶研究,你就不是一個合格的用戶體驗設計師。如果你個人并不是很喜歡一些方法論,像用戶畫像或者其他,你最好趕緊默默溜走。

          可悲的是,UX們總是想成為最有創新能力的人。但是我認為他們并不是。因為,創新力需要嘗試不同的工作方法,考慮新鮮的想法,要求與眾不同以及靈活多變,敢于實驗,勇于實踐,并擁有商業頭腦與落地思維。想要成為真正的革新者,需要的是自己去開創自己的道路,去突破規矩,去冒險。而不是重復說那些所有人都在說的簡單的陳詞濫調,遵從那些輕而易舉的方法指南。我覺得 UX設計師整個群體都搞不清楚地圖和實際道路,模型(或其他噱頭)和現實之間的差別。(只有這些「革新者」的想法才很容易被預測:因為他們所有人都讀一樣的書,說著同樣的話。)

          我感覺我已經超越了UX

          我從事數碼產品的設計有13年了,現在我不覺得我和大多數的 UX設計師之間有什么共同點。我覺得我已經超越了用戶體驗設計。我跟產品經理或產品需求方之間更為投契。

          Peter Merholz 在他的一次演講中說過,用戶體驗這個行業的出現是因為產品經理對用戶體驗缺乏考慮,我同意這種說法。

          數字產品就是我現在正在做的,像網頁,app,界面。我的目標是為我的客戶創造一個成功的產品,一個會幫助他們賺錢或者省錢的產品??捎眯院陀脩趔w驗只是實現這個目標的一部分,它們很重要,但是說實在的,并不是最終的目的。我不會像大多數的 UX設計師那樣不切實際的浪漫主義。

          我也需要為我自己和我的公司賺錢,所以我要擅長規劃一個有效率的設計流程,估計好預算,有條有理地和客戶進行合作,銷售與推廣我的工作,招聘人才等等。

          我知道我很擅長數字產品設計,但是我可能并不擅長做所有類型的設計。這就是為什么我更喜歡「數字產品設計師」這個頭銜的原因了。

          我喜歡它的點在于,它更聚焦于產品而不是用戶。它把我的工作放在了資本市場的背景之下。產品需要對顧客有用,但是也需要切實地有利可圖。

          對我來說,無論它是什么,聽起來,「產品設計」比「用戶體驗設計」都更加的落地。產品設計更容易被所有人理解,甚至你媽媽也能懂。它不需要太多解釋。用戶體驗只是它的一部分,但是從另一方面講,比起想要解決世界上所有問題的萬能藥UX 來說,產品設計這個說法更加的謙虛。

          現在我大部分時間依然是在做交互設計和信息架構這種傳統工作。我大部分的精力也都是花在制定策略,進程管理和設想概念的層面。但是我也正在帶上許多的帽子:決策者,界面設計師,架構師,文案,創意總監,項目經理,產品需求方,用戶研究員,測試人員??傊?,哪里有需要哪里就有我。

          當然我需要和很多人(他們是各自專業領域的專家)一起合作來實現我的愿景,然后把它迭代變得更好,更完善。技術專家,開發者,圖形設計師,內容設計師,項目經理,甚至律師等等。最后的用戶體驗其實是很多這些人的工作共同作用的結果。

          用戶體驗是很多人工作的結果,是一個產品或者服務生產出來的,并不是一個職位的描述。

          我會把產品設計師定位為這樣一個角色:他們是那些為產品功能和形式的最終呈現負責,并能夠以任何可能的方式對設計流程以及產品的發布進行規劃和優化的人。(如果你還把產品設計僅僅看作是 UI/UX 的另一個名字,這對你毫無幫助)對于很多有經驗的 UX設計師來說,并沒有什么新鮮的,但是產品設計確實和 UX 不同。

          我看到如今,越來越多的有經驗的 UX設計師稱自己是產品設計師了,所以,也許這是一個潮流吧。又或許是某種原因?

          Andy Budd,一個有著很棒的見解的家伙,我一向很尊敬他,最近他發了一個推特說:UX就像爵士樂,產品設計就像朋克樂。

          好吧,我的看法跟他完全相反。打比方說,如果你想成為一個 UX設計師,你現在要做的只需要去上個周末課程,學習設計過程的5步法以及5個方法論,像用戶畫像,用戶體驗地圖,愿景圖,你就可以開始干活兒了。

          但是成為一個產品設計者,你需要把產品交付給市場的實際經驗,這非常的難,因為經常是一團混亂,復雜的過程。產品設計就像自由的爵士樂??赡苈犉饋砘靵y嘈雜,有一點像朋克樂,但是想要把它玩好,你需要很多的技能和經驗以及音樂理論的掌握,也需要一些即興創作的能力:改變規則甚至是反對它們。更不用說,在團隊中,你需要成為整個團隊工作的主導。

          無論你想叫自己什么,無論你有多大的夢想,但,也要記得保持真實和謙卑

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

          設計師必須學會的卡片式設計!

          用心設計

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

           微信圖片_20190318164322.jpg微信圖片_20190318164342.jpg微信圖片_20190318164344.jpg微信圖片_20190318164347.jpg微信圖片_20190318164350.jpg微信圖片_20190318164352.jpg微信圖片_20190318164355.jpg微信圖片_20190318164359.jpg微信圖片_20190318164402.jpg微信圖片_20190318164404.jpg微信圖片_20190318164407.jpg微信圖片_20190318164410.jpg微信圖片_20190318164413.jpg微信圖片_20190318164416.jpg微信圖片_20190318164419.jpg微信圖片_20190318164421.jpg微信圖片_20190318164424.jpg微信圖片_20190318164427.jpg微信圖片_20190318164429.jpg微信圖片_20190318164432.jpg

           

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

          成為UI / UX設計師所需的7個步驟

          用心設計

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

          現在讓我們關注最常見的設計專業:UI/UX設計師。

          一、熟悉UI原則

          在進行設計練習之前,你需要做的第一件事就是學習一些設計原則。這樣你才能夠進入設計世界,并開始進行“創造性”的思考。你會學到心理學對設計方案的影響,例如:為什么它看起來不錯,為什么會失敗。

          下面是你應該了解的一些設計基本原則。

          1、顏色

          色彩詞匯,色彩基礎和色彩心理學。

          設計原則:色彩

          2、平衡

          對稱性和不對稱性。

          設計原則:平衡

          3、對比

          使用對比來組織信息,構建層次結構和創建焦點。

          設計原則:對比

          4、 排版

          選擇字體和在網絡上創建可讀的文本。

          易讀性的10個原則與網頁排版

          5、一致性

          最重要的原則,創造直觀和實用的設計。

          設計原則:一致性

          下面是設計好的界面一些好的方法和需要注意的事項。

          二、了解創意用戶體驗流程

          接下來要了解創作過程,UI / UX設計是設計都要經歷的特定階段。它分為四個不同的階段,發現、定義、開發和交付。


          創作過程

          發現

          在項目的最開始,設計師會開始研究,獲取靈感并收集想法。

          定義

          在定義階段,設計人員定義從發現階段提取的想法。由此創建了一個清晰的創意設計方案。

          開發

          在這里創建原型,測試和迭代解決方案或概念的地方。這種反復試驗過程有助于設計師改進和完善他們的想法。

          交付

          最后交付階段,項目會最終確定并且投入使用。

          三、培養你的設計視野

          了解設計原則雖然有很大的幫助,但這是遠遠不夠的,還需要培養你的視野,知道什么是好的設計和壞的設計,并且能找到設計方案的優缺點。

          在打開一張空白的畫布并盯著它看半個小時之前,你明白創新的唯一方法是通過研究。培養你的設計視野的最有效方式是通過看更多的設計方案來尋找靈感。尤其當你是初學者的時候,有時候無法自己打開腦洞,這時候你必須先看看其他人的設計。

          瀏覽靈感類網站

          所以看看其他設計師在Dribbble上做了什么,每當你遇到漂亮的設計或與你的項目相關的東西時,將它保存在筆記中并能說出你為什么喜歡,你也可以截屏保存。通過這種方式,你將擁有一個豐富的設計素材庫,設計之路由此展開。

          四、每天閱讀設計文章

          為了讓自己盡快的熟悉設計,最好的方法是每天閱讀一些文章。讓閱讀設計新聞和博客成為日常習慣。我們有數百萬篇在線文章可供我們了解新趨勢,設計方法和教程。我們所要做的就是找到它們,沒有比從其他人總結的經驗中學習更好的了。

          讓閱讀文章成為日常習慣

          在早上學習新事物會擴充你的腦洞,并為白天創造騰出更多的空間。因此你早上可以在Medium或Smashing Magazine看一些優秀的設計文章,開始新的一天。

          另外要注意勞逸結合,不時地休息一下,閱讀更多設計內容。特別是當你陷入困境并感到沒有想法的時候,更有停下來休息,休息對于創造力非常重要。你可以將您喜歡的網站收藏為書簽或訂閱設計博客。

          五、設計概念項目

          實踐是檢驗真理的唯一標準,并且我們清楚的知道,沒有設計經驗我們就無法獲得客戶/工作。但如果沒有客戶/工作我們就沒有辦法加強設計技能。所以我們可以通過自己的實踐來打破這個循環,進行概念項目設計以獲得樂趣以及成長!Dribbble上有很多的概念設計,他們都做的很棒。

          Facebook Material Design by Kevin McCarthy

          你可以花點時間選擇你感興趣的網站或App并重新設計它。你可以完全賦予它新的創意和意義,并且由此你將形成你的設計風格和作品,獲得快速的成長。

          六、了解的設計工具

          我們有很多的設計工具,但你不需要都了解。你只需要選擇你喜歡的并且適合你的工具即可,并隨時了解的功能和趨勢,以下是我在設計過程中使用的工具:

          界面設計:Sketch

          用于協作界面設計:Figma

          用于低保真線框圖:Axure

          用于界面設計和原型設計: Adobe XD

          可交互動態原型:Principle、Flinto

          用于原型設計和協作:Invision App

          七、尋找導師并且得到幫助

          學習設計的另一個好方法是找到愿意提供幫助的設計導師或設計師朋友。他們將幫助您加快學習進程,導師或者設計師朋友會對你的設計方案會盡可能地發表意見。這就像一條捷徑,他們還會分享他們的經驗和方法論以及設計技巧。因此請向有經驗的設計師或者導師提出問題并討論您的疑問。

          另外在我教授設計和前端的幾年時間里,我學到的東西比我教的要多很多。所以當你準備好如何與人們討論設計時,你可以指導或教育某人有關設計的知識。你將學習從不同的角度看待它,你將獲得你可能從未想過的反饋和問題。

          每當你和其他人談論設計時,你的思維將一直處于“頭腦風暴”模式,你會發現自己越來越對設計產生興趣。

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

          UI中切圖與命名規范,收藏!

          用心設計

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

           

          規范的命名方式可以提高開發人員的開發效率和整個開發團隊的友好合作,減少溝通成本。結合經驗與收錄的資料,分享給大家。

          一. 切圖命名英文縮寫的三個要求


          1.較短的單詞可通過去掉“元音”形成縮寫

          2. 較長的單詞可取單詞的頭部幾個字母形成縮寫

          3.還有一些特定的英文單詞縮寫


          二. 命名規則


          切圖命名以模塊為前綴,如:模塊_類別_功能_狀態.png


          模塊:

          登陸頁面(login) 公共(common) 需求a(need) 需求b(demand) 發現(discover) 消息(message)    我(me)


          類別:

          導航欄(nav) 菜單欄(tab) 按鈕(btn)  圖標(icon)  背景圖片(bg)  默認圖片(def)


          狀態:

          selected(選中) disabled(不可點) pressed(按下) normal(一般)


          舉例說明:

          IOS:

          以750*1334為基稿設計,按實際項目開發為標準,需切出@2x和@3兩套圖,把在公共頁面中的導航欄里面有一個按鈕(40x60px)的選中狀態切圖,直接輸出的切圖為@2x圖,@2x的1.5倍圖為@3x。


          輸出成果為:

          common_nav_btn_back_s@2x.png(40x60)和common_nav_btn_back_s@3x.png(80x120);

          意思為:公共_導航_按鈕_返回_選中


          Android:

          以720*1280為基稿設計,由于尺寸不同且多樣,需要切多套圖適配不同機器,分別為mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi,直接輸出的切圖為xhdpi;它們分別對應的倍數關系為1、1.5、2、3、4。


          輸出成果為:

          common_nav_btn_back_s_mdpi.png(20x30)、

          common_nav_btn_back_s_hdpi.png(30x45)、

          common_nav_btn_back_s_xhdpi.png(40x60)、

          common_nav_btn_back_s_xxhdpi.png(60x90)、common_nav_btn_back_s_xxxhdpi.png(80x120);


          命名示列:

          啟動  (default):    

          default.png   啟動圖片;

          default_logo.png   啟動logo


          登陸(login):

          login_bg.png   登陸背景圖片

          login_logo.png   登陸logo

          login_input_n.png   輸入框

          login_input_s.png   輸入框選中狀態

          login_btn_n.png    登錄按鈕

          login_btn_s.png    登錄按鈕選中狀態


          注冊(register):

          login_register_rb_n.png    單選框按鈕

          login_register_rb_s.png    單選框按鈕選中狀態


          導航欄(nav):

          common_nav_btn_menu_n.png    菜單按鈕

          common_nav_btn_menu_s.png    菜單按鈕選中狀態

          common_nav_btn_back_n.png    返回按鈕

          common_nav_btn_back_s.png    返回按鈕選中狀態

          common_nav_btn_close_n.png    關閉按鈕

          common_nav_btn_close_s.png    關閉按鈕選中狀態

          common_nav_btn_eidt_n.png    編輯按鈕

          common_nav_btn_eidt_s.png    編輯按鈕選中狀態

          common_nav_btn_delete_n.png    刪除按鈕

          common_nav_btn_delete_s.png    刪除按鈕選中狀態

          common_nav_btn_message_n.png    消息按鈕

          common_nav_btn_message_s.png    消息按鈕選中狀態

          common_nav_btn_search_n.png    搜索按鈕

          common_nav_btn_search_s.png    搜索按鈕選中狀態


          列表(list):

          hpcollege_list_collect.png    列表頁收藏按鈕


          左側導航欄(leftbar):

          leftbar_info.png     個人中心


          菜單(tab):

          common_tab_need_n.png     需求a按鈕

          common_tab_need_s.png     需求a按鈕選中狀態

          common_tab_find_n.png     發現按鈕

          common_tab_find_s.png     發現按鈕選中狀態

          common_tab_demand_n.png    需求b按鈕

          common_tab_demand_s.png    需求b按鈕選中狀態

          common_tab_me_n.png    我的按鈕

          common_tab_me_s.png    我的按鈕選中狀態


          首頁(home):

          home_bg.png     首頁背景

          home_banner.png     首頁廣告圖


          點9圖(.9):

          rounded rectangle.9.png    圓角矩形


          常用詞語:

          selected:選中/s

          pressed:按下/pre

          disabled:不可點/d

          normal:正常/n

          common:公共

          default:登錄頁

          discover:發現

          message:消息

          me:我

          navigation  bar:導航欄/nav

          tab:菜單欄

          button:按鈕/btn

          icon:圖標

          background-image:背景圖片/bg

          default-image:默認圖片/def

          cut-off  rule:分割線/cor

          login:登陸

          register:注冊

          list:列表

          home:首頁

          banner:廣告

          browse:瀏覽

          details:詳情

          like:喜歡

          dislike:不喜歡

          search:搜索

          content:內容

          collect:收藏

          eidt:編輯

          comment:評論

          message:提示信息/msg

          ranked:排名

          location:定位

          tags:標簽

          left:左

          right:右

          center:中

          popup:彈出/pop

          image:圖片/img

          viedio:視頻/vd

          audio:音頻/ad

          title:標題/tit

          address:地址/add

          number:人數

          time:時間

          sustem:系統

          refresh:刷新

          user:用戶

          more:更多

          border:邊框

          next:下一步

          sign:簽到

          code:密碼

          clear:清除

          scroll:滾動條

          hover:鼠標停留

          common:公共

          hot:熱點

          zoomin:放大

          zoomout:縮小

          service:服務

          presonal  data:個人資料/Pdata

          male:男性

          female:女性

          report:舉報

          input:輸入/ip

          dropdown  menu:下拉菜單/ddm

          radio button:單選框/rb

          check  box:復選框/cb

          progressbar:進度條/pbar

          download:下載

          arrow:箭頭

          share:分享

          upload:上傳

          release:發布

          tabbar:標簽欄

          autonym:實名

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

          日歷

          鏈接

          個人資料

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

          存檔

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