APP界面設(shè)計：設(shè)計元素設(shè)計須知

前言

隨著電子科技革命的日臻成熟，手機作為電子科技最為出重的碩果之一，成為了廣大用戶青睞的對象，基本上人手一部。智能手機普及率之所以高高在上，原因在于智能手機中琳瑯滿目觸手可得的各類應(yīng)用幫助用戶解決了衣食住行等各類需求，幫助用戶快速的達成自己的目的，在這一過程中手機APP扮演了至關(guān)重要的角色，因此移動端APP設(shè)計如火如荼。

APP對于用戶快速解決需求起著非常重要的作用，用戶自由的在各類圖像視頻元素中穿梭享受，所以圖像元素的設(shè)計顯得尤為重要?那接下來我們一起分享如何更好地設(shè)計APP界面中的圖像元素。

在移動端APP界面設(shè)計中設(shè)計師除了完成交互設(shè)計，視覺設(shè)計方面主要研究圖片元素、文字元素、圖標元素、色塊元素之間的排版布局關(guān)系，這四類元素對于設(shè)計師設(shè)計各有差異：

文字元素：設(shè)計師負責(zé)文字字體字號位置等元素的設(shè)計，文案內(nèi)容一般由策劃給出;

圖片元素：設(shè)計師主要負責(zé)位置、大小比例的設(shè)計，一般上線后圖片由第三方或者用戶上傳;

圖標元素：設(shè)計師根據(jù)產(chǎn)品屬性和流行趨勢進行設(shè)計;

色塊元素：設(shè)計師根據(jù)產(chǎn)品屬性和用戶群體特性進行設(shè)計;

綜上可見圖片元素的設(shè)計主要為位置和圖片的比例，那么圖片在APP設(shè)計過程中到底有哪些常用比例呢?都是那些原因引起的呢?

APP界面中圖像常用比例為1:1、3:4、3:2、16:9，其主要原因基于用戶場景和上傳來源。

1:1的圖像最為規(guī)整，能夠最大程度突出主體，適配性非常強，能夠在不同分辨率手機中完整顯示

目的：具有信息化表達完整，便于排版布局規(guī)整化，適配簡易化的特點;

應(yīng)用：多用于電商平臺商品展示和商品列表，例如TB TM JD等。

3:4的圖像多用于手機拍攝的圖像比例，隨著手機的普及越來越多的用戶習(xí)慣使用手機拍照，因此很多C2C的APP中需要用戶上傳模塊的圖像比例一般設(shè)計為4:3。

應(yīng)用：圖片來源基于平臺用戶的上傳模塊，例如咸魚、58同城等等

3:2主要是照相機輸出的圖像比例，這種圖像產(chǎn)生成本較手機高一些，需要有專業(yè)的設(shè)備和一定的攝影技術(shù)，因此出現(xiàn)頻率比較低;

應(yīng)用：生產(chǎn)內(nèi)容的用戶需要移動的攝影技術(shù)，例如：馬蜂窩和愛彼迎等等。

16:9是視頻播放的常見比例，因此在APP中有視頻展示的圖像設(shè)計多采用此比例。

了解了圖像比例在APP中的設(shè)計核心，接下來我們一起探討一下圖像元素在APP中的排版應(yīng)用。在APP中常見的圖像元素排版主要為單列式、兩列式和橫向圖文排布式，那這些排版布局方式在什么時候使用呢?

單列式排版在APP視覺設(shè)計中多用于產(chǎn)品圖或者焦點圖權(quán)重較高的排版形式，這是基于圖像單列排布則會放大圖像細節(jié)，因此對于圖像要求比較嚴格;

這種排版優(yōu)點：吸引用戶，圖像清晰有細節(jié)，便于展示;

但是也存在缺點：屏幕占比很大，一屏幕只能展示2張左右圖像，同時圖像細節(jié)被放大就需要有專門的審核部門進行篩選，加大了圖像生產(chǎn)的難度;

例如一些旅游類APP和設(shè)計素材類APP。

兩列式圖像排版樣式多用于產(chǎn)品列表展示

優(yōu)勢主要為想多于單列展示一屏幕能展示更多的內(nèi)容，便于用戶瀏覽，同時也能滿足更多不同用戶的差異化選擇

劣勢就是產(chǎn)品圖像在一屏幕內(nèi)展示過多，用戶在活動瀏覽過程中產(chǎn)品展示不突出

多用于各類產(chǎn)品列表的界面設(shè)計展示，例如：淘寶天貓唯品會等等。

最后聊一下關(guān)于圖文結(jié)合的排版，當(dāng)圖片和文字在一起排版布局時，如果是單列，則多用于分享展示設(shè)計，例如微信的朋友圈，文字在上圖片在下方;如果是兩列，則多用于產(chǎn)品介紹，上圖下文;當(dāng)然再有就是左圖右文，這種排版方式多用于展示圖像內(nèi)容，用戶瀏覽習(xí)慣為由左向右，所以當(dāng)圖像放在左側(cè)時一般為產(chǎn)品介紹;如果是左文右圖多用于資訊類的產(chǎn)品排版，往往圖像是用來裝飾吸引用戶的，圖像與文案介紹關(guān)聯(lián)性可能不太大，甚至有誤導(dǎo)用戶的嫌疑。

總結(jié)

綜上所述同大家分享了一些關(guān)于圖片在APP中的應(yīng)用，接下來我們來回顧一下：

1、APP中設(shè)計元素 ：圖片、文字、色塊、圖標

2、APP中圖像元素比例：1:1、3:2、4:3、16:9

3、APP中圖片的排版布局：單列式、兩列式、圖文混排式

設(shè)計師了解了設(shè)計元素，明確了圖像比例來源是基于用戶上傳和應(yīng)用場景，再懂得了基本的排版方式，那么一般的APP中圖文排版設(shè)計應(yīng)該手到擒來了吧!這個套路，你GET到了嗎?

學(xué)設(shè)計，來黑馬!設(shè)計改變生活!

猜你喜歡：

UI設(shè)計之色彩的心理效應(yīng)

ui設(shè)計是什么?UI設(shè)計行業(yè)前景怎么樣?

UI設(shè)計原則：匯總深入人心的UI設(shè)計原則

黑馬程序員全鏈路UI/UI設(shè)計課程