請問這兩張圖片設計出現的問題有哪些？

12-17

這是一個APP引導頁圖片，請問你覺得它的設計問題出在哪裡？

- 以下內容多圖，手機用戶慎入 -

聲明：
1. 本答案旨在傳授漁之技巧，而非直接展示魚之全貌，美學鑒賞語言潔癖咬文嚼字黨慎入；
2. 由於不了解此APP用戶受眾等相關信息，因此某些內容不一定準確，請帶有針對性和批判性的理解閱讀。

先從第一張圖開始說起。

早前，我給學生們布置過這樣一個作業。給賓士汽車做一本100周年的品牌回顧畫冊。然後，讓學生們自己思考一段時間，再來用口述的方式來告訴我，他們會怎麼做。當然，這個問題，在看此答案的朋友們也可以自己來思考一下。

所有回答在封面上放車的，我都否定了。來，聽我給出的結論。

首先，這是一個大而全的品牌回顧畫冊，並非某單一產品的畫冊。

其次，放車，放任何過於具象的物品，都容易使得受眾群體的思維被引導與影響。你如果要做嬰兒用品，你是在封面放上母嬰的親子照，還是丟上一大堆洗髮水，尿不濕，爽身粉？

最後，過於具象的物品，會使人們對內容失去神秘感，更何況單一化的產品根本無法充分的反應內部主題。你難道要把100年來賓士的所有款式都放上去嗎？還是舉例子來說，你做個港式茶餐廳的菜單，封面你是放奶茶呢，還是干炒牛河呢？發現沒有，放什麼都不對啊！

好的，回到之前我提出的問題。

做賓士的畫冊，100周年的。如果我來做，我會在封面放什麼？我會做人類道路發展變遷，從小石子路到現在的縱橫交通，再配上賓士的logo。

回到上面這張圖。

我對以上這張圖的第一個評價就是，出現了過於具象化的人物、衣著。這些具象化的內容很容易影響人的情緒和喜好。觀看者看到之後的心理反應會是：這是一個講搭配的app，可是為什麼出現的人物穿著都這麼普通這麼low呢？哦。都是年輕化風格的啊，這完全不是我的風格啊......，等等，以上。

再來結合以上我說的，如果我來做，我會拿什麼當背景？

或者

你問這兩張圖的問題有哪些。

粗糙。是的，整體粗糙，細節缺失是我對這兩張圖的第二評價。

配色，字體，符號，裝飾元素，幾乎所有這些出現在畫面中的東西沒一個是精緻的。全部都很粗糙。

分享一點個人的經驗：
1. 不要做你不擅長，且無法掌控的事情。
2. 不懂色彩就去模仿，不是自己亂配。模仿什麼？什麼顏色配什麼顏色，每個顏色的面積多少...... 3. 學會用虛線和實線搭配； 4. 細線與粗線結合起來用； 5. 學會用圓角； 6. 在文字對齊這些細節上要當一個處女座；

我花了十分鐘，按我自己理解做了一次，當然，肯定是不完美的。但是，起碼我知道，我不會用色，那我就不用色咯！

有關設計方面的槽點其實很多，不多作重複描述。

接下來，我再說一點很多人特別容易忽視的細節。

關於文字內容的組織。

我是實用至上的實用主義者，十幾年的廣告行業從業經驗，再加上現在天貓電商這一塊的業務。消費者喜歡看什麼，願意看什麼，會看什麼，我太清楚了。

都知道現在的用戶不喜歡閱讀打斷文字，那麼問你：與一群愛搭配的人一起交流。這樣類似繞口令的文字，你覺得真的好嗎？

在仙蒂瑞拉的產品詳情頁設計過程中，我總結出了這樣一個經驗，也在此分享給各位。

1. 一段話不要加上過多的修飾詞； 2. 多讀幾遍，盡量做減法； 3. 盡量使一段話描述一個內容。

結合以上我說的三點，咱們來看看你頁面中的這段文字。

內容繞口，字體粗糙。我把內容來按照我的方式修改了一下。

你自己感覺一下哪個更方便閱讀？好設計師真的不是只會弄圖形和色彩的。

為便於查看，所有答案都在個人收藏夾內（ ENO［觀點與成長］ENO［美學與穿搭］），希望幫到需要的人。

答案如需轉載，請務必標註出處。

瀉藥
首先是色彩搭配的問題。
整體的色彩搭配過於生硬，跳的太厲害了。第一張在整體偏暗的深藍色背景下，加上灰色的圖片和各種高飽和度的色彩標籤，看起來非常不和諧。
第二張也是，但是第二張色彩的問題要稍微小一點，因為顏色沒那麼多了。。。或者說，第二張主要的問題在於你的比例，背景是兩種顏色的結合，首先你的曲線明顯是用鋼筆隨便畫的，比例是1:1，沒有仔細考慮過。。。

背景淺色部分的比例太大，就導致了喧賓奪主的情況出現，背景應該就是背景，現在好像也成為了主體。。。

再說回第一張，其實第一張問題很多，更多的是出在設計上。首先圖片不應該用這種處理方式，用這種圖片處理方式，你就不應該把它當做主體斜過來。
你把一張照片減小亮度，是為了讓它作為背景，而你把照片斜過來卻又把它作為主體對象了。

至於其他的，改變字體不改變大小還不對齊，元素對齊規則混亂之類的，我就不多說了。

還是說一下標題字體把。。。那個字體變了明顯是想強調「發現」，但只是字體改了卻沒有其他改變，導致強調的意思沒有，反而讓觀感下去了。。。

問題如下：

1. 信息架構沒有梳理清晰。「身形相似的人」、「開放衣櫥」、「服裝搭配師」這明明是三個信息，為什麼放在同一頁面？
2. 字體不一致，而且不好看；
3. 文字信息過多，用戶獲取信息成本上升；
4. 背景圖、配色、組件比例、字型大小都有問題。

「身形相似的人」、「開放衣櫥」、「服裝搭配師」、「一起交流」這是四個信息，如果你們已經確定引導畫面要控制在三頁，那就要捨去一個，具體哪個，你們自己去衡量。

App 的引導畫面，並不是要把所有的功能都掏給用戶預覽一遍，一定要有取捨。你們的市場定位、目標用戶，決定了你們這個 App 的 GUI 風格以及核心功能，那麼引導畫面就應該圍繞核心功能一級一級的展開。

比如你們的核心功能是搭配，其次是社交（身形相似的人、一起交流），那麼「開放衣櫥」就完全可以捨去。（我真心搞不懂你們這個「開放衣櫥」是什麼鬼，是相互能看見對方的虛擬衣櫥？）

那麼現在就剩：「身形相似的人」、「服裝搭配師」、「一起交流」，然後在作一個前後順序的安排：「服裝搭配師」、「身形相似的人」、「一起交流」。

廣告：最近在做一個教程【 App 原型製作視頻教程（ Keynote 版）】
這套教程多是面向創業者或是想入門產品經理的朋友，教學內容非常的系統，從全局到局部一步步推進講解，即使完全不懂 App 的你，也能輕鬆地看下去，且知道個所以然。

一般傾斜是為了動感打破呆板的感覺，這個傾斜完全無意義，字的單元形也是（字體都不是統一的搞毛線），豪無引導性

謝好幾個人邀我回答這問題……
其實這種問題，不同的人會給你不同的答案，比如現在已經有了答案說綠底白字看著難受
估計還會有人說你這圖太斜了叫你正過來，可能還會有人說你字體用的有問題，襯線非襯線一起用
每個人都會看到讓自己不爽的點，而恰好的是你這兩張圖處處都有可吐槽的地方，你得到的答案將會是所有的點都被吐槽，然後每個人根據自己的偏好給出自己的建議。

簡單點說就是：這設計不及格

——————————————————————————
謝 @eno在知乎再次邀請
項目比較忙，找了一點時間做了張圖，素材圖標字體都沒有深入考究，僅供參考

首先，這個設計還沒有資本談什麼風格。完完全全不合格，和我的渣作有的一拼了=，=

1 配色問題不說，大家都懂，特別特別的過時和無序。
關於配色有很多很多的理論，這些理論是為了營造出符合你自身產品風格的的環境。值得注意的是，近十年，尤其是在電子產品領域，人們對設計的審美已經發生了翻天覆地的改變，所以也許有些配色你能在一些過時的地方看到，然而並不好。

這個配色完全是沒有學習過色彩理論的人做的搭配，或者說完全沒有認真思考過自身作品的色彩理論的人做出的搭配。色相、明度、純度的選擇都渣哭了。

讓我們來問問：
紅綠藍的搭配你想讓人們有什麼樣的感覺？動感？豐富？還是雜亂？
高純度的色彩，你是否了解它能造成的影響？

當然，過分追求優雅這類風格是沒必要的，這是要看你產品的用戶的。如果是農村大媽，他們也不會認同優雅的風格，但是對色彩理論了解不清楚、不進行思考是任何用戶都不會喜歡的。

2 像上面人說的，排版不好。
設計需要十分十分注意細節，哪怕一個小細節的改動都可能影響你作品給人的觀感。對齊不一致之類的頻頻發生，這已經是態度問題了吧！

很多人提及那個發現更多發現的字體問題，但是字體不一致也不是不可以，但是要十分注意大小、對齊、色彩、還有字體風格的差異。這句話無論大小還是對齊都很渣，字體變化不明顯但還是能讓人看出來，所以人們不會覺得你兩個發現有什麼明顯差別，只會覺得彆扭，真特么彆扭

3 信息雜亂也說了
作為設計師，尤其是UI，一個很重要的要求就是思考脈絡十分十分清晰。

還有文案，一定要考慮人的接受程度。很顯然，這個文案實在是太裝b了，沒有多大意義。

4 圖形雜亂
設計中的所有圖形，都是要仔細考慮可能帶來的視覺方面的影響的。這個圖形設計，考慮過比例帶來的影響么？考慮過不同圖形的視覺感受么？考慮過方圓組合方式和順序給人的的引導么？你一眼看這個設計的圖形，你能說清楚么？斜向的圖形自然會讓人產生斜向的視覺力，結果就那麼割了一刀然後沒了？！！

5 細節差
UI設計，他們招應屆生，都是要求具有像素級的細緻度的！第二幅圖顏色有模糊的地方，第一幅圖字體清晰度不一致，這都是細節。

還有一個細節，不是一個圖切完了就那麼直直白白放著就行的。你要考慮合適的邊框、過渡，不然就會突兀。

隨手放個圖標，你感受下差異吧。設計不只是拼審美。沒有審美的時候，了解設計方法和理論、積累經驗很重要。這種沒有思考、小孩子過家家級別、做的還特別粗糙的東西，還是不要往外放了，丟人。

補充一點顏色搭配的問題。
這種原色搭配。成功案例是Google啊。
首先色彩明度要統一。

我只感受到了第二張圖屎一樣的配色，摺疊我吧。

這配色有一種城鄉結合部激情夜聊的即視感

謝邀！

我也是新人，下面是我的個人感受：

第一張圖：

---1---
顏色比較豐富，可以適當減少，定一個主題顏色之後，參考一下網站上面的色彩搭配，我一般不超出三個顏色
你可以到這個網站多看看色彩的搭配配色網-致力色彩搭配方案的交流與學習

---2---
第一張圖上下比重失衡，可以把圖片往上挪平衡一下

---3---
發現更多的「發現」最後兩個字，重新處理：
1.用差別比較大的字體
2.同個字體換對比的顏色
3，修飾，比如透明度，線條

對於可以多看看排版設計的作品，多看多學習
歡迎訪問祝快樂板式這一欄，第一行都是字體排版的作品搜索，可以多看看

---4---
紅黃綠三個小圓點指向不明確

---5---
身形相似的人這部分，背景色跟字體顏色對比沒拉開，看著刺眼

---6---
圖片跟文案混在一起，焦點不夠，一般我是這樣：圖案為主，文案輔助說明，文字是修飾，所以應該放在次要的位置上

---7---

身形相似的人，開放衣櫥，服裝搭配師

這三個的排序要結合圖片重新調整一下，另外這三段文案，我個人感覺，相互之間沒有太多的聯繫，比較零散，一般如果三個文案是屬於平級關係的，我會單獨改成三個單獨的頁面，如果要放在一起，最好是三個文案之間有一個遞增的關係在裡面，就好比寫文章：開頭，經過，結尾

第二張圖：

---1---
出現了兩個「一起交流」，反而淡化了想要強調的「一起交流」這個功能，刪掉第一個「一起交流」，然後通過字體大小跟顏色的調整，強調一下就可以了，勁兒往一處使，直截了當。

---2---
三個小圓放一起形象化交流，不錯啊，可是背景的大波浪跟顏色搶鏡了

另外整個頁面的顏色需要重新搭配

個人感受，歡迎指正，一起進步

祝好！

只說第一張！

點線面是這樣用的，不是隨便點個點拉條線就行，你得讓人知道這樣做的用意什麼！做設計跟寫書一樣，你得讓人知道說的是什麼啊！打一堆字上去不叫寫作～～

半專業手殘黨不請自來。。。僅代表個人觀點
第一張：字體字型大小不統一、下面原點和豎線的間距位置不統一、方框的圓角直角不統一
第二張：「一起交流」和「與一群愛搭配的人一起交流」中的「一起交流」重複、下面三個圓圈距離不等、配色也不太對

顏色搭配的實在不得要領。我大概猜到app的定位了，顏色要輕快明亮，最好是粉紅梅紅色系（20-35的女性，嫩熟都要有），如果覺得俗，也可以乾淨一點的藍紫。
然後標籤的布局彆扭…
以及文字說得不明不白像猜謎…這是引導哦。
大概這樣

沒有相關經驗只是從受眾角度來說
這個APP的用戶肯定是有一部分女生，而且是有提升自我外型需求的女生。

APP這個圖選的，明顯是直男偏好的圖。一眼掃過去以為是什麼「交友」APP呢，大部分小公舉們不會喜歡噠。

第一張圖：
1.字體搭配有問題。
楷體更適合古意一些的風格。
涉及到服裝搭配這樣涉及時尚與潮流的主題，服裝本身要的是氣場、型款、外形的流線感，字體選用無襯線會更適合，會有簡潔的線條美感。
同一行字里，不提倡混搭字體。因為非常容易顯得混亂。
尤其幼圓和楷體一軟一硬放在一起，委實違和。
2.排版不嚴謹。
最上面的「發現更多的發現」，看樣子打算放居中，然而細看，虛線框與背景圖的左右兩側邊距是不一樣的。

-
同樣的問題還出現在這裡，

紅色圓點沒有與直線居中對齊，黃色圓點與直線的距離、綠色圓點與直線的距離也不一樣。
另外還有很多小細節沒注意，就不一一列舉了。
這些小細節匯聚起來就會顯得頁面非常粗糙。排版細節要注意。

3.圖片素材的選擇
圖片跟背景不融合。雖然你調得很暗，但這隻讓圖片變得暗沉，對兩者的結合併沒有幫助。要麼摳圖，去掉白底背景，背景換底色+搭配素材；要麼把圖片滿版。
目前來說，這個頁面顯得很灰暗，沒有細節，這是你選擇的背景顏色和對圖片的處理導致的。
圖片的位置也略偏下，畫面有下墜感，不舒服。
4.配色
選擇的顏色都太灰了。飽和度和明度什麼的也不協調。放在一起很不搭調。建議上網找配色方案做參考。

第二張圖：
1.字體搭配有問題
盡量不要把無襯線字體和襯線字體放在一起。容易不搭。
2.配色
不好看。換。背景那個靛藍色實在是難看，灰沉沉又髒兮兮。
3.內容
背景缺乏細節。偏長的頁面，放3個圓形重合在中間，這樣的排版也不好看。上下太空了。建議把圓形分散開來或者直接推翻換別的構圖。

建議好好學一下版式設計、字體、色彩搭配。
沒時間寫了先這樣。

那個「發現更多的發現」是想表達啥？

第一個，我沒有明白這個頁面什麼意思，什麼產品有什麼用處。文字不準確吧。
第二個，明白了，只是覺得比較單調不吸引人。

請告訴我你是怎麼挑選配色的。

顏色用的是隨機選取么？

說白了，沒有採用矢量插畫風格