亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

前言

面對線上的產(chǎn)品越來越多,逐漸產(chǎn)生了很多同質(zhì)化界面.以及基礎(chǔ)布局上的雷同.解決和了解設(shè)計中的同質(zhì)化問題,是我們每一個設(shè)計師需要具備的能力.大聲的說出來,我們不是執(zhí)行層面的美工.下面文章和嘗試是我們進行初次的探索.成長中的初次嘗試.一起加油!

學(xué)而思網(wǎng)校是一款教育學(xué)習(xí)類應(yīng)用，滿足了家長為孩子選購在線課程、孩子在線學(xué)習(xí)課程、寫作業(yè)、并與教師交流反饋的需求，亮點是大量優(yōu)質(zhì)師資和線上課程，通過直播授課的形式完成教學(xué)針對本產(chǎn)品的上課形態(tài),用戶-產(chǎn)品對使用、教師對產(chǎn)品對使用以及運行團隊對整體使用和配合上.進行基本的流程構(gòu)建針對我們產(chǎn)品的大眾用戶。

站在用戶的角度幫助用戶思考問題.合理的幫助用戶解決 他需要的問題；我們對不同對人員和產(chǎn)品需要進行一個調(diào)研和走查。

本次分析選擇了作業(yè)幫、猿輔導(dǎo)和有道精品課作為主要競品，選擇標(biāo)準(zhǔn)如下:

(1)應(yīng)用市場排列靠前，體量較大，用戶有主動安裝的意愿

(2)發(fā)展較為迅速的，獲得市場認(rèn)可的產(chǎn)品，如作業(yè)幫、猿輔導(dǎo)

觀察完線上的產(chǎn)品 我們對目前對產(chǎn)品進行一定同質(zhì)化的分析與探討從功能布局 視覺特征同質(zhì)化 功能相似的三個模塊進行分析與探討。

2020 年流行的 6 大設(shè)計趨勢，這些設(shè)計趨勢也是伴隨著外在關(guān)系一起存在的。比如 5G 來了，那么自然視頻領(lǐng)域肯定是未來值得期待，這就是為什么微信公眾號都開始流行小視頻也是一個原因。硬件升級自然能支持更多的設(shè)計元素融入產(chǎn)品里面。

2.1留白設(shè)計

今年下半年觀察到 Facebook 旗下的 Messenger 應(yīng)用和前段時間雅虎更新他們家品牌語言的同時，也重新設(shè)計他們家所有產(chǎn)品。我們可以看到如下應(yīng)用截圖，基本去分割線，通過留白區(qū)分層級。這樣的好處可以減少分割線對內(nèi)容的干擾，界面呼吸感增強，達到簡約設(shè)計的目的。

2.2蘋果設(shè)計風(fēng)格

蘋果風(fēng)一直盛行至今天，包括大圓角卡片設(shè)計、大標(biāo)題、粗字體。蘋果今年剛剛更新的 10513 設(shè)計語言同樣的是增強了卡片設(shè)計。這種風(fēng)格將會在 2020 年繼續(xù)盛行，因此作為設(shè)計師我們更應(yīng)該提前去對這種趨勢熟練掌握?？ㄆO(shè)計作為承載內(nèi)容的容器，其實更適用今天移動互聯(lián)網(wǎng)的大方向，因為卡片可以作為一個容器封裝復(fù)雜的內(nèi)容，使得模塊層級區(qū)分明顯，適配性也是更強，更聚焦，來看下具體案例。

2.3 品牌滲透

為什么要說品牌滲透?Google 在系統(tǒng)設(shè)計語言里面增加圖形特征模塊，是什么？就是通過連接品牌元素到產(chǎn)品設(shè)計中。

到今天很多應(yīng)用已經(jīng)開始熟練掌握這種設(shè)計思路了，比如運用到圖標(biāo)里面或者界面設(shè)計中。蘋果雖然沒有很明確公開說明，但是我們可以從蘋果家族設(shè)計語言可以看出，包括線下體驗店、手機硬件、包裝盒以及各種各種物料設(shè)計，都是一種白色語言設(shè)計風(fēng)格。通過顏色與圖形特征做品牌區(qū)分，蘋果算是目前做的最好的，史無前例。那么這種趨勢在 2020 將會一直保持。

2.4 網(wǎng)格化布局

網(wǎng)格化是一切設(shè)計系統(tǒng)的基礎(chǔ)，Materials Design,Apple Design,IBM Design,Naver Design,等等這幾家在設(shè)計語言基礎(chǔ)上對網(wǎng)格研究與應(yīng)用算是比較成熟的，Naver方形網(wǎng)格，Google的8px網(wǎng)格，IBM 2PX網(wǎng)格，蘋果其實沒有很強調(diào)他們家網(wǎng)格系數(shù)，其實我們可以細(xì)看他們的設(shè)計規(guī)范，已經(jīng)提到8px Grid。因此網(wǎng)格化布局在2020將是非常重要的一個工具。

2.5 微動效

5G時代已經(jīng)到來，加上目前硬件升級，動效的普及已經(jīng)不再是難題。我們可以慢慢發(fā)現(xiàn)目前很多產(chǎn)品設(shè)計里面都開始加入動效，來提升產(chǎn)品體驗，同時動效也有很強的指導(dǎo)性質(zhì)。

在某些場景下，使用動效能夠很好與用戶進行互動交流，因此在2020年動效的使用將會越來越多。

2.6 包豪斯風(fēng)格圖形

幾何圖形設(shè)計是目前運用最多一個設(shè)計手法，今年發(fā)現(xiàn)一些比較抽象藝術(shù)化包豪斯風(fēng)格幾何圖形，在UI設(shè)計中大量運用，且效果還不錯。

這種圖形帶來好處就是記憶性強，應(yīng)用廣，它不僅可以拓展在品牌包裝，品牌圖形延展，還可以運用在UI設(shè)計中。

界面的同質(zhì)化導(dǎo)致產(chǎn)品很難在眾多競品中脫穎而出。因此我們嘗試從產(chǎn)品維度、用戶體驗維度及視覺維度三個方向進行走查，研究國內(nèi)外產(chǎn)品邏輯，打破同質(zhì)化走向，從而對學(xué)而思個人中心界頁面進行改版。

產(chǎn)品功能既要滿足用戶需求，同時增加用戶轉(zhuǎn)化率，現(xiàn)有產(chǎn)品功能模塊較多，增加用戶使用成本，弱化非必要的模塊，優(yōu)化功能查找效率。如圖所示：

改版后的功能層級呈現(xiàn)如下圖：

對于用戶來說，簡約清晰的導(dǎo)航，能夠讓用戶快速快速找到相應(yīng)的功能，明白操作邏輯，迅速完成操作，獲得良好的用戶體驗。

在目前學(xué)而思個人中心的界面雖然板塊劃分較為清晰，但作為主要功能的續(xù)報課程功能卻不凸顯，因此我們選擇將主要功能的內(nèi)容凸顯出來，用戶不必進入二級界面進行查看，簡化了操作步驟。

3.3視覺維度

在視覺維度上，品牌化的概念是實現(xiàn)差異化的有效途徑，例如MUJI的簡約設(shè)計、蘋果的大標(biāo)題、卡片長投影設(shè)計，都讓人印象深刻，形成品牌意識。在本次學(xué)而思個人中心界面的改版上，我們在頁面的眾多細(xì)節(jié)中融入了品牌IP形象，如默認(rèn)頭像、TAB圖標(biāo)、運營位插畫等等。

4.1主色調(diào)定義

學(xué)而思本身的品牌色調(diào)是紅色，在APP中的色值飽和度和明度都較高。雖然能很好的強化品牌意識，但紅色也存在過于吸引眼球而導(dǎo)致功能信息被弱化的問題。在功能相對較多的個人中心頁面，我們嘗試重新定義頁面顏色，使用象征自然的綠色作為頁面主色調(diào)。

綠色本身是一種中性色，屬于比較中庸的顏色，夾雜黃色則比較具有暖意，夾雜藍(lán)色則偏向寒意，因此綠色的色彩性格更為平和、穩(wěn)定。同樣地，綠色是屬于大自然的顏色，通常容易讓人聯(lián)想到生命、活力、生機勃勃等情緒。學(xué)而思目標(biāo)用戶為K12群體的家長和學(xué)生群體，綠色恰恰符合這一年齡段的產(chǎn)品用戶色彩傾向。

另外，綠色能降低用戶視覺疲勞度，營造出輕松、平和的氛圍，增加閱讀的愉悅感和輕松感。

4.2輔助色和點綴色

在確定主色調(diào)后，我們還需要根據(jù)產(chǎn)品的功能模塊、排版等選擇與之搭配的輔助色，在確定綠色為主色調(diào)后，我們選擇了紅橙色作為輔助色增加畫面的色彩豐富度。

綠色+紅橙色搭配，兩者在色相環(huán)上互為對比色，視覺對比強烈，紅橙色作為輔助色在綠色為主色調(diào)都的頁面上，可以增加頁面的活躍度，給人增加活力和積極的氛圍。

另外，輔助色紅橙色的使用，也符合功能色彩屬性。

5-原型多稿試錯

舊版問題分析：視覺層次不明顯，功能不突出，查找功能耗時長，整體留白過多利用率較低。 

改版目的：提升屏幕利用率；主功能突出，提高查找效率；增加VIP卡片，提升開通會員轉(zhuǎn)化率； 

 5.2原型多稿件對比 

在原型設(shè)計階段，我們進行了三個方案的推導(dǎo)，一開始團隊就給出了豐富的原型。在根據(jù)老師的建議和團隊會議商討后，在保有“脫離同質(zhì)化”這一核心訴求的基礎(chǔ)上，從實用性和設(shè)計感出發(fā)，重新完善并設(shè)計了多款原型，最終經(jīng)討論選擇了原型三。

 原型三的特點，提升了屏幕利用率，信息層級清晰，呼吸感強，完善了結(jié)構(gòu)分化和功能布局。在圖標(biāo)和組件的趣味性和交互性上有了很大的提升，提升了用戶的參與感。

學(xué)而思的IP形象，以聰明好動的猴子為原型設(shè)計，名叫“愛豆(idol)猴”。IP形象為原本枯燥的網(wǎng)課學(xué)習(xí)增加了趣味性和品牌性，同時也擁有了更多的呈現(xiàn)可能和表現(xiàn)形式。

新版IP形象主體為綠色，綠色青春活力，體現(xiàn)了產(chǎn)品年輕向上的屬性。 

這次設(shè)計，我們給“愛豆猴”增加了一副眼鏡，增強了形象的記憶點和教育屬性。面部表情換上了更具有感染力的笑臉，增加親和力。主體顏色進行了微調(diào)，加入了漸變，增強品質(zhì)感。整體形象傳達給用戶一種充滿智慧、積極樂觀、萌動可愛、進取向上的感覺。 

7-圖標(biāo)繪制

7.1 圖標(biāo)的品牌形象融入

圖標(biāo)icon根據(jù)各個功能屬性提煉形態(tài)，融合品牌基因，使用品牌色及輔助色，提升品牌形象。提煉品牌，將學(xué)而思品牌色和形象元素相融合，提升品牌感，增加趣味性。

Tab bar 作為整個APP的第一觸點，給用戶傳遞的理念及信息在整個APP中具有不可替代的重要性。我們的第一感受是粗糙或是精致，都會通過這個簡單的操作切換而得到。因此 tab bar 的設(shè)計，往往也檢驗著著整個APP設(shè)計是否精致的標(biāo)準(zhǔn)。

Tab bar圖標(biāo)動畫的設(shè)計是多種多樣的，包括有位移、劃線、彈性、縮放、透明變化、抖動、填充等等，不同的方式表達出來的設(shè)計感受也會有差異。

圖形延續(xù)圓角基因，讓整個圖標(biāo)體系看起來更柔和，更圓潤，更具親和力，結(jié)合界面圓角卡片等元素，希望傳達學(xué)而思的包容性。簡化圖標(biāo)造型，用幾何有規(guī)律的圖形元素彰顯現(xiàn)代感，結(jié)合升級的色彩體系，強化圖形識別度和設(shè)計理念傳承。

7.3圖標(biāo)的設(shè)計思路  

根據(jù)設(shè)計參考的分析，提取學(xué)而思的顏色應(yīng)用思路，整體風(fēng)格保持統(tǒng)一，設(shè)計上具有創(chuàng)意，凸顯產(chǎn)品特點，融入愛豆猴的元素，更具有趣味性。 

 7.4圖標(biāo)的色彩煥新

色彩作為第一眼視覺，我們大量的應(yīng)用了高飽和度漸變色，更加符合學(xué)而思網(wǎng)校聚焦“中小學(xué)生”群體的喜好，使圖標(biāo)能成為學(xué)而思界面上的點睛之筆，為產(chǎn)品氛圍更添加一分活力。

學(xué)而思的標(biāo)準(zhǔn)字體是系統(tǒng)字體，無論是iOS的「蘋方」還是Android的「思源黑體」，都擁有強大的字重系統(tǒng)，可以應(yīng)用在不同觸點中，滿足頁面中大部分信息層級的排版和信息可讀性，在中文系統(tǒng)的設(shè)計升級中我們?nèi)耘f保留了這一標(biāo)準(zhǔn)，只在此基礎(chǔ)上通過加大字號梯度和Light字重，來提升圖文排版中的閱讀效果。

其中變化較為顯著的是，我們對英文及數(shù)字字體進行了字體升級。使用了系統(tǒng)自帶的DIN alternate字體，相較于San Fransco的數(shù)字呈現(xiàn)，該字體更為清秀，精致，對于客戶端整體氣質(zhì)的提升有很大幫助。

在對原型進行視覺設(shè)計的環(huán)節(jié)上，我們選擇了三版主推原型，并進行視覺設(shè)計。這三版設(shè)計稿中，利用插畫和微質(zhì)感的融入，增強視覺時尚感和精致度。設(shè)置會員體系，增強用戶粘性，提高屏幕利用率，增強模塊吸引度，提升流量分發(fā)效率及品牌感，提高運營設(shè)計 效率。

所有設(shè)計圖展示：

用戶頭像插畫設(shè)計師準(zhǔn)備了高中學(xué)生，初中學(xué)生和小學(xué)生的不同設(shè)計，為不同用戶帶來相應(yīng)的個性頭像。與此同時，我們的設(shè)計師為頭像賦予了動效設(shè)計，明晰展現(xiàn)學(xué)習(xí)進度和用戶等級。

個性化的頭像設(shè)計，根據(jù)不同用戶的身份為用戶提供獨特的頭像形象。讓用戶在學(xué)習(xí)

的過程中趣味化更強。

會員卡不僅僅承載著支付功能，還可以獲取更多福利信息和情感上的尊享感知，卡片氣氛飽滿品質(zhì)感強，ICON顏色質(zhì)感突出。

流暢的動效可以給人耳目一新的感受，讓使用者感受到動效帶來的愉悅性。從設(shè)計的角度來看，交互動效并不是錦上添花而是UI設(shè)計的必需品，它不應(yīng)該被強調(diào)有或無，而應(yīng)該被強調(diào)好或不好，好的交互反饋動效可以讓整體的設(shè)計更加具有品牌調(diào)性。

為了讓產(chǎn)品更有趣味性，可以在某些場合適當(dāng)運用動效創(chuàng)造一些讓人愉悅的動畫效果。兩點是需要注意的，一是動效時間要足夠短，二是動效要足夠流暢。這樣做的好處是，中和了扁平的單調(diào)，在扁平風(fēng)格和寫實風(fēng)格中間達到節(jié)奏的平衡。提升了頁面的輕快感，學(xué)習(xí)不再是沉重乏味的，也可以像游戲和動畫一樣可愛活潑。

主界面：

邀請有禮：

一群心懷夢想的年輕人，有熱血，有激情，為了共同的目標(biāo)攜手努力！在團隊組長的帶領(lǐng)下，對項目有規(guī)劃有排期，我們的每個組員不管多晚都爭取在排期內(nèi)完成每一次任務(wù)！雖然過程是痛苦的，但結(jié)果也是值得欣慰的！

11.1項目排期

我們憑著對UI設(shè)計的熱愛走到了一起，組成了一支有創(chuàng)意、有執(zhí)行力的實力團隊。這里，沒有過多的抱怨和負(fù)面，只有知己相伴，共同成長.在輕松和諧的工作氛圍共創(chuàng)價值，在夢想的道路上心照不宣。 

12-結(jié)束語

我們對學(xué)而思個人中心進行了最新趨勢前沿的設(shè)計探索，從打破同質(zhì)化的頁面原型，大膽的配色嘗試，結(jié)合最前沿設(shè)計風(fēng)格的探索，最終把結(jié)果呈現(xiàn)出來。

綜上，就是我們在學(xué)而思改版設(shè)計中融入的新探索和新沉淀，寫下這些內(nèi)容讓大家更深入地了解我們在打破同質(zhì)化產(chǎn)品中所做的努力和嘗試，也希望能給身處行業(yè)中的設(shè)計師們一些幫助和啟發(fā)，感謝大家

Powered by Froala Editor