02 facebook圖標設計理念(為什么網頁中的圖標常用16px,24px,32px 這些尺寸)

时间:2024-06-02 01:16:44 编辑: 来源:

風格的象征,也是一種穿搭風格的代名詞。

ins風色調飽和度低,整體風格多偏向復古冷調或者清新干凈,看到ins上面的濾鏡大多都是這樣的效果,色彩飽和度調低/對比度調低/調低色溫/增加曝光度,加上一個適宜的濾鏡,ins風照片就出來了。

在服裝搭配上,ins風格的色系變化也是很大的,亮色系和混搭是一大亮點,全黑色的時候可以帥氣,但一身彩色一樣也能讓人感覺很高級。

擴展資料:

Ins即Instagram(照片墻),是一款運行在移動端上的社交應用,以一種快速、美妙和有趣的方式將你隨時抓拍下的圖片彼此分享。

說到底ins風代表的是一種生活方式,它主要靠的是軟裝來進行裝飾裝扮,所以說只要懂得利用生活中的美物來裝點家居空間,生活的幸福感立刻就會提升哦。

面試時被問到設計思路應該怎么答

1. 我對產品有一定的了解

在做任何設計之前,你都需要對這個產品有一定的了解,這是一個大前提。

我會告訴面試官,這是一個什么樣子的產品,他的背景是什么,他的調性是什么,品牌理念是什么,最后得出我的總體視覺風格是怎樣的。

比如拿這兩個頁面來說,這是一款針對白領的即時通訊工具,產品定義是“給白領使用的高效便捷的即時通訊工具”。

而作為白領的你,其實你是有一點小追求、小逼格的,所以簡單來說,我們的品牌調性及視覺風格就是簡潔高效、時尚、有逼格。

2. 我是一個對流行趨勢敏感的人

這里開始就要談視覺了,首先你要和面試官強調,你是一個緊跟流行趨勢的設計師,對于IM頁面的改版,你尋找了很多國內外優秀的競品,對它們進行分享與總結,如Facebook的Messenger、國際版QQ、Snapchat等等,截圖如下:

最后經過你的總結,得出對于本次設計有幫助的流行趨勢有:

無線化分隔

簡化“對話氣泡”樣式

聊天界面底部,直接將高頻操作展示出來

有了這些參考做為基礎,再結合自己產品的品牌調性,你就可以具體去執行了。

3. 我是這樣展現自己設計能力的

這里就是最重要的部分了,除了參考國內外的流行趨勢以外,你是如何展現自己獨特的創意與視覺表現力呢?

大家都知道,界面設計主要包括圖標、配色和排版樣式,你可以從這三個方面來闡述你的視覺表現力。

3·1 圖標

圖標采用了斷點、雙色的視覺風格,雖然圖標風格有所參考,但是對于輸入框部分使用這樣風格的圖標,也算是我的一次大膽嘗試,算是本次設計的一個亮點,如下圖:

至于這套圖標如何制作的,還有它是如何與品牌產生聯系的?如果講起來可能又是2000字。

不過偷偷的告訴你,我管這套圖標的制作方法叫做“品牌基因法”,如果你想知道這套方法就在下方留言吧,人數多的話,下期就分享出來。

3.2 關于配色

頭部導航欄的顏色,原版的深色過于壓抑,不符合整體輕松愉悅的產品定位和視覺風格。所以我決定將深藍色變成白色,使整個頁面看起來更加簡潔、清爽。

繼續看上圖,對話氣泡采用漸變藍色,使顏色更加通透,同時雙方氣泡顏色對比更加強烈,增加視覺上的耐看度,并且使用戶更易區分哪些信息是自己發的,哪些是對方發的。

3.3 排版樣式

在板式上本次重設計我有兩個原則:簡潔與突破。

簡潔體現在“無線化分割”、對話氣泡框去掉小尖角、聊天時隱藏自己的頭像等等。如圖:

突破體現在,“我的”頁面頭像后面那一條斜切線,這種板式,我最早是在雅虎新聞上看到的,當時就感覺十分特別,去年在國內app(例如搜狐視頻)“我的”模塊也見到了這樣的切割方式,所以我也大膽的將其運用到這次設計稿里,還有就是面性的返回箭頭,也算是一個創新點。如圖:

4. 我對用戶體驗也有一些改進

這里是個加分項,作為一名視覺設計師,如果你除了思考視覺上的問題以外,再能想想體驗方面的改進,那就證明你不止是一個“美工”,而是一個有思想的設計師。

在這兩個頁面里,主要對用戶體驗的改進就是“聊天界面底部,將高頻操作提取出來,節省用戶時間,也符合目前業內聊天輸入框的交互流行趨勢。

移動端UI/UX設計必知的設計要點

你手頭是否有正在設計的APP項目?有沒有系統的設計計劃?你是直接動手設計,還是會中途停下來研究一下終端用戶的真實需求?你是否知道用戶打開APP第一眼到底更希望看到什么?

在考慮運用哪些用戶體驗相關技術的時候,它們的美學特征可能是相當值得我們深思的。目前我們所看到的許多網站上所使用的設計理念和技巧,其實也可以很好地投入到APP設計中,只不過細節和樣式可能需要稍作調整,以適配更小的、高清的屏幕。對于熟知桌面端UI設計的設計師而言,接下來的7個設計要點能幫你快速轉向移動端設計,讓你看起來像是專業的移動端UI/UX設計師。

更簡單的字體排版在小屏幕上具有更強的易讀性,尤其是在光線較暗或者逆光的情況下,這也是推動非襯線字體在移動端上廣泛運用的重要原因之一。

幾年前,隨著設計趨勢的大幅轉變,設計師們更加傾向于選取筆畫更加厚重、風格更加大膽的字體類型。此外,字體的尺寸也很重要。越來越多的移動端首頁設計開始借用尺寸超大、極具表現力的字體,營造出前景和背景的明顯對比,打造炫目的效果,以便于用戶瀏覽、導航。

這種趨勢的優勢在于,大家開始更加注重于界面內容的可讀性。不過在英文界面中,有一個問題需要注意,就是要盡量克制地使用大寫字母。以 The Weather Channel 為例,“SUNNY”這個詞只有5個字母也就算了,但是如果去是其他的天氣所用字母數量較多,視覺上可能會相當的累贅。在中文的字體設計中也要盡量避免文案過長、過于復雜的問題。

所以,此處應當注意兩件事:

·排版和內容應當盡量保持簡單

·背景和文字的對比度應當盡量明顯,保持最大可讀性

Material Design 作為當前最重要的設計趨勢而言,已經被反復強調和提及了,這并不是沒有道理的。

首先,它是Google 所推出的設計平臺,作為一個實力型巨頭推出的產品,無疑會吸引大量的相關從業者跟進,并且目前狀況就是這樣。Material Design 本身的設計理念也相當的直觀易懂,不論是用來設計還是對于用戶而言,都相當的不錯。

Material design 最引人矚目的地方在于,其中的圖層創建對于用戶使用和交互設計都有極大的幫助。今天,Material design 風格的界面已經遍地開花,許多iOS平臺的應用都開始遵循這一設計規范。

真正讓這些圖層發揮作用的技巧非常的微妙。圖層之間的區分靠的是曾經“被大家所嫌棄”的陰影,它們非常淺但是很自然,同時它們還是視覺和交互的線索。最下面的圖層是信息的入口,而頂層的圖層則是交互的工具和元素。

看看Uber的設計,地圖圖層位于整個屏幕的最下層,通過移動底部圖層來設定上車位置,頂層的按鈕則用來下單,不同的層承擔著不同的功用,提供不同的交互方式。

在小屏幕上使用最純粹的黑白配色是吸引用戶注意力的好辦法。此外,還可以使用相對少見、大膽的配色,這樣也容易脫穎而出。又或者使用添加其他的配色方案讓用戶選擇他們自己喜歡的配色方案。

單色配色方案的好處在于更容易營造一致、統一的視覺體驗和感覺。正如同 Streeks 這款應用的設計,用戶可以設定目標,然后APP會提醒你完成任務。用戶可以基于任務類型來設定色彩,并且推送簡單的信息來告知你需要完成的事情。

那些足夠優秀的APP當中,通常都會包含著許多順滑無縫的優秀微交互,來溝通不同的界面、動作和交互。微交互通常會很容易被忽略,但是在許多APP當中,他們會作為必須的過渡、交互引導和效果提示而存在,所以相當的重要。

微交互的存在,主要還是幫助用戶完成一些事情。從文本消息通知、消息推送到微博上點贊的提示,近乎無處不在。它們還有一個主要的功能:取悅用戶。

微交互的主要功能可以這樣總結:

·提供信息反饋,比如在Instagram 中點贊之后出現的提示特效

·呈現動作,比如點贊之后心形會從透明鏤空變為紅色

·幫助用戶操作或者發現某些東西的存在,比如點贊之后,會有推送信息出現在通知欄,或者彈出框直接告知

卡片式設計最早見于Pinterest ,隨后在Facebook、SoundCloud等網站上流行開來,成為了真正意義上的主流設計。不過今天的卡片式設計很大程度上受到了Material Design 的影響。

不論是對于設計還是對于開發而言,卡片都是大量內容的可靠載體。每個卡片都可以承載不同的元素,作為不同的模塊,實現不同的功能。

所以,你可以讓一個卡片播放視頻,緊接著的卡片則鏈接到另外一個應用,而下方的卡片則直接放置了一段長長的文字。卡片式設計在移動端上的另外一個優勢就是非常的易用,尤其是在有APP之內。絕大多數的應用會在一個屏幕內承載兩個卡片,就像 SoundCloud 這樣,又或者一屏就是一個卡片,這樣一來,即使用戶的手指再粗也不會錯過任何內容!

隱藏式菜單、彈出式導航和大按鈕是不容忽視的設計要點。如今APP首屏使用的菜單數量正在逐步減少,寸土寸金的APP首頁上不再放置大量的菜單按鈕,隨之而來的是隱藏式菜單的流行。

Slack 絕對是導航菜單設計中的典范,它的菜單可以從屏幕的左右兩邊彈出顯示,而主要功能菜單是從右側彈出的,而特定頻道的菜單則是從左側彈出。

有趣而漂亮的動畫,是讓你的應用令人感覺非同凡響的另一手段。合理的動畫能提高應用的易用性,能讓用戶更容易注意到重點,甚至能更加直接的給他們帶來快樂。

你無法確知用戶將在何時何地訪問你的應用,更無法確知用戶使用的是哪種網絡連接,所以使用體積小、輕量級、不依賴于網絡的動畫是非常有必要的。

Strava 就是這樣一個包含了大量有趣的小動畫的應用,其中許多有趣的動畫小到你可能會一不小心忽略掉。不同界面之間的切換會有有趣的過渡動效,比如上面的挑戰頁面就是。加載地圖的時候會有一個脈沖特效,當你運動的時候,會看到沿著運動路徑變幻的小點。

當你打算讓你的移動端APP不再停留于構思的時候,不妨先看看當前網頁和數字設計都有哪些設計趨勢,看看它們當中有哪些可以通過調整可以運用到移動端設計上來。許多意想不到的小點子,可能會成就一個非常了不得的設計趨勢。

designshack

譯文地址:優設

作者:Carrie Cousins

優設譯者:@陳子木

搜索关键词: