返回首頁 設為首頁              資源已找到,加載中...... 請稍等!          網站地圖google地圖百度地圖同行旅游RSS |

  資訊>|新聞|人物訪談|新手教程|網絡營銷|互聯網絡|站長故事|網站設計|網絡應用|

  分類>|百度推廣|谷歌推廣|騰訊推廣|必應推廣|雅虎|搜狗|搜索|炒作|軟文|博客|綜合|

  目錄>|推廣故事|域名空間|故事|編程|合作|休閑|人才|招聘|論壇|博客|站長|休閑|

>> | 設為首頁 | 加入收藏 |

讓APP設計變得更精致的5個維度出發
讓APP設計變得更精致的5個維度出發
   點擊數:198  更新時間:2017/11/19 20:26:24
  當我們打開一個App時,從視覺層面分析,影響用戶對App整體感官體驗的元素主要有:圖片、文字、色彩、圖標、留白等。
  圖片的合理運用、清晰的信息層級、舒適的色彩搭配都將會提高整個App的美感,從而為整個的產品體驗加分。一個成功的產品,視覺層面只是其中的一部分,但是作為一個合格的UI設計師,我們要做的就是把這其中的一部分做到極致。
  下面我們通過圖片、文字、色彩、圖標、留白這幾個維度來解剖App設計,發現那些微妙的細節。只需要比別人多提高1px的細節,你的App設計就會更精致。
  目錄
  圖片,如同一個人的衣著品味。
  文字,我只想知道重點在那里。
  色彩,如何成為「色」計師。
  圖標,從會畫到畫好之間有多遠。
  留白,我只想要足夠的空間。
  一. 圖片,如同一個人的衣著品味
  圖片在App中是非常常見的,圖片的展現形式和圖片的質量都影響著用戶對產品的感官體驗。圖片的定位就如同一個人的衣著品味,不同的穿衣風格會使別人對你作出不同的判斷,為你打上不同社會屬性的標簽。
  下面我們一起來看看圖片在App設計中需要注意的關鍵點,將會從圖片比例、一致性、圖片質量與真實性等方面進行分析。
  1. 圖片比例有什么講究?
  不同比例的圖片所傳達的信息主體不盡相同,根據產品屬性我們會選擇與之相符的圖片比例進行整體的框架布局。
  通過體驗一些主流的App,我們會發現一些比較常用的圖片比例,如 1:1、4:3、16:9、16:10等等;也會發現一些打破常規比例的設計,我們需要分析它們的性格,結合自身產品的特點,才能在自己的APP設計中合理的加以運用。
  1:1 強調主體的存在感
  1:1 的圖片比例是比較常見的一種設計比例,利用此長寬比更容易將構圖歸整得簡單,突出主體的存在感。常用于產品展示、頭像、特寫展示等場景,在電商類APP中尤為常見。
  4:3 圖像緊湊、更易構圖
  4:3的圖片比例可以使圖像更緊湊,更易構圖,方便設計師發揮。由于手機屏幕容量較小,作為全屏展示時,該比例在App設計布局上面占用空間較大。作為設計師來說,這個比例經常接觸,站酷、UI中國的作品封面、Dribbble作品展示等都采用這個比例。
  16:9 電影場景般的效果
  16:9的圖片比例可以呈現電影場景般的效果,多用于橫向構圖,是應用非常廣泛的尺寸比例之一,能給用戶一種視野開闊的體驗。在很多影視娛樂類APP設計中運用廣泛,如騰訊視頻、網易云音樂等。
  16:10 擁抱黃金比例
  黃金比例就像金字塔上的明珠,越接近她越有魅力,反之會魅力減弱,16:10的圖片比例最為接近。設計沒有絕對的標準,我們可以遵循一些優秀的經驗規則,但是也要敢于突破規則,嘗試更多的可能性。
  X:≤Y 瀑布流設計
  X:≤Y代表寬度固定,高度在最大值之間自定義的瀑布流設計,在一些用于用戶沒有很明確的目的,只是喜歡獲取盡量多的信息的情況下采用這種設計方式。X:≤Y的圖片比例要注意高度的控制,不要超出屏幕可顯示區域的范圍,如花瓣網在750x1334px的設計中高度最大值為:848 px。
  以上列舉的僅為部分常用比例的分析與說明,還有更多的比例這里就不一一演示,分享的目的是讓大家養成分析的習慣,結合自身產品特點選擇適合的圖片比例。
  圖片比例選擇方式:
  以商品展示效果為準,選擇能夠充分表現商品特點的圖片展示比例。
  以產品氣質為準,選擇符合產品內容氣質的圖片展示比例。
  結合產品特點選擇合適的常用比例。
  根據版面布局靈活的自定義特殊的比例值。
  分析→打破→創新,創造出符合某種規律或者美學概念的比例值。
  2. 圖片比例的一致性
  當我們結合產品特點確定合適的圖片展示比例以后,需要針對整體的布局與圖片分布情況,規范出那些布局可以采用相同的圖片展示比例。在保障視覺效果與交互形式的情況下,相同的主體,在不同的頁面中最好采用相同的比例呈現,這樣的好處不僅可以保持視覺表達的一致性,也能給后期運營維護帶來便利。
  3. 提高圖片的質量
  越來越多的產品對圖片質量開始加以重視,比如網易嚴選對產品圖片的拍攝與處理都有嚴格的規范,目的就是為了提升產品氣質和在用戶心中的印象。我們在設計的時候更要以最佳的圖片來烘托我們的設計稿,圖片的質量影響著整個界面的格調。
  很多伙伴兒會覺得圖片都是后期運營上傳的,我設計稿做得再精美最終也是沒用的。對于這個問題我的觀點是這樣的:
  最佳的設計輸出是設計師專業的體現。
  把最好的效果呈現給決策者,增加他對你設計能力的印象。
  通過制定運營視覺規范來把控圖片質量,是可以嚴格把控你對圖片的視覺追求。
  你的態度會給你帶來好運。
  4. 圖片的真實還原
  雖然前面提到圖片質量的重要性,但是我們不能為了視覺效果選擇一些與主題無關的配圖,這樣也會給決策者一種誤導。我們可以提高配圖的質量,但是需要保證圖片的真實還原,這樣才能讓你的設計作品更加真實合理。
  在一些本土的產品設計中,對于國外圖片素材的運用,需要謹慎對待。如案例中的模特形象,文案信息的傳達更加偏向于國內的場景,如果運用一張國外的模特素材也許逼格更高,可是卻無法真實的還原產品場景,會給決策者傳達一種錯誤的認知。
  二. 文字,我只想知道重點在那里
  文字設計的層次感決定了信息的高效傳達,通過對文字信息的層次處理可以有效的幫助用戶獲取信息,提高用戶對產品的操作效率。
  1. 對文字信息進行層級區分
  當我們拿到交互原型或者別的需求文檔時,我們需要對文字的信息層級進行有效的區分,這樣才能讓用戶快速的獲取和理解信息傳達的內容。
  文字信息可以簡單劃分為重要信息、次要信息、輔助信息等。在進行文字排版時,需要明確的梳理好信息之間的層級關系,提高用戶對產品的整體體驗。
  通過對字體大小、顏色、留白、層級劃分等處理,把相同屬性的信息歸類設計,讓整個信息排列主次分明,層級清晰。
  設計師在對文字進行視覺表現時,為了達到整體界面的視覺平衡也需要減少對文字樣式的運用,不可為了突出文字信息而采用過多的表現樣式。
  2. 預估好信息呈現的最大值
  當我們在進行界面設計時,初級設計師往往會忽略文字信息的最大值,只是按照自己的習慣進行完美的布局,最終進入到測試環節時才發現為什么比自己預期的字數多出這么多信息,此時就會出現返工的情況,給整體的產品開發進度帶來風險。
  作為一名合格的UI設計師,我們需要預估好信息呈現的最大值,而不是取最小值或者隨意進行設計,這樣將會在執行的過程中遇到更多不可控的風險。
  3. 善于利用提示符進行設計
  在一些會出現大篇幅文字信息的界面設計中,為了提高用戶對信息的獲取效率,我們會根據整體視覺效果選擇合適的提示符進行設計。很多初級設計師會過于遵循交互原型,往往對大篇幅文字的處理過于隨意,只做著交互原型的美化,缺乏對用戶體驗的主動性。
  在進行產品交互設計時,有時候產品或者交互無法站在視覺的角度進行信息的梳理和布局,我們需要利用自己的專業來優化你覺得可以更好的地方,也能為你在整個產品環節中樹立專業性。
  關于提示符的設計表現形式主要有數字、字母、圖形、色塊等等,只要能有效的區分信息層級即可。
  三. 色彩,如何成為「色」計師
  色彩給人的感受是最直觀的,不同性格的配色傳達不同的情感。關于配色有一些方法可尋,但是也存在一定的感性判斷。作為視覺設計師,我們需要學習理性的方法技巧,也要不斷欣賞優秀的作品,提高自身的審美能力。
  1. 色彩基礎知識
  色彩分為無彩色系和有彩色系,無彩色系是指白色、黑色、各種深淺不同的灰色;有彩色系是指紅、橙、黃、綠、青、藍、紫等顏色。
  關于色彩的更多理論知識這里不做展開,大家自行腦補色相、純度、明度、對比、性格等等方面的理論知識。
  2. 建立色彩庫
  作為初級設計師我們對配色的把控不是很穩定,為了提高工作效率,我們需要通過一些理性的方式建立大量的色彩庫,應對不同的需求。
  下面列舉部分個人比較常用的方式供大家參考,色彩收集的方法有很多,我們只需要掌握幾個比較適合自己的即可,只要養成習慣并長期堅持,哪怕只運用一種方式,也是收獲頗豐的。
  通過各類APP采集色彩
  體驗不同領域的APP,建立不同領域對APP色彩組合的選擇,為后期項目設計奠定基礎。根據主色進行分類,如紅色系列:網易云音樂、京東、網易嚴選、網易考拉等等;也可以根據產品氣質分類,如文藝、時尚、科技、可愛等等。
  通過Dribbble采集色彩
  在Dribbble上面,每一幅作品右側都有該作品的配色文件,發現優秀的作品要養成這種采集配色文件的習慣。
  通過攝影作品采集色彩
  通過優秀的攝影作品采集色彩也是常用的方法之一。
  采集方式:
  Photoshop打開圖片 → 存儲為Web所用格式→ 選擇GIF格式 → 顏色選擇 8 → 顏色表中雙擊色塊 → 拾色器
  通過馬賽克采集色彩
  借助Photoshop濾鏡將圖片進行馬賽克處理,可以得到優秀作品或者攝影圖片的配色組合,特別適合采集同色系的配色。
  采集方式:
  Photoshop打開圖片 → 濾鏡 → 像素化→ 馬賽克 → 設置單元格大小
  從電影中采集色彩
  相信大家都喜歡看大片,這部片子之所以能得到大家的追捧,必定有太多值得大家學習的元素。作為神經敏感的設計師群體,那些刺激到我們神經元的優秀影片場景總是不能錯過的。
  方法不在于多,而在于習慣和堅持
  3. 提高審美,增強感性判斷力
  配色能力雖然可以通過一些理性的方法提高,但是也存在一定的感性判斷。配色中細微的差異往往都是感性的判斷,我們需要不斷的欣賞攝影、繪畫、設計作品等等,綜合的提高自身的審美,才能不斷增強感性的判斷力。
  作為UI設計師,你不能只關注界面設計,你可以看平面作品、攝影繪畫、影視動效,體驗手工藝制作、運動娛樂、細心的體驗生活中的每一次變化。
  4. 養成分析的習慣
  要想擁有良好的配色能力,積累的過程是很重要的。當我們看到優秀的作品,要分析配色之間的對比關系、顏色在色環上的位置關系、HSB數值的關系等等。只有不斷的分析和總結才能逐步形成自己的思維方式,提高不同配色的把控能力。
  分析的習慣不只是運用在色彩上面,對于版面布局、文字信息的處理、icon設計風格、間距留白等等方面都需要不斷的進行分析總結,掌握優秀作品的規則才能形成自我的標準習慣。
  四. 圖標,從會畫到畫好之間有多遠
  圖標是App設計中的點睛之筆,既能輔助文字信息的傳達,也能作為信息載體被高效的識別。圖標也有一定的界面裝飾作用,提高界面整體的美觀度。
  很多初級設計師都會忽略圖標的重要性,也養成去素材網站下載復用的習慣,當這樣的習慣養成后便會逐步喪失自己動手的驅動力,什么元素都希望能找到素材下載,工作數年之后很快就遇到了自己的瓶頸期。
  設計師對圖標設計的態度與把控能力,將會是拉開你與其他設計師差距的因素之一。圖標設計有下載復用 → 動手設計 → 規范設計 → 融入品牌基因等幾個階段,你現在屬于哪個階段呢?
  1. 下載復用
  下載復用是很多初入行業的設計師習慣的工作方式之一,由于自身對軟件技法、設計技巧、創意能力等方面的不足,無法從創意到標準制圖完成一個合格的圖標設計。
  缺點:圖標設計風格與細節處理都完全不統一,這樣的習慣一旦養成就會逐步喪失自己的動手能力。
  2. 動手設計
  對于大部分有設計追求的設計師,都會意識到圖標設計的重要性,也會結合產品特點繪制統一風格的圖標。
  注意事項:圖標設計風格有:線性圖標、填充圖標、面型圖標、扁平圖標、手繪風格圖標和擬物圖標等。無論我們選擇何種表現形式,在進行設計的時候都要保持風格的統一性,由于圖標的體量不同,相同尺寸下不同體量的圖標視覺平衡不盡相同,例如相同尺寸的正方形會比圓形顯大。因此,我們需要根據圖標的體量對其大小做出相應的調整。
  3. 規范設計
  當設計師養成自己動手的習慣以后,恭喜你已經進步了,保持這樣的習慣。隨著軟件技法的成熟我們需要嚴格控制自己的隨性,運用標準的規范進行圖標設計。在標準設計的基礎上面我們可以發揮自己的創意,也不一定要局限在標準里面,但是總體的本質需要符合設計規范。
  4. 融入品牌基因
  圖標設計的差異化逐漸變得模糊,隨著很多功能的相似性,圖標的造型設計也幾乎雷同,很多對設計比較講究的產品,也開始根據自身品牌基因,進行圖標定制化。融入品牌基因的圖標設計具有很強的品牌識別性,不僅可以形成獨有的視覺差異化,也可以增強用戶對產品的記憶。
  五. 留白,我只想要足夠的空間
  適當的留白可以讓你的界面更有靈性,給信息之間預留更多的空間,也能更好的表達信息之間的層次感,相比擁擠的信息布局更能給人舒適的體驗。
  當設計師的留白意愿被產品或運營以「希望放更多內容」拒絕時,作為設計師我們可以從不同的方向試著表達自己的觀點:
  設計出對比稿,把產品需要的方案和你覺得完美的方案進行對比;
  篩選出這樣處理的優秀案例,以成功的案例說服產品接受你的方案;
  進行用戶測試,選擇一些目標用戶進行體驗,從用戶心聲入手設計最佳的方案;
  更多溝通的方法有待你去挖掘,最終的目的都是希望做出更好的產品。
  小結
  不同的圖片比例反應不同的特征,根據產品特點合理的選擇。
  設計中保持相同的圖片比例,不僅使視覺表達一致,也能給后期運營維護帶來便利。
  通過提高圖片的質量來提高設計作品的美感度,但是也要保證圖片的真實還原。
  文字排版需要注意信息的層次、信息容量的最大值、巧妙的運用提示符等。
  養成不斷建立和豐富色彩庫的習慣。
  提高審美,增強感性判斷力,養成分析的習慣。
  圖標設計經歷的幾個環節:下載復用 → 動手設計 → 規范設計 → 融入品牌基因。
  適當的留白可以給人更加舒適的體驗。
  提高設計作品質量的方式有很多,需要我們去不斷的學習與總結,沒有任何實現的方式是唯一的,不斷的分析、推翻、創新、才能找到適合自己的方式。
  最后祝大家越努力越幸運!

  • 上一篇文章:

  • 下一篇文章: 沒有了
  • 【字體:
      網友評論:(只顯示最新10條。評論內容只代表網友觀點,與本站立場無關!)
    相 關 文 章
    沒有相關文章
    最 新 推 薦

    Copyright © 2005 - 2011 建站流程網 chczz.com All rights reserved. 聯系郵箱:chczzcom#163.com
    中國信息產業部備案編號:渝ICP備09029879號-2
    本站全部資源來自于互聯網,只供學習,不得用于商業,如有侵犯版權請聯系告知,來信請務必附上版權申明及相關證據,我們將第一時間刪除.

    cctv5高尔夫网球频道