<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 2014年手機界面設(shè)計的趨勢

          2014-6-23    藍藍設(shè)計的小編

          轉(zhuǎn)載藍藍設(shè)計(   www.sdgs6788.com  )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

          來源:http://www.cssn.cn/ysx/ysx_sjx/201310/t20131026_611976.shtmll

          如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,   請點這里

          一、唯一主色調(diào)| Simple color schemes

          為什么我們要定義一個界面多種顏色?僅僅用一個主色調(diào),是不是就能夠很好的表達界面層次、重要信息,并且能展現(xiàn)良好的視覺效果?事實上也正是如此,隨著iOS7的發(fā)布,我們看到越來越多唯一主色調(diào)風(fēng)格的設(shè)計,會采用簡單的色階,配套灰階來展現(xiàn)信息層次,但是絕不采用更多的顏色。

          卡塔爾航空公司

          卡塔爾公司航空就是這樣的設(shè)計案例,整個界面采用粉色的主色調(diào),從標(biāo)題欄到標(biāo)簽頁,從操作按鈕到提示信息,除了黑白灰之外,全部采用粉色設(shè)計,這種簡介的的配色風(fēng)格,反倒起到了很好的信息傳達效果,也具有良好的視覺表現(xiàn)力,設(shè)計師在內(nèi)容排版上的技巧實在是加分。

          Readability采用紅色主色調(diào)設(shè)計,連提示信息背景色、線性按鈕和圖標(biāo)都采用紅色主色調(diào),界面和LOGO也完全是一個色系的。而Vivino采用藍色主色調(diào)設(shè)計,信息用深藍、淺藍加以區(qū)隔。Eidetic采用橙色主色調(diào)設(shè)計,其中的關(guān)鍵操作按鈕甚至整個用橙色提亮,信息圖標(biāo)也用深橙色、淺橙色來表達程度。

          可以說唯一主色調(diào)設(shè)計手法,是真的做到了移動端APP的最小化(Minimal)設(shè)計,減少冗余信息的干擾,使用戶專注于主要信息的獲取。

          二、多彩色| Hypercolour

          而與唯一主色調(diào)形成對照關(guān)系的,就是Metro引領(lǐng)的多彩色風(fēng)格,為什么我一定要給我自己的產(chǎn)品定義一種主色調(diào),多彩色就不能是主色調(diào)嗎?于是出現(xiàn)了不同頁面、不同信息組塊采用撞色多彩色的方式來設(shè)計的風(fēng)格,甚至同一個界面的局部都可以采用多彩撞色,也產(chǎn)生了不少優(yōu)秀的設(shè)計。

          優(yōu)衣庫出品的RECIPE,是一個讓人眼前一亮的設(shè)計案例,多彩色的設(shè)計風(fēng)格融入到整個APP中,不論是切換標(biāo)簽頁,還是在內(nèi)容組塊中滾動,都會變更不同的主題色。色彩切換的時候,還會有淡入淡出的效果,讓切換變得自然而然,完全不生硬。RECIPE的番茄鐘計時器模塊,會一邊計時一邊播放優(yōu)美的美食背景音樂,同時切換不同的主體顏色,隨著主體顏色的變更,所有的前景文案、圖片也會變更為該色系,加上清晰度極高的美食圖片,真的是視覺+聽覺的雙重享受。RECIPE真的是2013年難得一見的優(yōu)秀設(shè)計。

          而Peek Calendar、EveryWeather和Harmony這三個APP,是列表多彩色的設(shè)計案例,這種列表多彩色,不知道是不是從Clear開始再度流行起立的,用鮮亮的多彩色來區(qū)分信息,確實能起到突出的效果,視覺上極其醒目。

          可是對于一些內(nèi)容型的APP,也許并不適用,比如GoogleKeep的多彩卡片,確實是在內(nèi)容閱讀上會起到反效果。百度云記事本第一版設(shè)計也是多彩色的,但是后來考慮到文字記事比較多,為提供良好的文字閱讀體驗,還是把多彩色改成灰白色微質(zhì)感的設(shè)計。

          三、數(shù)據(jù)可視化| Data Visualization

          至于對信息的呈現(xiàn),越來越多的APP開始嘗試數(shù)據(jù)可視化、信息圖表化,讓界面上不僅僅是列表,還有更多直觀的餅圖、扇形圖、折線型、柱狀圖等等豐富的表達方式。表面上看起來也不是很難的事情,但是若真想實現(xiàn),背后的復(fù)雜程度也不容小窺。

          Nice Weather用曲線圖來表達溫度的變化,Jawbone UP用柱狀圖來表達每天的完成情況,PICOOC用折線圖來表達每天體重、體脂的變化。移動APP利用數(shù)據(jù)可視化,可以在更小的屏幕空間內(nèi),更立體化的展示內(nèi)容。

          四、卡片化| Cards

          卡片也是一種采用較多的設(shè)計語言形式,無法考究這種卡片的設(shè)計,是從Metro的tiles流行起來的,還是從Pinterest的瀑布流流行起來的。總之我們可以發(fā)現(xiàn),Google的移動端產(chǎn)品設(shè)計已經(jīng)全面卡片化了,甚至Web端也沿用了這種統(tǒng)一的設(shè)計語言,據(jù)說是Google搜索的體驗負責(zé)人引領(lǐng)的設(shè)計語言統(tǒng)一升級。

          luvocracy的卡片流突出信息本身,用大圖和標(biāo)題文字吸引用戶,強化了無盡瀏覽的體驗,吸引用戶一直滾動下去。Google Now的卡片則更加的定制化、個性化。有的卡片是用來做用戶教育的,有的卡片是用來告知天氣的,有的卡片是呈現(xiàn)聯(lián)系人列表的,有點卡片是顯示待辦事項的。不同的卡片都遵循在一個統(tǒng)一寬度和樣式的卡片內(nèi),進行發(fā)揮和設(shè)計。既保證了卡片和卡片之間的獨立性,又保證了服務(wù)和服務(wù)的統(tǒng)一化設(shè)計。Shazam則用一種趣味的卡片樣式,呈現(xiàn)專輯和歌曲。

          五、內(nèi)容為王| Content First

          APP產(chǎn)品的發(fā)展,最終的路徑勢必會跟web產(chǎn)品一樣,突出內(nèi)容,內(nèi)容為王,當(dāng)繁華褪盡,纖塵不染,再重新去看APP存在的意義,不外乎是給用戶提供更好的服務(wù)。與內(nèi)容相比,所有的設(shè)計和包裝,都不外乎是一種表現(xiàn)手法,而真正具有價值的APP,一定是內(nèi)容取勝的。Facebook用190億美金收購了Whatsapp,這個全是用統(tǒng)控件搭建的APP,并不是因為他的設(shè)計多出眾,而是因為他的服務(wù)足夠有價值。

          Artsy的圖片瀑布流,完全沒有用到線和面來區(qū)分信息組塊,而就是用內(nèi)容本身做排版,用戶可以更加集中注意力于圖片內(nèi)容上。Prismatic利用字體排版,盡可能的內(nèi)容前置,弱化圖標(biāo)和操作,讓用戶更集中注意力于內(nèi)容閱讀上。而MR Porter則利用商品圖片、名稱和價格直接做設(shè)計,讓用戶聚焦于商品本身。

          六、圓形的運用| Circle Design

          園形是最容易讓人覺得舒服的形狀,尤其是在充滿各種方框的手機屏幕內(nèi),增加一些圓潤的形狀點綴,立刻就會增加活潑的氣息,徒增好感。一個有意思的現(xiàn)象是,iPhone的撥號數(shù)字鍵盤,一開始都是矩形設(shè)計,迭代到iOS7,均變成了圓形,可以說是對傳統(tǒng)電話的致敬,也可以說是增強了界面的柔和感。當(dāng)然相應(yīng)的,也要處理圓形的實際點觸區(qū)域,不要因為設(shè)計成圓形點擊區(qū)域也變小了,導(dǎo)致點擊準(zhǔn)確率下降了,美觀度提升易用性受到了影響。

          Beats Music把選擇喜歡的標(biāo)簽設(shè)計成了圓形,這就比普通的列表、矩形tag的感覺要好很多,更加趣味更具探索性。Movse每天走的步數(shù)、消耗的卡路里均用圓形承載,是數(shù)據(jù)可視化、關(guān)鍵信息顯性化的最好案例。Tumblr則把要創(chuàng)建的內(nèi)容的類型選擇,用蒙層+圓形選項按鈕來設(shè)計,讓選擇變得專注而明確,又不那么死板。

          七、大視野背景圖| Bigger Vision image background

          用通欄的圖片作為背景,也成為今年的一個流行趨勢,或者是作為整個APP的背景,或者是作為內(nèi)容區(qū)塊的背景,既提升了視覺表現(xiàn)力度,又豐富了APP情感化元素。一些信息或操作,浮動在圖片上。這種設(shè)計方法,對字體和排版設(shè)計要求更高,難度也更多,但極容易渲染出氛圍。

          大視野背景圖風(fēng)格也分為兩種,一種像Secret、The Whole Pantry這樣的,內(nèi)容區(qū)塊中采用大視野背景圖,好處是可以利用圖片做區(qū)塊分割,難度是圖片拼接后的效果不一定好看,所以可能還需要配合描邊、留白等設(shè)計手段優(yōu)化拼接。另外一種就是想Vsco、Flink、Mindie、Soundwave這樣的,全屏背景圖甚至打通狀態(tài)欄,前景做內(nèi)容排版、導(dǎo)航、操作。

          好處是設(shè)計非常具有生命了,所以有朋友把這種風(fēng)格也叫有計劃設(shè)計,說的就是回歸大自然的設(shè)計手法。但風(fēng)險也是很明顯的,就是前景的信息排布設(shè)計其實是有很大挑戰(zhàn)的,必經(jīng)花花綠綠的背景太過于干擾注意力,導(dǎo)致前景的文字內(nèi)容可讀性會變?nèi)酢K孕枰阎匾僮饔妹鞔_的按鈕區(qū)隔出來,閱讀型文字跟背景圖要用明顯的反色,還是不行的話就把文字浮在半透明蒙層上,解決可讀性問題。

          最后總結(jié)來說,2014年讓我覺得印象深刻的7種設(shè)計語言,唯一主色調(diào)、多彩色、數(shù)據(jù)可視化、卡片化、內(nèi)容為王、圓形的運用和大視野背景圖。其實設(shè)計風(fēng)格很難有全新的,也是不斷輪回的過程,為凸現(xiàn)內(nèi)容APP都在往輕薄化方向設(shè)計,不過保不準(zhǔn)哪天,又顛覆回最開始的重質(zhì)感擬物話設(shè)計呢。

          日歷

          鏈接

          個人資料

          藍藍設(shè)計的小編 http://www.sdgs6788.com

          存檔

          久久国产色AV免费观看| 亚洲精品乱码久久久久久蜜桃| 免费久久人人爽人人爽av| 亚洲Av无码国产情品久久| 一本久久a久久精品亚洲| 久久精品人人做人人妻人人玩| 色综合色天天久久婷婷基地| 日韩欧美亚洲国产精品字幕久久久 | 大蕉久久伊人中文字幕| 三级韩国一区久久二区综合| 久久亚洲精品成人av无码网站| 品成人欧美大片久久国产欧美| 久久久国产打桩机| 香蕉久久夜色精品国产小说| 大香伊人久久精品一区二区| 国产韩国精品一区二区三区久久 | 国产三级精品久久| 中文字幕无码av激情不卡久久| 欧美大香线蕉线伊人久久| 久久青青草原精品国产不卡| 午夜精品久久久久久中宇| 99国内精品久久久久久久 | 亚洲午夜无码AV毛片久久| 99久久免费国产精精品| 99久久综合国产精品免费| 日韩电影久久久被窝网| 久久e热在这里只有国产中文精品99| 久久精品午夜一区二区福利| 亚洲精品第一综合99久久| 国产福利电影一区二区三区久久久久成人精品综合 | 久久99国产亚洲高清观看首页| 国内精品伊人久久久影院| 久久久艹| 国产真实乱对白精彩久久| 美女写真久久影院| 日本久久久精品中文字幕| 热99re久久国超精品首页| 88久久精品无码一区二区毛片 | 久久国产成人午夜AV影院| 91精品国产综合久久四虎久久无码一级| 婷婷综合久久中文字幕蜜桃三电影|