<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          手機appUI界面設計賞析(八)

          前端達人


          手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。

          手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。這里為大家整理了一些優秀并富有創意的交互作品,為你的產品設計注入靈感。

          jhk-1589856824505.png

          --手機appUI設計--

          jhk-1589856834298.jpg

          --手機appUI設計--

          jhk-1589856847369.jpg

          --手機appUI設計--

          jhk-1589856965196.png

          --手機appUI設計--

          jhk-1596893249060.png

          --手機appUI設計--

          jhk-1596893316552.jpg

          --手機appUI設計--

          jhk-1596893336786.jpg

          --手機appUI設計--

          jhk-1597108869110.jpg

          --手機appUI設計--

          WechatIMG50.png

          --手機appUI設計--

          WechatIMG51.png

          --手機appUI設計--

          WechatIMG52.png

          --手機appUI設計--

          WechatIMG53.png

          --手機appUI設計--

          WechatIMG54.png

          --手機appUI設計--

          WechatIMG62.jpeg

          --手機appUI設計--

          WechatIMG63.jpeg

          --手機appUI設計--

          WechatIMG66.jpeg

          --手機appUI設計--

          (以上圖片均來源于網絡)

           





           藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服



            更多精彩文章:

                 手機appUI界面設計賞析(一)

                 手機appUI界面設計賞析(二)

                 手機appUI界面設計賞析(三)

                 手機appUI界面設計賞析(四)

                 手機appUI界面設計賞析(五)

                 手機appUI界面設計賞析(六)

                 手機appUI界面設計賞析(七)

          uni-app頁面之間的傳參,讓下一個頁面接收上一個頁面的值

          seo達人

          為了實現頁面之間的通訊,或者數據交換,我們要實現一個頁面到另一個頁面的傳參,可以通過點擊跳轉的時候進行頁面之間的傳值。


          <template>

             <view>

                 <navigator url="../a/a?id=1" hover-class="none">

                     <view>跳轉到A頁面</view>

                 </navigator>

                 <navigator url="../b/b?id=2" hover-class="none">

                     <view>跳轉到B頁面</view>

                 </navigator>

                 <navigator url="../c/c?id=3" hover-class="none">

                     <view>跳轉到C頁面</view>

                 </navigator>

             </view>

          </template>


          <script>

          export default {

             data() {

                 return {


                 }

             },

             methods: {


             },

             onLoad: function (option) {

                 //獲得上一個頁面傳過來的id

                 var pageid = option.id;

                 console.log(pageid);

             }

          }

          </script>

          Author:TANKING

          Web:http://www.likeyun.cn/

          Date:2020-8-13

          WeChat:face6009

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          動效不知如何落地?

          資深UI設計者

          一直有很多朋友會問一些關于移動端實現動效的方法,平時也會給大家做一些解答,但是可能沒有那么系統性,這次抽點時間總結歸納下這方面的內容,跟大家分享下我日常設計中是如何完成動畫實現的。

          實現動畫的方式

          設計輸出的方式大概可以分為位圖和矢量兩種,與常規的圖片輸出并無太大的差異。位圖方式:PNG序列幀、APNG、GIF;矢量方式:Lottie、SVG動畫。

          動效不知如何落地?看完騰訊高手的經驗就明白了

          當然除了以設計提供的方式之外,還可以設計完成好demo,開發通過代碼進行實現例如:javascript直接實現、SVG(可伸縮矢量圖形)、CSS3 transition、CSS3 animation、Canvas動畫、requestAnimationFrame由于超出個人能力范疇就不展開講了。

          實現動畫常用的工具

          實現動畫,首先還是得了解有哪些工具可以制作及合成相關的動效,我日常主要使用的工具有Principle、AE、bodymovin插件、iSparta等軟件。另外最近準備學習一個新的專門制作svg動畫的軟件-KeyShape。

          • Principle:可以輸出GIF、視頻等格式;
          • AE:可以輸出PNG序列,結合插件可以輸出GIF等等;
          • bodymovin:輸出json文件(也就是所謂的Lottie動畫);
          • iSparta:使用PNG序列合成APNG、GIF圖片格式除此之外;
          • Keyshape:主要是可以制作比較強大的路徑變換動畫,然后輸出svg動畫格式。

          動效不知如何落地?看完騰訊高手的經驗就明白了

          格式說明

          • PNG序列:以單幀圖像呈現,輸出后會生成一個序列組的文件夾;
          • APNG:實際上是把PNG序列合成一張可動畫化的PNG,類似GIF,但相比GIF質量要高,圖片后綴依舊是「.png」。
          • GIF:可動的位圖,但質量較差,壓縮到臨界值時會出現鋸齒邊和白邊,個人比較不喜歡用。
          • Json(Lottie動畫):實際上是一個用代碼描述的文檔,通過代碼描述路徑、節點的方式來完成動畫效果,與開發實際通過代碼實現動畫類似,通過bodymovin輸出后減少開發實現的時間,提高了開發實現的效率。
          • SVG動畫:與Lottie的方式比較類似,可以減少開發的動畫工作量,可以通過keyshape設計并導出,后綴為「.SVG」。

          如何輸出文件?

          接下來講解下各個軟件輸出對應格式的方法,實際上操作并不會太難,動效本身更重要的還是在于創意本身,因此當你把握了這些方式之后可以考慮進行創意設計。

          由于GIF文件多種工具都可以輸出,這里就不再作詳細說明

          1. PNG序列

          • 在AE中制作好動畫
          • 通過AE預渲染,然后選擇PNG序列,直接渲染出序列幀到本地文件夾
          • 導出序列幀后需要進行壓縮,常用的是tinypng,壓縮后較小的文件再進行交付

          具體如下視頻

          2. APNG

          如上導出到PNG序列幀,拖拽到iSparta軟件中,合成即可。合成時可以選擇幀率、循環次數(0為無限循環)、導出質量等。如下視頻

          3. Lottie

          • AE中需要安裝bodymovin的插件
          • 制作好動畫后,在窗口打開插件-bodymovin、
          • 選擇導出的位置,直接渲染一下,即可在本地生成json文件
          • 插件帶有預覽能力,但較差??梢栽?a target="_blank" style="color:#262626;text-decoration-line:none;transition:all 0.2s ease 0s;border-bottom:1px solid #525252;word-break:break-all;">https://lottiefiles.com/preview中進行預覽查看

          更多Lottie相關可以前往https://lottiefiles.com/學習,里面有豐富等Lottie動畫效果和一些插件下載,去研究下吧

          4. SVG動畫

          • 下載keyshape軟件,屬于付費軟件,可以下載14天試用版
          • 可以通過圖形制作動效,可以設置自動補間
          • 導出svg文件,導出時可以設置運動是循環或是一次

          建議大家自己下載軟件后嘗試

          5. 格式大小比

          通過試驗幾種格式的大小大概是排序依次為:PNG序列>APNG>GIF(質量較差)>Lottie / SVG,json文件和SVG動畫文件比較接近,因此可以根據實際考慮決定即可,GIF雖然可以壓縮到比較小,但是本身圖片質量也較差,因此建議慎重考慮。

          動效不知如何落地?看完騰訊高手的經驗就明白了

          應用案例

          動效在UI設計中的應用場景很多,這里梳理了一下,之前我在項目中嘗試過的動效,給大家分享下一些案例,希望可以對大家有所啟發。

          動效不知如何落地?看完騰訊高手的經驗就明白了

          動效不知如何落地?看完騰訊高手的經驗就明白了

          動效不知如何落地?看完騰訊高手的經驗就明白了

          動效不知如何落地?看完騰訊高手的經驗就明白了

          動效不知如何落地?看完騰訊高手的經驗就明白了

          動效不知如何落地?看完騰訊高手的經驗就明白了

          最后總結

          學習用什么工具導出什么格式的文件只是第一步,更重要的還是如何制造出一個有創意的動效,因此不要過于強調工具,更多應該培養自己思考設計的習慣。

          文章來源:優設    作者:ID設計站

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          餓了么、美團都在用的輕擬物風格,到底是什么?

          資深UI設計者

          擬物化設計的回歸

          在今天的 UI 設計領域,由扁平化設計風格占據主導地位,已經是無可辯駁的事實了。扁平化應用除了提升用戶獲取信息的效率外,對設計師而言就是設計的難度大大降低了。

          一個界面的 UI 視覺元素,僅僅只需要圖片素材、矢量圖標、幾何、文字,UI 設計師的工作僅僅是對內容進行組織和排版,涉及到繪制原創的也僅僅只有少量的圖標(大多數人還畫不好)。

          餓了么、美團都在用的輕擬物風格,到底是什么?

          這種狀態持續了很多年,看起來歲月一片靜好。

          但是,這兩年市場發出了一些不同的聲音,那就是打破純扁平風格的 UI 風格、元素開始越來越盛行了。

          比如新擬態風格在年初炒了一波熱度,各大平臺和公眾號都鋪天蓋地的發文和介紹,介紹它的設計理念和設計方法。

          餓了么、美團都在用的輕擬物風格,到底是什么?

          還有就是以餓了么、美團為首的國民級應用在主頁顯眼的位置里使用極具識別性的擬物圖標,引起設計圈的熱議。

          餓了么、美團都在用的輕擬物風格,到底是什么?

          首先講講新擬態設計,之所以之前只字不提,是因為我對這個風格實在沒什么好感,有種對純擬物借尸還魂的味道,且它的樣式對于信息密度高的應用是完全不適用的,只能活在飛機稿里。

          而國內大型應用開始在實際項目中上線擬物圖標,意義就不一樣了,證明這樣的設計是經過幾個大廠團隊認可,且有共識的。

          當然,這并不因為大廠用了就無腦推崇。而是純扁平的設計已經越來越難滿足部分需要強視覺效果的頁面設計了。

          今天的互聯網和過去不一樣,用戶的增長留存不再是過去一樣通過裂變和口碑完成,一個產品只要認真打磨體驗、功能就能獲得用戶的青睞和駐留。用戶的精力時間是固定的,而互聯網產品又層出不窮,佛系的等待用戶臨幸是沒有出路,這種現狀也被稱為互聯網的下半場。

          佛系不行,當舔狗更不行(成本太高),所以今天大型產品都在對待用戶的態度都選擇更具更具侵略性的霸道總裁人設。不僅是用色飽和度越來越高,運營活動越來越密集,廣告和強提示也越來越多。比如剛打開了三個應用,進入的首頁大家自己意會……

          餓了么、美團都在用的輕擬物風格,到底是什么?

          有點扯遠了,回到話題上。在這種掠奪用戶注意力的思路指引下,再做所謂的性冷淡、大留白、極簡風就不會合適。當對扁平的視覺效果已經開發到極限以后,那么進一步在一些細節處應用擬物就成為必然的選擇。

          而擬物的應用并不可能鋪設到整個應用中去,因為完全擬物化的設計降低信息瀏覽效率是必然的,所以它只適合做局部的視覺強化,來加強用戶對特定區域的感知。

          最常見的需要被凸出的要素,就是首頁中應用的快速入口圖標、分類圖標和底部導航欄圖標了。這些區域長期受運營活動支配,相信大家已經很習慣了。

          餓了么、美團都在用的輕擬物風格,到底是什么?

          只是,這些圖標開始在脫離運營活動的狀態下,也開始使用非扁平模式,那就不再是運營設計師的工作職責,而是 UI 設計師們繞不過去的檻了(知識盲區)!

          且除了 APP 外,其它領域對于擬物設計的需求也會開始逐漸提升,尤其是目前越來越復(fu)雜(kua)的大屏數據展示、車載界面、定制系統等等。

          作為新世代的 UI 設計師,多數人對擬物的設計可以說是完全空白的狀態,所以是時候要重拾擬物設計這個傳統藝能了。

          擬物和輕擬物的認識

          前面我有提到,擬物主要應用在關鍵的圖標上,但應用的擬物風格并不是過去我們追求的那種極其真實、復雜的擬物,而是經過一定簡化、抽象后的擬物 —— 輕擬物。我們要先來明確一下輕擬物到底是什么。

          首先我們看看,過去優秀的擬物圖標和設計案例,它不僅表現元素本身的光影、透視、構造,甚至會非常完整的表現物體表面的材質和肌理。

          餓了么、美團都在用的輕擬物風格,到底是什么?

          這種圖標單看起來確實很好看、細致。但是,把它丟進我們當前的頁面中是非常違和的,因為它們細節實在太多了,而且畫起來非常耗時間,不利于項目整體的推進。

          所以為了符合畫面的質感,又要考慮項目效率,輕擬物這個概念開始被提出和應用,作為一個折中的解決方案。

          它和純擬物設計的共同點在于,也表現光影、結構、透視,但它盡可能精簡了輪廓的復雜度、肌理和層級,呈現出更概念化、理想化、易于辨識的擬物圖形。

          餓了么、美團都在用的輕擬物風格,到底是什么?

          所以,我們主要去學習的內容是輕擬物的設計方法,而不是徒手畫照片(這個可以緩緩)!

          而輕擬物雖然 「輕」,但它依舊也還具備擬物的基本特征,是有實體質感的。但是扁平從插畫到圖標設計經過多年的改版,有各種嘆(hua)為(li)觀(hu)止(shao)的設計,應用大量的漸變、投影、模糊的效果,比如下圖案例。

          餓了么、美團都在用的輕擬物風格,到底是什么?

          這在我們之前圖標的系列干貨中有提過,這類設計是面性圖標的進階版,它們依舊屬于扁平風格的范疇之內,不能和輕擬物劃上等號。

          所以,先掌握這些概念,到下一篇中,我們就會展開具體的技法講解和演示了。

          結尾

          對于這幾年才開始學習 UI 設計的新手來講,擬物已經變成一個很陌生的事物,這對行業來說是比較悲哀的一件事。

          因為擬物的設計不僅僅是畫圖標而已,對它的學習可以全方位的提升設計師的基礎素養,不僅包括對傳統美術(結構、光影、色彩、透視)知識點的剖析,還包含對 PS 使用的深入探索。

          可以說,自從擬物不成為必修題材以后,九成以上的UI設計師是不會用 PS 的,這極大的限制了他們自身的可能性和作品的多樣性。

          以后還敢說自己不會版式設計?

          周周

          作為一名專業的設計師,版面設計能力直接影響到該設計師水平。我們很多設計朋友在臨摹的優秀作品中,往往只是被作品華麗的外表吸引了,比較少去思考設計背后的秘密。

          那么在這里,我總結了版式設計原理的幾個方面,結合一些具體例子實際操作演示,讓對這塊不熟悉的設計師朋友們能快速掌握版式設計。

          目錄

          1. 版式組成
          2. 構圖平衡
          3. 設計原則
          4. 設計流程
          5. 案例演示

          以后還敢說自己不會版式設計?

          一、版式組成

          主體:視覺焦點,主導著整個設計(可以是人/物/文字/圖片),整個版面最吸引人的部分,相當于主角的作用。

          文案:對主體的輔助說明或引導,畢竟有時候我們放一只小狐貍在旁邊,用戶也不能準確的知道它在說什么,配角的作用。推薦閱讀:平面廣告的版式風格與創新!

          點綴元素:裝飾元素,可有可無,具體根據版面需要;好的點綴元素能夠渲染氣氛,大部分的點綴元素遵循三角形原則,類似下圖中的云朵,群演的作用。

          背景:可分為純色/彩色肌理/圖片/圖形等。

          以后還敢說自己不會版式設計?

          二、構圖平衡

          在設計中,平衡是實現統一的一條重要途徑。如果上面所說的元素組合起來處于平衡狀態,那么這個設計看起來就是統一的,就會給人一種整體印象。

          因此,平衡是視覺傳達設計的一個重要方面。版式平衡總共有3種分類,分別是:對稱平衡,非對稱平衡和整體平衡。

          以后還敢說自己不會版式設計?

          1. 對稱平衡

          對稱是同等同量的平衡,對稱式設計是一種靜態的,可預見的,講究條理和平衡布局的設計。對稱構圖相對比較易于創建,特點是穩定,莊嚴,整齊,安寧,沉靜和古典。

          以后還敢說自己不會版式設計?

          2. 非對稱平衡

          非對稱在不對等的元素間創設出秩序和平衡,非對稱設計由于版式不可預見,所以空間是變化的。特點是動態的,靈活的和富有活力。非對稱構圖比較多,常見的有以下6種形式。

          以后還敢說自己不會版式設計?

          對角線構圖:

          文案擺放在版面的對角線方向,一方面避免了司空見慣的居中版面,一方面給中心主體留出了更多的創作空間;另外中心的圖形也可以是對角線的設計,這樣會讓整個構圖看起來比較平衡。

          以后還敢說自己不會版式設計?

          發射狀構圖:

          點綴元素圍繞中心的文案或者圖形發射,這樣的構圖會讓中心的視覺容易聚焦,視覺沖擊感會更強烈。

          以后還敢說自己不會版式設計?

          像電商大促活動,淘寶和京東等等會經常使用發射性構圖來營造大促活動的熱鬧火烈程度。

          以后還敢說自己不會版式設計?

          中心構圖:

          這是我們最常見的構圖之一,文案和主體居中頁面,注意的是位于版心的主體要盡可能的出彩,利用設計技巧吸引讀者的眼光,這樣才能避免平淡乏味。

          以后還敢說自己不會版式設計?

          s形構圖:

          文案或者圖形放在線條轉折的地方,整體呈一個 s 形。另外線條的起點和重點也同樣是讀者容易關注的地方,可以放一些重要的信息。這樣的構圖靈活,有趣,而且可以引導用戶沿著 s 形軌跡閱讀信息。

          以后還敢說自己不會版式設計?

          二分構圖:

          文案和主體分開,呈左右或者上下的構圖形式,注意的是文案要采用對齊原則。這樣的構圖也是比較容易創建的。

          以后還敢說自己不會版式設計?

          形狀構圖:

          主體和文案組合的形式可以是圓形,三角形,矩形等形狀構圖。注意如果是用三角形構圖,最好呈倒金字塔結構,這樣更加輕易引導用戶進入下一個信息層。

          以后還敢說自己不會版式設計?

          3. 整體平衡(滿版平衡)

          整體平衡,是指圖片充滿整個版面,文案布局在上下,左右,中部的位置,特點是主要以圖像為訴求,視覺傳達直觀而強烈。滿版型構圖,給人大方,舒展的感覺。

          注意:在設計的過程中,這種類型的文字處理很容易顯得「嘈雜」,因此為了避免擁擠的空間,適當刪減些文字。

          以后還敢說自己不會版式設計?

          三、設計原則

          對構圖形式了解后,我們還要知道一些基本的設計原則,雖然這些原則我們可以在其他地方反復的看到,但是我在這里還是要強調一遍,因為它可以幫助我們在打破規則之前,必須清楚規則是什么。另外注意一點就是,這幾個原則不是獨立分開的,而是可以同時考慮和結合,不是唯一選擇:

          以后還敢說自己不會版式設計?

          1. 對比

          缺乏對比,作品會變得平淡乏味并且不能有效地傳遞信息。艾美獎設計師、Blind 公司創始人 Chris Do 說過 contrast is king(對比至上),運用好對比,可以在頁面上引導用戶的視覺,并且制造焦點。

          以后還敢說自己不會版式設計?

          一般產生對比的方法可以有:大小對比、粗細對比、冷暖色對比……不管是哪種對比,當你期望對比效果有效的話,需要大膽一些,明顯一些,不要拿12號和13的文字做大小對比,這是沒有任何意義的,不要畏畏縮縮,做設計也是一樣。

          以后還敢說自己不會版式設計?

          2. 對齊

          任何元素都不能在版面上隨意安放。每一項都應當與頁面上的某個內容存在某種視覺聯系。在版面上找到可以對齊的元素,盡管它們可能距離比較遠。需要注意的地方是避免同時使用多種對齊方式。

          以后還敢說自己不會版式設計?

          左邊的海報采用了矩形構圖,右邊的海報采用了二分構圖,但是文案都是找到了一條明確清晰的對齊線,這樣讓版面產生了秩序美。

          以后還敢說自己不會版式設計?

          3. 親密性

          同類相近,異類相遠,相關的元素距離靠近,歸組在一起,成為一個視覺單位,而不是多個孤立分散的狀態,這樣有助于組織信息,減少混亂,讓結構變得更清晰。根據文案內容,進行合理的分組與歸類。

          以后還敢說自己不會版式設計?

          左邊海報文案分成了4組,清晰有條理,中心的主體和點綴元素也利用了親密性原則,使得中心主體顯得更飽滿;右邊海報主體采用了發射構圖,整體呈倒置的金字塔形式,這種錐形容易引導用戶閱讀下一個信息層。

          以后還敢說自己不會版式設計?

          4. 重復

          重復的目的是統一,并增強視覺效果。比如標題都是同一個字體或大小或粗細。但需要注意的是,要避免太多地重復一個元素,重復太多只會讓人討厭,要注意重復的「度」。太多的重復會混淆重點,都是重點等于沒有重點。一般來說,呈均勻的重復式圖案,是作為背景使用的。

          以后還敢說自己不會版式設計?

          左邊海報中,我們的視線會被那一個不同的女孩吸引住,這個女孩和左上角的文案「敏感詞萬歲」相呼應,這種同質中的不同,即是變異元素,用來制作視覺焦點。

          右邊海報是葛西熏設計師為日本著名仲條正義設計的個人展海報,其中重復的形象是一個腮幫鼓起的小孩形象,不知道是在喝東西還是吐東西,這個具有沖擊感的形象其實和這次展覽主題「飲&嘔吐」呼應的,設計師想表達仲條正義的創作于人生,正如這個重復的形象,不斷吸收,不斷推翻,最后不斷創造。

          以后還敢說自己不會版式設計?

          5. 留白

          留白是虛實空間對比的作用。適當的留白能讓頁面透氣,有呼吸,給人舒適感。大量視覺信息堆砌時,每個元素都要經過眼睛掃描,大腦處理,當找不到重點的時候用戶眼睛和大腦容易疲憊。在內容比較多的情況下,盡量在視覺上減少視覺分組;另外,多利用負空間創作一些巧妙的負空間。

          以后還敢說自己不會版式設計?

          左邊在留白的同時,利用了負空間巧妙的將海報的主題「美食」和「美酒」結合起來。右邊的海報是日本大師原研哉的設計作品,大量的留白空間更加顯得中間壽司的精致,少而靜的視覺元素提升了作品的品質感。

          以后還敢說自己不會版式設計?

          6. 變化

          一成不變的元素會容易乏味無趣,版面也缺乏靈活感,如果將一些元素發生位置,大小或者顏色變化,打破版面呆板、平淡的格局,使得畫面非常有層次感,不失為打破格局的好方法。

          以后還敢說自己不會版式設計?

          左邊的海報如果將所有的元素歸位,這將是一個文案和人物分開中規中距的構圖,當他們的位置發生了一些位移,整個頁面變得有趣多了。右邊海報采用了 s 形構圖,如果這些圓圈是一樣的大小、顏色,可能沒有多少人會有耐心的閱讀下去。

          以后還敢說自己不會版式設計?

          四、設計流程

          前面我們了解了版式組成的元素,構圖和設計原則,那么我們在工作中怎么利用起來呢,下面介紹我自己的設計流程,每個人的流程都不一樣,大家都可以根據自己的習慣來調整。

          以后還敢說自己不會版式設計?

          1. 需求溝通,確認主題

          當接到需求的時候,第一步不要著急馬上開工。先要找對需求的方向,才能提高工作效率,事半功倍。溝通主要注意幾個方面:

          需求的目的是什么?目標用戶是誰?背景是什么?——對癥下藥

          • 這么多文案或者素材里面,哪個是一級二級?——劃分信息層級,尋找重點

          • 風格上面有什么要求或建議?能否用3個關鍵詞表達?——預期效果是否達成一致

          Ps:關于第3步風格溝通,建議雙方用圖片交流和表達。畢竟每個人對「高大上」的理解都是不一樣的,有的人認為是五彩斑斕的黑,有人認為是大量的留白。有了圖片,我們可以去分析圖片符合「高大上」的原因是哪些,從而提煉出具體的元素,將「感覺」具體化,這里也是運用到了情緒板設計的體系。

          以后還敢說自己不會版式設計?

          2. 確定構圖形式,學會視線引導

          根據前面的溝通和風格關鍵詞,收集好用于表達信息的元素,包括圖形圖像文字等等,然后在草稿或者腦海中構思好,怎樣的排布能讓信息有效的傳達出去。另外作為設計師要學會引導用戶的閱讀視線。比如你找到了一個抬頭向上看的模特,你可以把文案放在海報上方,用戶會習慣性地自然地沿著模特的視線看到文案。

          以后還敢說自己不會版式設計?

          3. 色彩搭配,5種平衡關系

          關于配色,在網上大家都可以看到很多方法和理論,下面介紹這5種色彩平衡的方法個人覺得比較實用,也比較容易理解,大家要根據實際需求來運用合適的配色方案。

          互補色——相互襯托

          互補色就是色環上相對的兩個顏色,海報中的綠色和紅色就是這種關系,相互映襯,相互襯托,從而達到了一種平衡。

          冷暖色——情感表達

          當我們想表達強烈的情感時候,可以用冷暖色去對比,經常會在電影海報或者插畫作品中看到。

          深淺色——色彩層次

          這里的深淺指的是黑白灰對比的重和輕,一般來說,色大而深顯得比較重要,色小而淺顯得比較次要,我們可以看一下前面講構圖那塊展示的海報黑白版,會發現這個規律更加明顯。

          中性色和彩色——視覺聚焦

          中性色指的是黑色,白色和灰色,也叫無彩色,當中性色充當背景色的時候,彩色部分會更加突出和聚焦。

          純色和花色——平衡多色關系

          如果一張圖中,主體本身顏色比較豐富鮮艷,背景色也五顏六色的話就眼花繚亂了,也就是經常說的辣眼睛,這時候一般采用純色的背景來緩解視覺疲勞和平衡多色之間的關系。

          以后還敢說自己不會版式設計?

          以后還敢說自己不會版式設計?

          4. 確定字體搭配

          不同的字體有不同的氣質,根據風格來選擇合適的字體。如果遇到比較好看的字體,卻不知道叫什么名字,可以找一些以圖搜字的網站,比如求字網等等,避免伸手黨。

          黑體

          工業現代感比較強的無襯線字體,給人感覺端正剛硬,具有力量感,多用于表達簡潔或信賴感的主題。

          宋體

          細致優雅的襯線字體、苗條細長,特點是復古,多用于表達文藝或者時尚的主題。

          圓體

          圓體的筆畫圓潤,柔美,可愛,具有親和力,多用于女性或兒童的主題領域。

          書法體

          書法體特點是瀟灑大方,氣勢磅礴,具有歷史感,多用于表達傳統文化或者歷史主題。

          哥特體

          哥特體是裝飾性比較強的襯線字體,線條交接處和末端具有明顯的粗細變化和裝飾。特點是犀利、凌厲,多用于表達驚悚、魔法童話或者戰爭的主題。

          藝術體

          藝術體其實是泛指像素風格,手寫字體,漢儀六字簡等等具有強烈的藝術風格和設計感的字體。特點是輕松活潑,具有觀賞性和趣味性。

          以后還敢說自己不會版式設計?

          以后還敢說自己不會版式設計?

          以后還敢說自己不會版式設計?

          五、案例演示

          上面的案例大部分是平面展覽或者電影海報,那么實際工作中的網頁,banner、閃屏或者 ui 界面這些怎么辦呢?其實方法都是一樣的,版面設計的原理應用在各個方面。這里演示一個移動端 banner 設計案例吧。

          以后還敢說自己不會版式設計?

          首先,運營小姐姐的文案非常簡潔,沒有冗長到讓我要分成一級二級三級;其次需求的目的也很明確,就是要突出2個素材和按鈕;最后風格也沒有奇奇怪怪的提議,只要和產品整體調性一致就好。

          那么在這里要介紹一下產品的背景了,pins 是一款少女心拼圖 app,界面簡潔清新,多種布局模板和背景。很快的,我在腦海中簡單地構思了一下構圖的方式。其實3種構圖形式都是可以的,但是為了更好的突出按鈕和素材效果,我最后選擇了對角線構圖。

          以后還敢說自己不會版式設計?

          先在黑白稿的情況下把文案和主體布局好,讓主次關系清晰;考慮到目標用戶大部分是女生,使用了圓形字體,配色主要是參考了 pins 的 logo 的配色,少女心的品牌色;最后細節調整,加上一些點綴的元素,其中網格是 pins 比較受歡迎的背景。一個簡單的 banner 就這樣完成了。

          以后還敢說自己不會版式設計?

          當我們的工作內容無法滿足做文字比較多的平面海報的欲望時,可以考慮自命題的練習。當時聽到許巍《無人知曉》這首新歌的時候,有一些感悟和想法然后做了一些 C4d 素材,想利用它作為主體和歌名做一下排版練習:

          以后還敢說自己不會版式設計?

          在開始動手做之前我就想好了這次想做一個視覺直觀而強烈的海報,再加上主體是文案和素材的結合,所以我才采用了滿版構圖。在黑白灰中將主角和配角的位置確定好,再去調整字體和距離。推薦閱讀:版式必備的7招處理方法

          以后還敢說自己不會版式設計?

          然后調整主體中4個字和素材之前的交叉和重疊,細節調整后,我嘗試了2個配色方案,一種是利用主體素材的顏色進行搭配,平靜和諧;另外一種是紅藍配色,直觀強烈。

          以后還敢說自己不會版式設計?

          總結

          最后總結一下,我們在進行版面設計時候,要注意從這幾個方面去不斷調整和檢查,同樣當你看到一張海報的時候不知道怎么去思考和分析,也可以從這幾個方面入手:

          主題是否鮮明?視覺焦點是否突出?

          • 構圖是否平衡?(3種平衡關系)

          • 設計原則是否合理運用?(6個設計原則)

          • 細節是否豐富? 是否有趣? 細節考驗著設計師的情懷。(字體、色彩、光影等)

          以后還敢說自己不會版式設計?

          以上海報案例圖片采編于網絡,版權歸屬原作者。

          來源:UID的小伙伴們

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          如何實現小程序用戶增長,開發者給了幾點關鍵建議

          seo達人

          目前除了微信小程序,還有支付寶小程序,百度小程序,字節跳動小程序、京東小程序等,各大流量平臺都希望借助小程序的服務連接能力,為企業和用戶提供更好的服務。企業在小程序賽道上的戰略布局,可以借助平臺的流量,獲得更多的用戶和變現。

          有些人會認為小程序用戶增長是運營的事情,與產品和開發無關,實則不然。對于全棧工程師來說,他們不僅能做好小程序,還能玩溜小程序,真正全方位、無死角實現用戶增長最大化。

          小曉云近期采訪了幾位開發者,他們的小程序有些已經突破百萬用戶,在自己的領域中獲得持續性的發展。開發者圍繞用戶增長中的拉新、留存、轉化等維度,為我們提供了關于產品設計和開發的建議,希望以下的經驗對你們都有幫助。

          分享 1:小程序視覺和交互是重點,可以借鑒同行讓產品更符合大眾需求

          小程序的特點是「即搜即用,用完即走」,更適合那些輕量級的工具型應用。用戶來得快去得也快,則更需要簡潔、輕便的設計定位。UI 設計師和前端開發者平??梢酝ㄟ^知曉商店等小程序商店,多參考同類型優秀小程序的設計與交付,以此優化自己的小程序。雖然小程序視覺和交互并不會帶來用戶裂變式增長,但這個是留住用戶最基本的要求了。

          分享 2:微信小程序訂閱消息是一個用戶回流的神器

          今年微信小程序從模板消息升級為訂閱消息,這是一個幫助小程序實現用戶回流重要能力了。對于開發者來說,重點思考:如何合理的向用戶直觀傳達訂閱消息、在何處彈出訂閱消息。開發者在接入訂閱消息能力時,應該選擇適合業務場景的模板,并進行文案的引導,同時可以嘗試,發起一次訂閱時同時訂閱多個模版,讓用戶一次性獲得更多消息,提高訂閱率。新用戶粘性較低,可以借助訂閱消息發送獎勵通知等,召回用戶。

          分享 3:結合業務和用戶特點,策劃符合平臺調性的活動

          我們原先是做體育領域的資訊和商城 App,微信小程序發布后,龐大的微信流量給了我們一個拓展用戶的新機會,于是在 2017 年與知曉云結緣,并相伴 3 年了。用戶增長其實不是簡單的一兩句話可以總結,所以我先分享其中一點。體育領域的資訊,能吸引和留住用戶的,主要靠資訊的時效性、賽事活動、體育明星的加持,因此我們曾組織體育明星的投票活動,粉絲樂于參與,同時也提高了認同感和優越感。投票功能設置的門檻很低,但我們增加了很多排行榜的文案引導,加強粉絲的緊迫感,同時也增加了很多分享文案引導,讓粉絲主動分享。這個是針對體育領域上很成功的增長案例,當然也可以應用于其它追星平臺等。

          分享 4:做好數據分析,讓數據驅動用戶增長

          精細化運營的核心就是數據驅動,明確關鍵指標,并且通過數據分析的方式進行評估,然后不斷優化。數據埋點的缺點是開發成本高,所以我們是基于無埋點,一次性集成 SDK,采集頁面訪問、點擊行為、用戶特征等全量數據。

          分享 5:研究小程序平臺的用戶喜好,提供他們想要的服務

          我是做 QQ 小程序的, QQ 小程序的用戶對于社交、戀愛等偏娛樂的場景更感興趣,針對性提供頭像制作、起網名、小游戲等服務有比較大的市場。所以可以結合平臺用戶的特點和喜好,開發相關服務的小程序,更有利于小程序的發展和變現。

          以上內容均來自知曉云開發者的經驗分享,如果你對哪一個內容感興趣,可以在文末或者小曉云微信上留言,對于大家感興趣的內容,我們將再次邀請開發者進行更全面更完整的分享。

          知曉云成立三年以來,通過提供不斷更新的開發工具,幫助開發者提高開發效率,輕松完成優秀的作品。但我們服務不止于快、省,還要在增長與變現上賦能開發者/企業。

          知曉推送

          在線可視化操作加上業務系統輕松集成,可以一鍵推送全平臺的訂閱消息推送服務,輕松觸達億萬用戶。

          實時數據庫

          支持各類高實時性的業務場景,以簡便的開發方式、更高的時效性實現在云端和客戶端來的數據實時同步。通過實時數據庫實現的即時聊天室、投票、直播間送禮和彈幕、小游戲等互動功能,提升用戶留存和轉化。

          運營后臺

          一鍵生成可視化的運營管理后臺,User Dash API 和開箱即用的前端組件庫,開發者可以快速編寫一套獨立的運營后臺,并支持一鍵部署至知曉云服務器,是開發者的利器,也是運營者的福音。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          模板商終結者——微信小商店

          seo達人

          微信小商店已經正式上線,對企業、個體和個人三種開店類型全量開放。微信小商店可以幫助商家免開發、零成本、一鍵生成賣貨小程序。微信小商店團隊將負責商品發布、訂單管理、交易結算、物流售后、直播帶貨等技術和服務流程。

          微信小商店個人開店非常簡單,3秒搞定,毫不夸張,堪稱模板商終結者。個人開店僅需身份認證即可,綁定銀行卡可以提現,1個微信號僅支持開通1個個人主體的小商店。

          企業、個體工商戶需要上傳營業執照、經營者信息、結算銀行賬戶信息等基礎信息,1個微信號可以開通3個“企業和個體”主體的小商店。

          當前微信小商店現階段支持售賣的商品類目超過1500個,主要包括:寵物生活、家用電器、手機、通訊、數碼、電腦、辦公、服飾內衣等,后續可售品類會增多。

          如何開店

          1. 只需搜索小程序 小商店助手
          2. 進入后只需填入店名等極少量信息,選擇個人店鋪的話不需要上傳資質
          3. 點擊確認就能極速擁有自己的小程序店鋪啦!
          4. 麻麻再也不用擔心我被模板商折磨啦!

          小程序助手

          在 小商店助手 里面還能查看店鋪數據、在售商品新增商品、待付款商品訂單管理、客服管理店鋪設置 等,功能非常強大!

          小程序助手

          小程序助手

          小程序助手

          小程序助手

          上架新商品也是非常簡單快捷,直接上傳商品圖片,加上標題和一些描述信息就可以。

          而且不論是開店審核還是商品上架審核,都非常迅速,作者嘗試了幾次都在一分鐘左右就審核完了!

          需要注意的一點是微信會收 0.6% 的交易金額提成哦,畢竟此路他開此樹他栽樹嘛~

          小程序助手

          小程序助手藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          資深UI設計者

          項目背景

          站內攻略作為每年大促玩法的預告者,承擔了向用戶輸出平臺節奏、吸引用戶預約回流的重要任務。 不同于著眼于轉化的賣貨會場,或是著眼于分享的互動H5,如何能讓用戶更好地了解京東的大促平臺玩法,便捷用戶的購物旅程,就成為了它的主要任務。

          設計思路&設計執行

          1. 產品化思路與定位

          在開始設計之前,我們對比了2017年至今的所有攻略頁面,發現往年頁面存在缺乏延續性、定位不清晰的問題。作為大促信息傳達的先行軍,往期的攻略反而更多承擔了轉化型的會場類任務,對于優惠信息的預告往往是輕描淡寫地用文案帶過。而每一次的攻略樣式都是「船新版本」,也產生了較大的人力消耗。

          然而盡管攻略的任務是信息傳遞,但作為整體大促鏈路中的一環,它終究還是需要為大盤GMV服務。那么應該如何平衡二者,以達成更好的數據效果呢?

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          首先,從攻略存在的核心意義——助力集團大盤GMV的提升出發,它需要達成以下幾個目標:

          • 讓用戶愿意逛:讓用戶明白京東大促的節奏和玩法、并且在了解后有意愿參與;
          • 讓用戶愿意買:提供能提升用戶購物欲望的決策信息;
          • 讓用戶養成習慣:當攻略持續為用戶產生了用戶價值后,就可以養成用戶「來京東購物前先看攻略」的心智,從而更好地引導用戶進行操作。

          然而縱觀大促會場全局,許多賣貨會場也可以達成這些目標,那么站內攻略和它們相比有具有哪些差異性呢?我們可以從對內和對外兩個角度進行分析:

          對內差異化:從站內來看,「我的」和「AI助手」也都承擔了向用戶進行活動會場推薦的功能,但「我的」是圍繞用戶已有的操作展開管理和推薦,是絕對精準的量身打造,「AI助手」是理性層級下的導購,需要用戶先產生「想法」,再指導操作;站內攻略則是引導用戶未來行為的指導和說明,先組織、篩選促銷信息,再使用戶產生「想法」,從而產生操作,有一定「逛」的性質。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          對外差異化:從站外來看,站內攻略的定位與「什么值得買」有些近似。相比之下,站內攻略的優勢則在于它能更緊密地圍繞京東用戶的消費習慣進行定制化推薦,和近年來以長圖為主的阿里系攻略相比,則提供了更為豐富的操作(如預約),一定程度上能減少用戶的記憶成本。

          基于以上基礎,我們對往年攻略的用戶畫像進行分析,并對攻略進行了橫向與縱向的對比,總結出了攻略作為一個長線產品視角下的迭代思路,并根據攻略的特性制定了分時期的北極星指標:提升預熱、專場期的預約加購率、提升全時期的活動分流以及提升高潮期的商品轉化。那么我們又是如何根據這三個指標來拆解細分策略的呢?

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          2. 提升預約加購——日歷優化

          交互層面:動效輔助內容聚焦

          作為站內優惠信息的聚集地,如何清晰簡潔傳達內容,一直是交互側需要重點思考解決的難題。于是在本次攻略中,我們對比了往期攻略中的預告樣式,在數據表現較好的日歷樣式基礎上,對頁面的層級進行了進一步的簡化,配合動效的引導操作,以便用戶能夠更聚焦地瀏覽日歷部分的核心內容:

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          視覺層面:視覺層級清晰

          經過對交互稿的分析理解,以下3個痛點,對此次頁面的信息層級和畫面舒適度是一個考驗:

          • 內容信息較多:為了提升預約吸引力,這次在單日預告內露出了更多的BI單品,同時增加了預約瓜分京豆的玩法,所以這次首屏的內容信息和雙11相較而言,是有所增的。
          • 日歷展示狀態增加:日歷嘗試了新的交互樣式,有展開和收起兩種狀態。
          • 卡片顏色多:為了讓用戶感知到每日主題的差異,日歷卡片的顏色會根據每日主會場的主題顏色相呼應。

          那么如何通過視覺的手段,讓視覺層級清晰展示且畫面顏色和諧呢?下面從最基礎的視覺構成里的構圖和色彩兩方面進行分析并落地:

          「構 圖」整體用方形進行構圖和內容分割

          方形是最簡潔的幾何形態,對于信息量較大的頁面,方形會讓設計空間利用最大化,并且可以排除形態上的干擾,結構清晰的展示信息內容,讓用戶通順的瀏覽頁面。

          簡化視覺層級

          在交互稿上,瓜分京豆模塊和日歷選擇器兩部分內容劃分較為明顯,但所留出的空間,會增加視覺層級的復雜度。為了盡量簡化視覺層級,找交互同學商量是否可以在保持內容劃分清晰的情況下,把瓜分京豆模塊背景和日歷選擇器拉通,同時,也咨詢了前端同學,視覺這樣處理在實現上是否會有問題。最終,三方達成一致后,采用了視覺最終呈現的方案。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          「顏 色」

          為了更好的覆蓋618全時期,挑選了色環上三種距離基本相等的色彩進行從暖色到冷色的色相漸變。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          • 頭圖運用了較為清透的黃色至紅色的暖色漸變,適用于618全時期,體現了大促的熱鬧氛圍;
          • 頭圖過渡到日歷選擇器,則是運用了從頭圖的紅色漸變至紫藍色,這樣既能讓選擇器的文字信息清晰識別,也能將頭圖和日歷選擇器兩部分內容進行自然的分割,減少了線面分割所帶來的復雜層級關系;
          • 瓜分京豆模塊的顏色則選用了偏中性的黃色,這樣一來和每日不同顏色的卡片搭配和諧,二來和頭圖有所呼應,整體畫面色彩保持平衡。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          前端層面:復雜交互動畫與跨平臺功能適配

          關于選中移動動畫

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          日歷選中動畫部分我們需要實現的一種跟隨移動的效果,那么我們需要考慮的是在當前日期是有可能去到任何一個可點擊日期的位置。

          實現方式:

          用純css方式控制,方塊使用背景圖的方式實現,通過控制類名移動位置,比如.move-[start]-[end],缺點:需要寫好每個日期對應到其它日期的位置,不夠靈活

          用js控制。把日期看成一個棋盤格子,每個格子都占相同的坑位大小。我們把當前日期看作a,移動至日期看作b。假設把a移動至b的橫向占格子數設為n,把a移動至b的縱向占格子數設為m。那么n=當前下標 % 行個數,m=當前下標 / 行個數取整。那么a移動到b的x = w * n,y = h * m (w為格子寬度,h為格子高度)。

          注:寬度獲取使用block.getBoundingClientRect().width;clientWidth會忽略小數位

          • 關于展開收起動畫,半圓實現:
          • 可以使用clip-path
          • 我的實現方法為使用border-radius+height實現,半圓的弧度使用兩倍大圓取其部分圓弧顯示,展開收起實現使用高度修改:在低端機會略卡,因為每次使用會引起頁面重繪(有待探討優化)
          • 使用svg,canvas等
          • 關于app預約,小程序預約
          • app預約采用的是京東app日歷預約,用戶開啟手機日歷(寫入)權限后,預約就會寫入用戶的手機日歷,在活動開始前會以日歷提醒的方式提醒用戶。
          • 小程序預約走的是微信大賬號提醒流程,預約需要分三步進行:預約-> 授權 -> 上報授權狀態。進行完上述步驟后,用戶會在活動開始前10分鐘左右通過大賬號(已關注用戶)或服務通知(未關注用戶)收到消息

          2. 提升活動分流——福利秘籍

          提升篩選效率

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          福利秘籍專區作為大促期間福利互動活動的集中地,承擔了為互動分流,為用戶提供快速查找篩選可參與活動的任務。而互動往往存在較為復雜的規則,對用戶而言存在較高的理解成本。此次除了集團主推的互動,又增加了對于事業部互動的展示,對于保證頁面展示效率也帶來了一定的挑戰。通過對往期迭代內容進行數據對比,同時參考其余會場對于多信息展示的策略,最終我們采用了BI展示,同時對用戶弱相關的互動卡片進行折疊的方式提升頁面的效率;而在卡片的信息展示上,選擇重點突出活動可得的利益點,讓用戶一眼即可篩選出對自己最有價值的互動進行參與。

          視覺創新優化

          雖然運營同學對雙11的秘籍視覺比較認可,但是仍然提出了希望有秘籍形式感的同時,能進行視覺創新的訴求。經思考后,我認為運營的訴求無法滿足:

          • 視覺風格和618大促整體風格保持統一;
          • 能體現秘籍感的視覺表現手法有限;
          • 視覺創新的前提是要保證信息清晰的展示給用戶;

          于是帶著以上3點找運營同學再次溝通清楚對方的真正訴求到底是什么,經溝通,對方最重要的訴求是希望有視覺創新,秘籍形式感訴求較弱。接下來針對重要訴求集中發力,并結合此次618視覺概念(光點、光線),找到了視覺創新優化的解決方案,并和運營達成了一致。

          「構圖」

          上面提到了方形可以排除形態上的干擾,考慮到活動入口圖數量較多,且氛圍圖不可把控,左側以方形構成,右側結合了618主圖形——光線,把文字和氛圍圖分開,讓各部分信息更加聚焦。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          「顏色」

          結合雙11用研結論——活動入口主題不夠鮮明,除了活動文案類似的因素,我認為顏色也是影響因素之一。所以這次在上部分平臺級活動入口,采用了2種暖色的近似色交替構成,下部分事業部活動入口,統一采用了1種和上部分近似色的冷色構成;單個活動入口,文字和氛圍圖的背景進行統一色相的明暗深淺變化。從整體樓層來看,從上至下,由暖至冷,不僅活動主題有了明顯差異化,而且較好的過渡到下一樓層;從單個活動入口來看,左右深淺顏色的劃分,不僅對不可把控的氛圍圖適應性更強,且主題文案更加明顯。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          「表現形式」

          整體頁面在按鈕的部分采用新擬態風格,在保證吸引力的同時,也減少了顏色過多的問題,減少了信息層級。新擬態風格更適合工具功能類產品,本次只嘗試使用在了頁面的按鈕部分,風格上也會有眼前一亮的感覺。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          3. 提升商品轉化——今日導購

          分時期變化的樓層策略

          針對高潮期的轉化指標,我們參考了往期的迭代經驗,發現隨著大促節奏的漸進,臨近高潮期時,頁面的轉化模塊表現往往有較大的提升。于是在本次設計中,我們針對這個數據表現,對樓層順序進行了動態調整,高潮期將轉化樓層前置,以更好地匹配不同時期的用戶需求。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          同時根據往期的樓層數據表現,本次我們也延續保留了數據表現較好的模塊類型,例如增加了榜單的露出,以輔助頁面目標的達成(以下數據來自于lan.jd.com)。

          樓層整體化、內容吸引力包裝

          基于之前今日樓層視覺整體感較弱的問題,這次樓層背景色和頁面背景色有所區分,樓層內模塊顏色和樓層背景色同色,較往期此樓層來看更加整體化,又能讓頁面層級更加清晰。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          其中,針對這次品牌入口和上海美影廠IP形象結合的策略,為了提升用戶吸引力,且不干擾信息內容的前提下,視覺上采用了和用戶共情,且和IP形象契合的元素——老電視機,同時按鈕文案也進行場景契合的包裝,增加趣味性。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          項目成果

          與往期站內攻略對比,本次618站內攻略主要在以下方面有較為明顯的提升:

          品牌視覺契合及創新

          在延續主視覺元素的同時,視覺風格有所創新,在頁面的按鈕部分采用新擬態風格,減少顏色過多而導致的復雜信息層級問題,同時也保證了視覺吸引力

          視覺精致程度

          整體頁面顏色較有節奏,且更加清透舒適

          元素細節(打光、投影等)的刻畫更加精致

          信息層級清晰度

          通過對顏色的合理規劃,有主次的文字信息,讓單個樓層更整體化,各樓層模塊劃分清晰

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          數據表現

          根據上線后的表現,本次福利互動模塊的點擊數據獲得了顯著的提升,今日模塊的點擊轉化率相比往年也獲得了成倍的增長,頁面目標基本達成。

          項目沉淀

          1. 好的經驗

          針對攻略這類規律性存在的活動會場,我們可以針對其主要的功能組成模塊進行數據導向的設計與迭代,來更好地指導后續的優化方向;同時也可以輔助業務側更加清晰地規劃會場定位,提升頁面對用戶以及大促的整體價值。

          2. 如何溝通

          Q:需求方一味的追求熱鬧復雜的視覺樣式創新,該怎么辦?

          A:熱鬧的氛圍對于大促活動來說固然非常重要,但也要根據頁面類型去判斷(重氛圍or重信息)。設計師要傾聽訴求并搞清訴求的根本原因,并用專業的角度判斷訴求的合理性,以及價值大與否。熱鬧氛圍塑造的前提是不能影響信息的識別,否則就會本末倒置,并且熱鬧氛圍的視覺樣式要和該場景邏輯匹配 。

          3. 待優化項

          雖然本次頁面大部分模塊基于產品化的思路迭代均獲得了一定的正向反饋,但產品的發展往往是個曲折上升的過程,活動會場也不例外。結合上線后反饋,站內攻略依然有以下可優化點:

          日歷操作體驗

          根據用研結果顯示,日歷操作體驗問題反饋較多,日歷模塊為滑動改變日期,而非點擊跳轉日期的操作方式,與用戶的認知不符,且首屏動效較復雜,在安卓機型上體驗較為卡頓。后續如有同樣的交互方式,需優化操作體驗。

          福利互動入口主題文案

          根據用研反饋,主題文案描述不直觀,不易理解,導致用戶容易滑過整個模塊。建議后續活動主題能簡單清晰的描述優惠和玩法。

          綜上,未來站內攻略需要進一步探索主要功能模塊對用戶的價值,探索其在大促鏈路中獨特的差異性;同時保留高用戶價值模塊并持續優化,以求達到更好的用戶體驗,用設計策略為用戶與業務帶來更多的價值。

          文章來源:優設    作者:JellyDesign

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          版式設計-文字

          資深UI設計者

          今天的這篇文章也將圍繞著「文字」展開,相信大家看完后會對「文字」有一個全新的了解,也將明白文字對于版面的意義是巨大的,處理好它,基本上你的版面也就編排的差不多了。好了,下面我們開始今天的內容吧。

          高手的版式三部曲系列:文字篇

          首先來看幾張不同類型的海報,第一張文字占比較高,第二張圖片占比較高,第三張文字與圖片占比是五五開。

          然而不管是屬于哪種類型的,它們的核心目的都是在傳達信息。因為對于一張海報來說,我們不光會看還會去閱讀它們。

          高手的版式三部曲系列:文字篇

          平面設計就是通過文字來「說話」的。

          高手的版式三部曲系列:文字篇

          而在廣告設計中,圖片的占比會非常高,因為廣告多以圖片為主,通過圖片我們能大致的猜測出設計師想要表達的東西是什么。

          高手的版式三部曲系列:文字篇

          總結一下:廣告設計多以圖片為主,意在通過圖片傳達概念;而平面設計則多以文字或圖片為主,意在通過文字傳達信息。

          高手的版式三部曲系列:文字篇

          那么作為信息傳達的載體,字體就顯得格外重要了。下面我會從字體的分類、字體的搭配、字體的氣質與設置細節著手,慢慢帶領大家去認識字體,首先我們來看看字體的分類都有哪些。

          高手的版式三部曲系列:文字篇

          中文字體大致可分為:黑體、宋體、圓體、書法體與卡通體等。

          高手的版式三部曲系列:文字篇

          其中書法體又細分為:楷書、行書、草書與隸書等。

          高手的版式三部曲系列:文字篇

          在列舉的這些字體中,最常用就是:黑體、宋體和圓體,而在書法體中,最常用的是楷書與行書。為什么說這些字體常用呢?因為在許多優秀的設計作品中,這些字體的出現概率都非常高,尤其是黑體與宋體。

          高手的版式三部曲系列:文字篇

          下面說一下英文字體,大致可以分為:襯線體、無襯線體、手寫體與展示字型等。

          高手的版式三部曲系列:文字篇

          其中最常用的就是:襯線體與無襯線體。理由與中文一樣,它們也是使用率很高的字體,其次還有一個原因就是在以中文為主的設計中,它們與中文字體搭配起來比較契合。

          高手的版式三部曲系列:文字篇

          拿黑體來說,與之搭配的英文字體就是無襯線體,因為它們的筆畫特征相似度很高。

          高手的版式三部曲系列:文字篇

          宋體搭配的就是襯線體,因為宋體的筆畫特征是有粗細變化且有裝飾線,而英文的襯線體也剛好有與之相似的地方。

          高手的版式三部曲系列:文字篇

          而圓體則是搭配擁有相似特征的無襯線體。

          高手的版式三部曲系列:文字篇

          因為常用的書法體通常使用毛筆書寫,所以在筆畫特征上沒有與之相匹配的英文字體,大多數時候我們會選擇用襯線體來搭配,具體原因我會在后面的字體氣質環節為大家講解。

          高手的版式三部曲系列:文字篇

          雖然也有別的搭配方式存在,但我給大家提供的這些都是最常用和最安全的。說完字體搭配問題后,下面我們來看看這些字體,所包含的氣質又有哪些。

          高手的版式三部曲系列:文字篇

          首先是黑體,它具有科技感與現代感,這是由它簡潔干練的筆畫特征決定的。

          高手的版式三部曲系列:文字篇

          其次黑體也能表現出運動與時尚的感覺,因為運動與時尚本就是偏現代的詞匯。

          高手的版式三部曲系列:文字篇

          接著是宋體,它具有文化與歷史的氣質,這個比較好理解。

          高手的版式三部曲系列:文字篇

          而除了能表現出歷史與文化感之外,宋體還能表現出清新與雅致的感覺,這是由宋體的筆畫特征決定的,橫細豎粗且末端帶有裝飾,與優雅精致的感覺十分契合。

          高手的版式三部曲系列:文字篇

          圓體的特點也是非常明顯的,在看到它時腦海中的第一印象就是可愛與卡通。

          高手的版式三部曲系列:文字篇

          除了刻板印象外,圓體那種圓滾滾的筆畫給我們的感覺還有安全和易親近,所以圓體也能用來表現兒童與溫暖感覺的題材。

          高手的版式三部曲系列:文字篇

          一說到書法體,能直接聯想到的關鍵詞就是傳統與歷史,因為書法的演變就是我們漢字發展的軌跡。然后我們回過頭來講一下,為什么書法體可以和西文中的襯線體搭配。

          高手的版式三部曲系列:文字篇

          原因就在于襯線體也具備書法體的某些氣質,比如傳統、文化、歷史等。與書法體在早期的東方一樣,襯線體在早期的西方也是主要的字體之一。

          高手的版式三部曲系列:文字篇

          溫暖、人情味兒,說到書法體可能很難聯想到這兩個詞,但是書法體確實具備這種氣質。跟黑體這種棱角分明的字體相比,書法體是手寫出來的,它的筆畫特征給我們的感覺就是有「溫度」的。

          高手的版式三部曲系列:文字篇

          在字符面板中,除了選擇字體與改變字號以外,這兩個區域相信大家用的還是比較多的,它們分別是:行距設置與字距設置。

          高手的版式三部曲系列:文字篇

          拿行距來說,在使用時有幾個比較常用的設置方法,比如用當前文字的字號乘以1.2、1.732或是2。不過,通過這個方法所算出來的數值只是一個參考,也就是說你可以在這個基礎上做些調整。

          高手的版式三部曲系列:文字篇

          比如:在計算出的數值的基礎上進行遞增或是遞減,這時你要做的就是用眼睛去觀察,覺得大了就減少一些,覺得小了就增大一些。

          高手的版式三部曲系列:文字篇

          其中,用字號乘以1.2適用于標題。

          高手的版式三部曲系列:文字篇

          比如上方那個標題的字號是40pt,那么行距的數值就是用40乘以1.2等于48。下方這個是在此基礎上做的一個調整,稍微增大了一些行距。

          高手的版式三部曲系列:文字篇

          字號乘以1.2適用于標題,而用字號乘以1.732或2則更適用于小字號的文字,比如內文。

          高手的版式三部曲系列:文字篇

          上方是用字號乘以1.732的例子,字號是9pt,用它乘以1.732得出來的數值是15.588,四舍五入取個整數得到的行距就是16,下方這個是用字號乘以2得到的效果。

          高手的版式三部曲系列:文字篇

          大多數情況下我建議大家用字號乘以1.732的行距,大小比較適中。

          高手的版式三部曲系列:文字篇

          跟行距不同的是,基本上來說字距是無需調整的。當然還是那句話,要靠自己的眼睛來衡量,如果你覺得字與字之間離的很近的話,那么可以增大一些字距,反之,則可以減小一些。

          高手的版式三部曲系列:文字篇

          高手的版式三部曲系列:文字篇

          其次就是,當你遇到一些偏輕松慢節奏的設計,比如典雅清新類的文學小說時,就可以適當的增加一些字距來營造這個感覺。

          比如這兩張海報,左邊的是經典的居中結構,右邊的是包圍結構,構圖都是可以的沒有任何問題,但為什么看起來還是怪怪的呢?因為文字組沒有刻畫好。

          為了讓大家能更深刻地體會到文字組對于版面的意義,修改了這兩張海報,其中構圖不變只改文字組。

          高手的版式三部曲系列:文字篇

          這個修改前后的對比還是非常直觀的,可見文字組對版面的影響有多大。如果說構圖是版面的骨架的話,那么文字組就是版面的五官,骨架再好五官不行結果也是可想而之的。

          高手的版式三部曲系列:文字篇

          文字組分為:左對齊、居中對齊、頂對齊以及兩端對齊。

          高手的版式三部曲系列:文字篇

          其中與左對齊與頂對齊對應的有:右對齊與底對齊。

          高手的版式三部曲系列:文字篇

          給大家找了一些各種對齊方式的案例。這是左對齊的形式。

          高手的版式三部曲系列:文字篇

          這是右對齊的形式,與左對齊相比右對齊屬于不常用的對齊方式,主要是出于易讀性的考慮,但并不是說不能用。

          高手的版式三部曲系列:文字篇

          這是居中對齊的形式,最經典的對齊方式之一。

          高手的版式三部曲系列:文字篇

          這是頂對齊的形式,是文字豎排時最常用的對齊方式。

          高手的版式三部曲系列:文字篇

          這是底對齊的形式,跟頂對齊相比也是屬于不常用的對齊方式。

          高手的版式三部曲系列:文字篇

          最后是兩端對齊的形式,橫排與豎排都可以使用這種對齊方式。

          高手的版式三部曲系列:文字篇

          如果作品看得足夠多,應該見過這種形式的組合,它同時包含了多種不同對齊方式,我們稱其為「對齊組合」。

          高手的版式三部曲系列:文字篇

          比如我們可以借鑒結構,以這個文字組為例,它的結構是這樣的:兩端對齊、中間的文字字號大,上下的文字字號小,按照這個套路我們來試著做一個組合。

          高手的版式三部曲系列:文字篇

          在編排前,我們先閱讀一下文案,通過文字可以得知,這是一個與籃球明星有關的內容,氣質上來說會偏現代一些。

          高手的版式三部曲系列:文字篇

          所以字體可以選擇一款黑體,英文部分則搭配一款無襯線體。

          高手的版式三部曲系列:文字篇

          根據之前總結到的這些特征,下面就可以開始編排文字了。

          高手的版式三部曲系列:文字篇

          按照那個組合的套路,我們先將兩端對齊中較大字號的文字給編排出來,而標題信息無疑是非常適合用來放大的。

          高手的版式三部曲系列:文字篇

          接著再將上方和下方的小字號文字給編排出來。

          高手的版式三部曲系列:文字篇

          其中要注意的就是這段文字的行距,我參考了logo的高度來進行設置。而整個組合中,字距是基本沒有進行調整的。

          高手的版式三部曲系列:文字篇

          值得一提的是,在兩端對齊的文字組中,這種小大小的形式非常好用。因為它的節奏變化豐富,所以大家在做兩端對齊的文字組時不妨試試。

          高手的版式三部曲系列:文字篇

          這就是借鑒結構的效果了,精髓在于要多去分析別人的形式與套路,并從中獲取做組合的靈感。除了能借鑒結構之外,我們還可以借鑒標題字數+結構,是什么意思呢?

          高手的版式三部曲系列:文字篇

          以這個組合為例,它的標題有7個字,整個組合是由頂對齊與兩端對齊構成的一個對齊組合。

          高手的版式三部曲系列:文字篇

          它的組合結構為小中大,按照這些特點我們來嘗試借鑒。

          高手的版式三部曲系列:文字篇

          這是要用到的文案信息,通過閱讀文案可以得知,這是一個關于炸雞套餐的內容。

          高手的版式三部曲系列:文字篇

          通過去看kfc的各種物料,發現運用黑體的場景還是比較多的。

          高手的版式三部曲系列:文字篇

          所以,在字體搭配上選擇用黑體與無襯線體。

          高手的版式三部曲系列:文字篇

          根據之前總結到的這些特征,下面就可以開始編排文字了。

          高手的版式三部曲系列:文字篇

          按照小中大的特點,依次將信息給編排出來。

          高手的版式三部曲系列:文字篇

          完成后可以在組與組之間,添加一根小線段用于連接,以起到過度的作用,如果大家現在回過頭去看原圖的話,也能發現這一特征。

          高手的版式三部曲系列:文字篇

          其中,標題的行距就是用標題的字號乘以1.2算出來的。

          高手的版式三部曲系列:文字篇

          字距我也做了調整,因為默認0的字距看上去有些擁擠。

          高手的版式三部曲系列:文字篇

          可以看出跟原圖相比,在不破壞組合結構的情況下,針對文字信息的編排是做了些調整的,比如:原稿最左側是兩行頂對齊的小文字,在借鑒時將它換成了logo,因為我們是要借鑒它的結構,而不是為了跟原稿做的一模一樣,具體還是要根據我們的內容來合理編排。

          高手的版式三部曲系列:文字篇

          首先我們來看這張圖,一個標準的兩端對齊、組合結構與之前那個是一樣的,中間的字號大,上下的字號小。

          高手的版式三部曲系列:文字篇

          除去這些外還有一個小特征就是,在大字號中間還有一層小字號的文字。

          高手的版式三部曲系列:文字篇

          接著我們再來看這張圖,它的特點就是圖片疊壓在了文字的上方。至于它的結構我們可以不用考慮,因為結構已經找好借鑒了。

          高手的版式三部曲系列:文字篇

          這是要用到的文案與圖片。通過文字可以得知,這是一個關于介紹昆蟲的圖書,且配有一張插圖。這個插圖的風格是手繪形的,偏寫實一些沒有那么的卡通。

          高手的版式三部曲系列:文字篇

          結合這些特點我選擇的字體搭配方式是,宋體配襯線體。

          高手的版式三部曲系列:文字篇

          因為字體搭配這部分我又借鑒了一些相關風格的書,發現它們的字體搭配方式用宋體比較多。

          高手的版式三部曲系列:文字篇

          分析完文案找到字體搭配方式后,在結合之前總結的一些組合特征,我們就可以開始編排了。

          高手的版式三部曲系列:文字篇

          先將中間比較大的那層文字給編排出來,然后在它中間處置入一個小字號的文字。

          高手的版式三部曲系列:文字篇

          中間層編排完成后再來編排上下層的文字,字號不用太大,整體注意好兩端對齊。

          高手的版式三部曲系列:文字篇

          調整字距的地方有兩處,首先是標題,調整的原因在于默認值我覺得有些小了,其次是標題中間的那行文字,調整它的原因在于不想字號放太大。

          高手的版式三部曲系列:文字篇

          因為是兩端對齊的結構,不調整字距的話。標題中間那行文字只能通過放大字號來達到目,然而這個效果并不是我想要的。

          高手的版式三部曲系列:文字篇

          綜合考慮,選擇了這個,最后,把圖片置入進去疊壓在文字的上方。

          高手的版式三部曲系列:文字篇

          圖疊壓在文字上有一個無法避免的問題就是,被壓住的文字會出現無法識別的情況,英文還好但是中文卻不行,因為在這個組合中,中文是用來閱讀的文字,英文僅充當裝飾用。

          高手的版式三部曲系列:文字篇

          既然中文是重要的信息,那為什么還要去遮擋它呢?因為有提示,通過這兩個字你也能猜出來被壓住的文字是什么。

          高手的版式三部曲系列:文字篇

          這就是借鑒結構+表現手法的例子,多一張圖片的加入,混合借鑒后的效果與原稿的相似度就會降低。

          高手的版式三部曲系列:文字篇

          下面我們來看這張圖,它既有頂對齊又有兩端對齊的感覺,像這種組合我將它稱為頂部兩端對齊。

          高手的版式三部曲系列:文字篇

          它的組合結構也是一個小大小的形式。

          高手的版式三部曲系列:文字篇

          分析完上一個組合后,再來看看這個組合,值得借鑒的地方有兩處,首先就是整體的結構,其次就是字體搭配。由于已經借鑒了上一個組合的結構,所以這個組合要借鑒的就是字體搭配。

          高手的版式三部曲系列:文字篇

          在原圖的這個字體搭配中,英文是最好判斷的,這個字體是襯線體,中文則比較陌生了,既不像黑體也不像宋體。

          高手的版式三部曲系列:文字篇

          感覺是被設計過的,不像是字庫里的字體,我通過觀察發現,它既有宋體橫細豎粗的筆畫感覺,又有黑體干凈利落的特征。

          高手的版式三部曲系列:文字篇

          所以,我在字庫字體中找到了一款具有類似感覺的字體:姚體。

          高手的版式三部曲系列:文字篇

          在字體搭配上選擇用姚體搭配襯線體。這里需要強調的一點是,在挑選字體借鑒的過程中已經考慮到了與文案的氣質相匹配的問題,下面我們就來看看文案。

          高手的版式三部曲系列:文字篇

          標題叫「遇見你之前」,給人的感覺比較文藝,而姚體我們前面也分析過了,它是具有宋體特征的,而且筆畫細長,整體給人的感覺就是比較文藝的。

          高手的版式三部曲系列:文字篇

          分析完成后,結合之前總結的組合特點就可以開始編排了。

          高手的版式三部曲系列:文字篇

          第一步,還是按照小大小的感覺將組合給編排出來,注意好頂部兩端對齊。

          高手的版式三部曲系列:文字篇

          接著在組與組的縫隙處加入線條就完成了。

          高手的版式三部曲系列:文字篇

          在這個組合中標題的行距與字距,默認狀態下是左邊這樣的,字距還好,行距卻非常大,這個時候你就不能套用之前講到的倍數去算行距了。那樣行距只會越來越大,所以這里我們要根據視覺效果來調整。

          高手的版式三部曲系列:文字篇

          這樣,一個借鑒結構+字體搭配的例子就完成了。

          高手的版式三部曲系列:文字篇

          這是要用到的文案與圖片素材,首先,老規矩分析一下文案,選擇與之契合字體。書名叫《流星之絆》,還是比較文藝的。

          高手的版式三部曲系列:文字篇

          根據這個書名,搜索了一下原書的樣子,在這三個不同的版本中,所感受到的氣質有:溫情和雅致,在字體的選擇上與之較為契合的有:書法體與宋體,這兩個字體的選擇在這三個不同的原版本中也都有體現。

          高手的版式三部曲系列:文字篇

          打算用宋體,與其搭配的英文首選就是襯線體了。

          高手的版式三部曲系列:文字篇

          這是第一個要借鑒的對象,可能有人會說這不像文字組,這確實不是文字組,但并不代表它不能被聯想成文字組。

          高手的版式三部曲系列:文字篇

          高手的版式三部曲系列:文字篇

          比如它的結構是由一個頂對齊與一個左對齊構成的對齊組合,而且下方的那個左對齊文字是放在了頂對齊的負空間處的。

          高手的版式三部曲系列:文字篇

          其次,頂對齊的文字字號較大,下方左對齊的文字字號較小。

          高手的版式三部曲系列:文字篇

          這就是根據那張圖所總結出的一些組合特征,下面我們就根據這些特征來編排文字。

          高手的版式三部曲系列:文字篇

          先排出頂對齊的文字,然后在其負空間處置入左對齊的文字信息。

          高手的版式三部曲系列:文字篇

          排到這發現右下角還有塊小缺口,既然是要做一個對齊組合的話,那么就要把它填滿。

          高手的版式三部曲系列:文字篇

          關于頂對齊的中間部分為什么要這么做,是因為標題的字數不足以作出頂對齊的感覺,為了解決這個問題,選擇重復了一次標題并且將它的筆畫打散了,而打散的靈感來源于「流星」,它們就像流星一樣散布在天空中,不知道什么時候就會掉落下來。到這為止是書封的上半部分,下面我們來編排下半部分。

          高手的版式三部曲系列:文字篇

          這是要用到的借鑒圖,它也是一個由頂對齊與左對齊構成的對齊組合。

          高手的版式三部曲系列:文字篇

          除了這個外它頂對齊部分的文字跟左對齊的比,也是屬于較大的。

          高手的版式三部曲系列:文字篇

          這是從那個組合中,總結出的組合特征,與上一個幾乎一樣。

          高手的版式三部曲系列:文字篇

          按照總結出的組合特征,將文字給編排出來。

          高手的版式三部曲系列:文字篇

          其中頂對齊與這段左對齊的文字,它們的行距是用字號乘以1.732算出來的,字距則是做了些微調整,因為當文字縮小后,它的字距在視覺上看著也會變小,所以我在默認0的基礎上將字距增加到了50。

          高手的版式三部曲系列:文字篇

          這就是根據那兩張圖片所借鑒出來的文字組了,下面把它們置入進版面中。

          高手的版式三部曲系列:文字篇

          整體是一個上下結構的,這種類型在構圖中屬于上下構圖。這也是為什么會找那兩張圖來當參考的原因,因為提前已經考慮好了構圖。

          高手的版式三部曲系列:文字篇

          接下來做烘托氛圍的工作,先把底色換成夜空的黑色,然后配上圖片。

          高手的版式三部曲系列:文字篇

          接著更換字體的色彩恢復識別性,其中黃色的部分是為了與白色部分做區分。

          高手的版式三部曲系列:文字篇

          然后給腰封換上色彩以恢復下方的文字的識別性,再挑選一些信息,在它們的下方配上黃色,目的是為了與上方的色彩做呼應。

          高手的版式三部曲系列:文字篇

          最后,將書脊編排出來,這個案例就編排完成了。

          高手的版式三部曲系列:文字篇

          以上就是版式三部曲之文字篇的所有內容了,回顧一下,由兩個部分組成。第一部分是:字體的分類、字體的搭配、字體的氣質與設置細節。具體包括:字體有哪些不同的類型、在選中字體的類型后,要如何選擇與之搭配的英文字體。字體氣質主要講的是,不同類型的字體都有哪些味道,它的意義在于當你確定好項目的風格后,可以根據不同字體的氣質,快速的找到與項目定位契合的字體。

          文章來源:優設    作者:研習設

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          「上下構圖」的排版技巧

          資深UI設計者

          構圖是在有限的空間內把文字、色彩、圖形等元素結合起來構成畫面,使作品不僅具有美感,還能清晰表達設計者的目的。不同構圖能使畫面產生不同的視覺變化,進而給觀者帶來不同的心理感受。同的心理感受。本期分享的是上下構圖的使用方法,此構圖形式具有良好的視覺效果,也比較容易掌握,是非常實用的構圖方式。

          什么是上下構圖

          上下構圖形式是將版面分割為上下兩部分,或讓畫面中的元素整體呈現出上下的分布趨勢,主空間承載視覺點,次空間承載閱讀信息,呈現的視覺效果平衡而穩定。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          最典型的上下構圖由「上圖下字」或者「上字下圖」兩部分構成,圖片及文字各占據一部分,互不干預,能清晰明了的傳達出版面的信息。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          主空間還經常使用圖形化的標題文字充當畫面主體,可以很好解決畫面缺少圖片層級的問題。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          上下構圖空間劃分比較固定,為了得到豐富的視覺效果和良好的設計感,需要通過精心設計的編排來豐富版面的視覺效果。比如文字的橫豎排版,元素之間的對比、點線面的運用、巧妙的留白等。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          構圖比例

          進行上下構圖設計時,可以根據版面內容的信息體量劃分畫面的空間,常用的版面分割比例有:1:1、1:1.618、1:1.414、1:2、1:3等。在設計時也可以反復進行調整,直到找到最為合適的構圖比例。

          1. 1:1分割

          把畫面平分為上下兩部分,形成對稱均衡的分割構成。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          1:1分割比例構成方式,多用于版面中兩部分內容處于并列或對立的關系。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          2. 黃金分割

          「黃金分割比例(1:1.618)」被認為是最具美感的分割比例,具有嚴謹的藝術性、和諧性,蘊藏著豐富的美學價值。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          在設計中有意識地運用黃金分割比例進行設計,可以營造出富有美感的版式效果。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          3. 白銀分割

          「白銀分割比例(1:1.414)」是日本率先采用的一種分割比例,目前廣泛運用在版式設計的布局中。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          與黃金分割相比,白銀分割次空間占據的比例更大一些,能夠承載的信息量也更多。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          4. 2:1分割

          采用2:1的比例,圖片主體在畫面中占據主導地位,視覺焦點更清晰。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          主要的信息(標題)常融入圖片中放在主空間成為畫面主體,閱讀性文字則放在次空間。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          5. 3:1分割

          3:1分割的比例與2:1比例相似,但圖片在畫面中占據主導地位更強,主空間承載視覺點,次空間承載閱讀信息。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          用超多案例,幫你掌握「上下構圖」的排版技巧

          通過比例,可以讓版面分割更嚴謹。但沒有那個比例關系絕對正確,需要根據畫面的項目調性、信息體量、信息功能與圖文主體而定。如使用其它比例分割的優秀案例:

          用超多案例,幫你掌握「上下構圖」的排版技巧

          空間調整

          把圖文按比例分別編排在版面上下方,是比較嚴謹規范的構圖方式,但是為了避免版面的呆板,可以通過調整版面空間變換出多種編排形式。如以下幾個案例:

          縮小圖片和文字空間,使留白處形成外空間,增加層次感。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          在背景(繪畫作品)上重新劃出新的空間,形成內外空間對比,既豐富了畫面層次,又讓版面變得生動有趣。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          通過圖片文字的錯位排版和負空間的巧妙留白,讓原本呆板的上下構圖變得靈活多變,充滿個性。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          讓圖片位置重心偏移,打破均衡穩定的構圖形式。標題的破圖處理,也增加了版面的靈活性與豐富性。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          在上方空間上劃分出新的空間,這樣的手法可以很好讓空間具有多變性,也可以讓我們的設計更加靈動。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          靈活運用

          上下構圖的框架看似比較固定,但是也能通過設計手法,變換出多種編排形式,巧妙破除上下分割的單一性與呆板感。

          1. 曲線分割

          把生硬的直線改為呈現出動態的曲線或斜線進行畫面的分割,版面顯得更生動活潑。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          用超多案例,幫你掌握「上下構圖」的排版技巧

          2. 圖片裁切

          把方形圖片裁切為其他形狀,使上下構圖沒有明顯的分割線,也可以呈現出良好的視覺效果。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          3. 文字破圖

          使用文字串聯起上下兩個空間,破除上下構圖版面的單一性。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          4. 元素串聯

          利用圖形、色塊等元素串聯空間,讓主次空間建立起聯系,具有豐富的視覺效果和良好的設計感。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          用超多案例,幫你掌握「上下構圖」的排版技巧

          5. 圖片退底

          把圖片主體進行退底處理,重新營造場景,弱化空間的分區。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          用超多案例,幫你掌握「上下構圖」的排版技巧

          用超多案例,幫你掌握「上下構圖」的排版技巧

          6. 空間留白

          使用留白破除兩個空間的間隙,拉開畫面的空間感,具有良好的視覺效果。

          用超多案例,幫你掌握「上下構圖」的排版技巧

          用超多案例,幫你掌握「上下構圖」的排版技巧

          用超多案例,幫你掌握「上下構圖」的排版技巧

          總結

          • 上下構圖是將版面分割為上下兩部分,或讓畫面中的元素整體呈現出上下的分布趨勢,主空間承載視覺點,次空間承載閱讀信息,呈現的視覺效果平衡而穩定,是非常實用的構圖方式;
          • 進行上下構圖設計時,可以根據版面內容的信息體量劃分畫面的空間,常用的版面分割比例有:1:1、1:1.618、1:1.414、1:2、1:3等;
          • 為了避免版面的呆板,可以通過調整版面空間變換出多種編排形式;
          • 可以通過曲線分割、圖片裁切、文字破圖、元素串聯、圖片退底、空間留白等手法,變換出多種編排形式,巧妙破除上下分割的單一性與呆板感。
          文章來源:優設    作者:藝海拾貝Design

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合