<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>

          首頁

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

          seo達人

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

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

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

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

          如何開店

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

          小程序助手

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

          小程序助手

          小程序助手

          小程序助手

          小程序助手

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

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

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

          小程序助手

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

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

          濤濤

          項目背景

          站內攻略作為每年大促玩法的預告者,承擔了向用戶輸出平臺節奏、吸引用戶預約回流的重要任務。 不同于著眼于轉化的賣貨會場,或是著眼于分享的互動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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          版式設計-文字

          濤濤

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          拿行距來說,在使用時有幾個比較常用的設置方法,比如用當前文字的字號乘以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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          「上下構圖」的排版技巧

          濤濤

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

          什么是上下構圖

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

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

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

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

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

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

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

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

          構圖比例

          進行上下構圖設計時,可以根據版面內容的信息體量劃分畫面的空間,常用的版面分割比例有: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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          用一篇文章,幫你看懂網頁響應式布局原理

          濤濤


          今天分享一個很多設計師頭疼已久的問題,關于網頁響應式布局原理和設計方法。文章主要包含三個部分:

          • 響應式頁面是什么
          • 響應式布局的規則
          • 響應式的設計流程

          所以廢話不多說,我們直接進入正題吧!

          響應式頁面是什么

          在過去,網站通常就是為了電腦大屏幕展示而設計,如果用手機訪問,只能在巴掌大的屏幕里看縮小版的頁面。雖然還有手機專供的 WAP 頁面,但因為太簡陋也無濟于事。

          用一篇文章,幫你看懂網頁響應式布局原理

          隨著智能手機、3G、4G、HTML5 的普及,使用手機訪問網站的人越來越多,為了讓用戶在手機上看到更合適的布局,且兼顧開發的效率,響應式的概念就被提出了。

          通俗解釋,就是通過一套代碼,可以無縫匹配符合電腦、平板、手機預覽效果的前端技術。比如下方 Nike 官網,就是應用了響應式設計后在不同客戶端、分辨率下的效果。

          用一篇文章,幫你看懂網頁響應式布局原理

          雖然響應式的應用越來越廣泛,但是從零開始去寫一個響應式效果的網站對于程序員來講是非常復雜的,因為當中包含了大量的邏輯、判斷、適配內容。

          所以,今天市面上看見的響應式網站,多數使用了一些開源的代碼或者框架。而應用最廣泛的,就數 Bootstrap 了。

          用一篇文章,幫你看懂網頁響應式布局原理

          之所以提這個,是因為既然開發使用了別人寫的框架,那么對于我們的設計稿也就上了緊箍咒,我們需要根據框架的要求來設計界面,這會稍后具體解釋。

          還有個問題,就是為了實現平板、手機和電腦不同的預覽效果,并不是只有響應式布局一種技術,還有另一種技術 —— 自適應。

          通俗點說,自適應就是為不同客戶端分別提供一套獨立的前端代碼,和響應式使用一套代碼適配多種客戶端不同。

          響應式適合應用在一些簡單的官網、展示類頁面,展示的內容大致相同。而自適應適合應用在需要在不同客戶端類型有較大差異的網站,這樣只使用一套前端代碼就完全行不通了。

          比如愛奇藝的官網,為了符合用戶體驗,在移動端網頁布局中精簡替換了大量的內容,和電腦版已經沒有太直接的聯系了。

          用一篇文章,幫你看懂網頁響應式布局原理

          兩種做法并沒有好壞之分,只有適不適合項目之別。了解了它們的不同,我們就可以進一步學習響應式的規則了。

          響應式布局的規則

          響應式布局的規則并不是特別復雜,只要注意兩個問題:

          • 分段響應規則
          • 組件寬度適應

          1. 分段響應規則

          敲黑板,響應式的響應,面向的核心對象是瀏覽器窗口的寬度,而不是設備類型。所以打開使用響應式的網站,我們通過改變瀏覽器的寬度,就可以看見不同的展示效果,比如下圖的星巴克官網。

          用一篇文章,幫你看懂網頁響應式布局原理

          我們可以發現,瀏覽器寬度每達到一個數值(Breakpoint)的時候,頁面的排版和樣式就會發生明顯的變化,而這就是響應式設計最重要的功能 —— 分段展示。

          用一篇文章,幫你看懂網頁響應式布局原理

          也就是說,響應式規則就是為頁面分配不同的寬度區間,每個區間有各自展示的樣式,用來應對不同的場景和設備類型,常見的適配區間大致如下:

          包含圖片截圖 320-800 :移動端收集屏幕 800-1200:平板或上網本屏幕 1200-無窮:一般的電腦顯示器

          面對分段式的布局、樣式變更,我們就要關注到底發生了哪些變化。總結起來,可以簡單的歸納成三種組件的調整:內容增減、布局調整、樣式調整。

          第一種,內容增減。即部分模塊在不同的分段內會有顯示和隱藏的狀態,尤其是一些網頁端的內容覺得在小屏幕上展示會太多了,就在小屏幕場景中隱藏掉。

          用一篇文章,幫你看懂網頁響應式布局原理

          第二種,布局調整。主要是模塊的排列和順序發生變化,常見的就是模塊一行的列數發生改變。

          用一篇文章,幫你看懂網頁響應式布局原理

          第三種,樣式變更。即針對不同的分段設計完全不一樣的樣式,最多應用在導航欄的設計中,會為最小的分段使用 iOS 的 Tabbar 或安卓的 Menu 樣式。

          用一篇文章,幫你看懂網頁響應式布局原理

          所以,歸納起來,就是頁面針對不同的分段展示不同的結果,即頁面中的組件觸發了對應的變化類型。每個組件都可以應用不同的變化類型,而無需進行統一。

          2. 組件寬度適應

          分段式響應,是響應式布局的第一層邏輯。而在觸發關鍵值(Breakpoint) 之間的區間,我們拖動窗口的寬度,會發現組件的寬度也隨之改動,這就是 —— 組件寬度適應。

          組件寬度適應在手機 UI 的適配中非常重要,即完成不同屏幕寬的手機適配所應用的邏輯,所下面我們簡單講講它的規則。

          組件的寬度適應模式主要有兩種類型,一種是容器寬度適應,一種是容器比例縮放,比如下面的圖例。

          用一篇文章,幫你看懂網頁響應式布局原理

          用一篇文章,幫你看懂網頁響應式布局原理

          容器是一個比較抽象的概念,類似設計軟件中的編組,它集合了所有下級元素,但本身并沒有實際的內容和樣式。在響應式規則中,下級元素并不會和這個容器等比變動,出現下面這種錯誤的效果。

          用一篇文章,幫你看懂網頁響應式布局原理

          正確做法是會定義下級元素針對父容器的響應方法,做到容器變更的同時其自身的顯示也是合理的。比如相對容器左右間距一致、對齊方向一致、尺寸固定等設置。

          用一篇文章,幫你看懂網頁響應式布局原理

          而這種規則的設置,就是 Sketch/Figma/XD 中的響應式設置功能。只要設置得當,就可以獲得一樣的寬度適應效果。

          用一篇文章,幫你看懂網頁響應式布局原理

          如果對軟件響應式功能了解不全面的同學,就可以自己多搜索一下對應的說明,我就不在這里過多的展開了。

          再總結一下,響應式的規則就是頁面組件先遵循當前分段展示的布局效果,并在這個區間內支持小范圍寬度的變更和適應。

          響應式的設計流程

          響應式設計是一種源自技術的概念,而不是單純的設計風格、方法,所以設計響應式設計其實就是 「面向編程設計」。

          設計界面要吻合編程的真實方法和需求,而不是根據我們想怎么做就怎么做,所以整個流程不能只站在設計師自身的角度考慮,而要和前端程序員緊密溝通,首先確定響應幾個寬度區間,以及它們對應的數值分別是多少。

          然后我們就要完成對應數量頁面的設計,因為前面我們說過,分段響應規則中會有明顯的樣式變動,這就要求設計師是一定要給出設計示例的,而不能依靠口頭描述或程序員自由發揮。

          用一篇文章,幫你看懂網頁響應式布局原理

          完成這些設計稿以后,我們再進一步確定同一個區間內,組件的寬度適應規則是什么樣的。多數情況下,這個階段使用口述就可以,如果規則比較多,那么就可以在標注階段把你要實現的效果記錄上去即可。

          全部設計稿和規則都溝通完畢以后,才進入切圖導出的階段。要提醒一次,在一些特殊的情況下,響應式的背景切圖會和普通頁面的背景切法不一樣,盡可能讓前端程序員檢查一遍導出的文件。

          只要根據上述的流程,在遇到不確定或者不清楚的情況,就和前端程序員做溝通,那么很快就可以將項目輸出出來。

          結尾

          響應式這個概念雖然高大上,但并不是任何項目都要無腦往上套的。因為框架規則上的限制,導致我們很難在響應式頁面中使用一些特別復雜、高級的視覺樣式,導致最終呈現的效果往往非常簡單或者過度依賴圖片的質量。

          所以,如果在功能較為復雜或需要復雜視覺支撐的網頁中,就可以選擇應用固定頁面內容寬度的設計來完成。

          文章來源:優設    作者:超人的電話亭

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


          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          濤濤

          大部分電商詳情頁教程都著重教你如何做好首焦圖,「產品參數模塊」這個部分則鮮有人提。今天這篇教程,用超多案例,幫你掌握「產品參數模塊」的設計方法。

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?
          文章來源:優設    作者:美工美邦

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


          微信小程序發送訂閱消息(之前是模板消息)

          seo達人

          之前的模板消息已經廢棄,現在改為訂閱消息,訂閱消息發布前,需要用戶確認后才能接收訂閱消息。


          image


          小程序端

          index.wxml


          <button bindtap="send">發送訂閱消息</button>

          index.js


          const app = getApp()

          Page({ data: {

           }, send:function(){

             wx.requestSubscribeMessage({ tmplIds: ['WZiCliW1zVtHXqX7dGnFNmFvxhW-wd9S_W4WfrwNvss'],


          success:(res)=> { // 在登錄的時候,獲取到的openid進行緩存,現在直接把openid提取出來即可 wx.getStorage({ key: 'openid',


                   success (res) { console.log(res.data)

                     wx.request({ url: 'https://www.xxx.com/send.php?openid='+res.data, data: {},


          header: { 'content-type': 'application/json' },


                       success (res) { // 推送 if(res.data.errcode == '43101'){ console.log("拒絕訂閱消息")

                         }else if(res.data.errcode == '0'){ console.log("發送訂閱消息")

                         }else{ console.log("未知錯誤")

                         }

                       }

                     })

                   },

                   fail (res) { console.log("沒有openid,無法發送")

                   }

                 })

               }

             })

           }

          })

          后端

          <?php //設置 header  header("Content-type:application/json"); //接收參數 $openid = $_GET["openid"];


          //初始化 CURL $ch = curl_init(); // 獲取access_token // include ''; require_once("access_token.php");


          //目標服務器地址  curl_setopt($ch, CURLOPT_URL,


          'https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token='.$access_token);


          //設置要POST的數據 curl_setopt($ch, CURLOPT_POST, true);


          $data = '{

           "touser": "'.$openid.'",

           "template_id": "模板ID",

           "page": "pages/index/index",// 要跳轉的頁面

           "lang":"zh_CN",

           "data": {

               "thing4": {

                   "value": "歡迎使用專插本最前線小程序"

               },

               "thing5": {

                   "value": "小程序由公眾號:廣東專插本最前線開發"

               }

           }

          }';

          curl_setopt($ch, CURLOPT_POSTFIELDS, $data);

          curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST"); // 對認證證書來源的檢查 curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0); // 從證書中檢查SSL加密算法是否存在 curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2); //獲取的信息以文件流的形式返回,而不是直接輸出 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); //發起請求 $result = curl_exec($ch); echo $result; //關閉請求 curl_close($ch); ?>

          access_token.php


          <?php // 聲明頁面header header("Content-type:charset=utf-8"); // APPID、APPSECRET $appid = "你的小程序APPID";

          $appsecret = "你的小程序APPSECRET"; // 獲取access_token和jsapi_ticket function getToken(){

             $file = file_get_contents("access_token.json",true);//讀取access_token.json里面的數據 $result = json_decode($file,true); //判斷access_token是否在有效期內,如果在有效期則獲取緩存的access_token //如果過期了則請求接口生成新的access_token并且緩存access_token.json if (time() > $result['expires']){

                 $data = array();

                 $data['access_token'] = getNewToken();

                 $data['expires'] = time()+7000;

                 $jsonStr =  json_encode($data);

                 $fp = fopen("access_token.json", "w");

                 fwrite($fp, $jsonStr);

                 fclose($fp); return $data['access_token'];

             }else{ return $result['access_token'];

             }

          } //獲取新的access_token function getNewToken($appid,$appsecret){ global $appid; global $appsecret;

             $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appid."&secret=".$appsecret."";

             $access_token_Arr =  file_get_contents($url);

             $token_jsonarr = json_decode($access_token_Arr, true); return $token_jsonarr["access_token"];

          }


          $access_token = getToken(); ?>

          邏輯

          1、通過button控件出發send函數

          2、send函數調用wx.requestSubscribeMessageAPI,微信允許接收訂閱消息

          3、 wx.request向send.php后端請求

          4、后端獲取access_token后,調用訂閱消息接口POST一段json數據即可發送訂閱消息


          官方文檔

          1、https://developers.weixin.qq.com/miniprogram/dev/api/open-api/subscribe-message/wx.requestSubscribeMessage.html


          2、https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/subscribe-message/subscribeMessage.addTemplate.html


          Author:TANKING

          Date:2020-08-24

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

          WeChat:face6009

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

          JavaScript - 數組排序 6 種常見算法

          前端達人

          開發中,遇到數組排序的需求很頻繁,這篇文章會介紹幾個常見排序思路。

          一、希爾排序(性能最好)

          如果要從大到小排列,則 while(arr[n] > arr[n - interval] && n > 0) 。

          // 希爾排序算法 function xier(arr){ var interval = parseInt(arr.length / 2);//分組間隔設置 while(interval > 0){ for(var i = 0 ; i < arr.length ; i ++){ var n = i; while(arr[n] < arr[n - interval] && n > 0){ var temp = arr[n]; arr[n] = arr[n - interval]; arr[n - interval] = temp; n = n - interval; } } interval = parseInt(interval / 2); } return arr; } // Array var arr = [10, 20, 40, 60, 60, 0, 30] // 打印排序后的數組 console.log(xier(arr))//[0, 10, 20, 30, 40, 60, 60]  
          

          二、sort排序(普通數組 / 數組嵌套對象)

          一堆數組排序

          // Array var arr = [10, 20, 40, 60, 60, 0, 30] // 排序方法 arr.sort(function(a,b){ /*
              * return b-a; —> 降序排序
              * return a-b; —> 升序排列
              */ return a-b; })//括號里不寫回調函數則默認按照字母逐位升序排列 // 打印排序后的數組 console.log(arr)//[0, 10, 20, 30, 40, 60, 60]  
          

          對象數組排序(數組套對象)

          //對象數組排序 var arr = [ {name:'syy', age:0}, {name:'wxy', age:18}, {name:'slj', age:8}, {name:'wj', age:20} ]; // 排序方法 function compare(property) {//property:根據什么屬性排序 return function(a,b){ var value1 = a[property]; var value2 = b[property]; /*
                  * value2 - value1;  ——> 降序
                  * value1 - value2;  ——> 升序
                  */ return value1 - value2;//升序排序 } } // 打印排序后的數組 console.log(arr.sort(compare('age'))) /*
          0: {name: "syy", age: 0}
          1: {name: "slj", age: 8}
          2: {name: "wxy", age: 18}
          3: {name: "wj", age: 20}
          */  
          

          三、桶排序

          特點:簡單,但非常浪費內存,幾乎不用。

          桶中出現的數組元素都做個標記 1,然后將桶數組中有 1 標記的元素依次打印。

          // Array var arr = [] // 每個數組項做標記(1) for(let i = 0; i < arr.length; i++) { let key = arr[i] arr[key] = 1 } // 遍歷打印出每項 for(let j in arr) { debugger console.log(j) }  
          

          四、冒泡排序

          性能:一般(需要每項進行比較)。

          每一趟找出最大的值。

          // Array var arr = [10, 20, 40, 60, 60, 0, 30] /*
          * 總共比較次數為arr.length-1次
          * 每次的比較次數為arr.length-1次
          * 依次遞減
          */ var temp;//交換變量標識 // 兩層for分別表示當前項與第二項 for(let i = 0; i < arr.length - 1; i++) { for(let j = 0; j < arr.length - 1; j++) { // 如果當前項大于第二項(后一項)則交換 if(arr[j] > arr[j+1]) { temp = arr[j] arr[j] = arr[j+1]; arr[j+1] = temp; } } } // 打印排序后的數組 console.log(arr)//[0, 10, 20, 30, 40, 60, 60]  
          

          五、選擇排序

          性能:一般(需要每項進行比較)。

          假定某個位置的值是最小值,與冒泡排序類似。

          // Array var arr = [10, 20, 40, 60, 60, 0, 30] var temp;//交換變量標識 // 兩層for分別表示當前項與第二項 for(let i = 0; i < arr.length - 1; i++) { for(let j = i + 1; j < arr.length; j++) { // 假設第二項是最小值(是則交換/否則繼續比較) if(arr[i] > arr[j]) { temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } } } // 打印排序后的數組 console.log(arr)//[0, 10, 20, 30, 40, 60, 60] 
          

          六、插入排序

          // Array var arr = [10, 20, 40, 60, 60, 0, 30] // 排序算法 for(var i = 0; i < arr.length; i++) { var n = i; while(arr[n] > arr[n+1] && n >= 0) { var temp = arr[n]; arr[n] = arr[n+1]; arr[n+1] = temp; n--; } } // 打印排序后的數組 console.log(arr)//[0, 10, 20, 30, 40, 60, 60]



          轉自:https://blog.csdn.net/weixin_44198965/article/details/107996497?utm_medium=distribute.pc_category.none-task-blog-hot-4.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-4.nonecase&request_id=

          作者:

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

          前端達人

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

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

          專業又貼心醫療App頁面設計

          醫療行業設計案例

          微信圖片_20200818185149.jpg

             --手機appUI設計--

          微信圖片_20200818185156.jpg

             --手機appUI設計--微信圖片_20200818185200.png

             --手機appUI設計--微信圖片_20200818185204.jpg

             --手機appUI設計--微信圖片_20200818185208.png

             --手機appUI設計--微信圖片_20200818185211.png

             --手機appUI設計--微信圖片_20200818185217.png

             --手機appUI設計--微信圖片_20200818185221.jpg

             --手機appUI設計--微信圖片_20200818185226.jpg

             --手機appUI設計--微信圖片_20200818185229.jpg

             --手機appUI設計--微信圖片_20200818185235.png

             --手機appUI設計--微信圖片_20200818185239.png

             --手機appUI設計--微信圖片_20200818185242.png

             --手機appUI設計--微信圖片_20200818185246.png

             --手機appUI設計--微信圖片_20200818185249.png

             --手機appUI設計--微信圖片_20200818185254.jpg

             --手機appUI設計--微信圖片_20200818185257.jpg

             --手機appUI設計--微信圖片_20200818185301.jpg

             --手機appUI設計--微信圖片_20200818185307.jpg

             --手機appUI設計--微信圖片_20200818185320.png

             --手機appUI設計--微信圖片_20200818185323.jpg

             --手機appUI設計--微信圖片_20200818185326.jpg

             --手機appUI設計--微信圖片_20200818185333.jpg

             --手機appUI設計--微信圖片_20200818185336.jpg

             --手機appUI設計--微信圖片_20200818185339.png

             --手機appUI設計--




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



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



            更多精彩文章:

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

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

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

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

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

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



          Flutter 實戰:增刪查改功能示例代碼

          seo達人

          七月,我們上線重磅基礎能力——實時數據庫,并開了實戰直播課,讓大家可以更好的理解并使用該服務。你的聊天室、站內信、投票、小游戲等需要高實時的功能正在想你招手,趕緊使用實時數據庫服務又快又簡單的開發它們吧。


          點擊此處回顧教學視頻,看看知曉云大前端組長如何在十分鐘內搞定一個視頻彈幕微信小程序。


          Ps:目前實時數據庫限時免費,就算以后收費,費用也是低到忽略不計。速速用上,不要錯過這么硬核的能力。


          八月,我們迎來知曉云三周年,推出各式各樣的福利活動。開發者在這個全年最優惠的時間里,升級、續費,甚至購買三年期包年套餐,與知曉云鎖定下一個三年。非常感謝大家的支持,我們會繼續努力,不斷輸出更強大的能力。


          九月初,Flutter SDK 已進入測試階段,很快就可以跟大家見面了。

          Flutter SDK 的使用比較簡明易懂,例如對數據表的增刪查改,在指定數據表后,對數據項進行對應操作即可,例如新增(create)、查找(get)、修改(update)和刪除(delete)。


          以下是對 Flutter 增刪查改功能進行展示:


          TableObject product = new TableObject('product'); // 獲取名為 product 的數據表


          // 新增數據

          TableRecord record = product.create(); // 創建一條空白記錄


          // 為屬性字段賦值

          record.set('name', '知曉云 flutter sdk'); // 對 name 字段進行賦值

          record.set('version', '1.0'); // 對 version 字段進行賦值


          // 將數據保存到服務器

          record = await record.save(); // 保存


          // 從服務器獲取一條數據

          TableRecord record = await product.get(record.id);


          // 更新數據

          record.set('version', '1.1');

          await record.update();


          // 刪除數據

          await product.delete(recordId: record.id);

          目前知曉云 Flutter SDK 支持的功能如下:


          數據表

          用戶

          內容庫

          文件

          云函數調用

          獲取服務器時間

          本地存儲

          Flutter SDK 正式上線后,我們還會輸出實戰教學視頻,敬請期待!


          另外,我們提前開啟內測申請通道,點擊此處或微信掃一掃掃描下方卡片二維碼即可申請,獲得內測資格的開發者,不僅可優先體驗新功能,同時還可以與知曉云工程師近距離交流,你使用后的建議也可以得到更快的反饋與實現。


          知曉云 Flutter SDK


          2020 年已過去三分之二,好消息是,即將到來的中秋&國慶小長假以及知曉云近期的更新內容,除了即將上線的 Flutter SDK ,還有以下更新。


          1. 支持 QQ 小程序訂閱消息,消息能力又前進一步。

          與微信訂閱消息不同在于,QQ 小程序訂閱消息不僅支持分為「一次性訂閱」,還支持「長期訂閱」,如果用戶之前已經同意授權長期訂閱,則不會再出現彈窗詢問。>>> 查看開發文檔


          2. iOS 和 Android SDK 支持微博登錄。


          查看 iOS 開發文檔

          查看 Android 開發文檔

          如果你有其他需求,可以通過文末

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

          日歷

          鏈接

          個人資料

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

          存檔

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