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

前言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

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

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

3、APP中圖片的排版布局：?jiǎn)瘟惺?、兩列式、圖文混排式

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

學(xué)設(shè)計(jì)，來(lái)黑馬!設(shè)計(jì)改變生活!

猜你喜歡：

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

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

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

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