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

          首頁

          按鈕設計指南:我的按鈕究竟該放哪兒!?

          ui設計分享達人

          按鈕是一種使用廣泛的基礎界面元素,正因其使用的普遍性和重要性,我們需要并一直在探索建立按鈕設計規范。面向企業級應用時我們需要精心考慮按鈕的設計, Ant Design 提供了豐富的按鈕類型以覆蓋各種場景,盡管每種按鈕都有其存在的必要性,但在使用中也帶來諸多疑問:


          • 應在什么時候將按鈕放在左邊,又什么時候放在右側;

          • 按鈕順序是按照使用頻次擺放嗎?如果無明顯的使用頻次呢?

          • 當需要提供特別多按鈕的時候應該如何處理?

          • 虛線按鈕 與 普通按鈕 在用法上有什么明確區別;

          • RadioGroup 和 ToggleButton 以及 ButtonGroup 使用上有何區別?


          如果沒有規范以上問題,僅按鈕順序和位置問題就會出現無數種組合。圖左側為螞蟻中臺業務實況,圖右側對左側按鈕的布置方案作了提取,每種場景都存在過多解決方案和組合,無法通過參考他人的設計來確定應該如何擺放按鈕,因為設計無章可循。



          因此,有必要建立約束又包容的規范,以廣泛滿足多層級、跨場景的設計需要。


          制定約束又包容的設計規范

          Ant Design 是一個設計體系,應用于螞蟻中臺,并對外服務于超過 100 萬名開發者。在制定規則時,原則是簡單易記(約束)并滿足企業級場景的廣泛兼容(包容),把問題最少化。我們的解決方案是:


          1)「默認規則」:提供一套默認的設計規則,在現有的模板、組件等設計資產中提供示例方案,滿足簡單場景需求,直接使用即可;

          2)「設計建議」:為默認規則無法滿足的復雜場景提供設計建議,讓使用者在一定的策略上自定義,同時又與默認規則保持一致的認知邏輯;

          3)「設計目標」:明確設計目標,設計者依據設計目標決策設計。

          例如:“提交按鈕與表單輸入項對齊”是默認規則;當需要考慮按鈕是否適合放在右下角時,則可以遵循“右下角放置“完成類”意義的操作”的使用建議;“按鈕的設計應盡量幫助用戶避免犯錯?!眲t是設計目標。 

          目前,Ant Design 會提供組件、模板等設計資產、官方設計指南來演示這些規則。這是也是解決一致性落地方面的基本思路。



          (一致性落地策略) 



          本文將嘗試分享我們是如何思考和制定默認規則的,礙于篇幅,首先我們會聊一聊按鈕是什么,以此推論出按鈕設計應為用戶解決的問題。接著,根據按鈕設計時的幾項基本變量,介紹我們是如何組織這些變量的設計邏輯,從而推導出一個較為通用的按鈕設計規則。最后講個小例子來說明按此邏輯該如何考慮設計一組按鈕。本文主要討論按鈕設計的三個基本邏輯:按鈕位置、按鈕順序、按鈕強調,后續可能會單獨開篇介紹其他常見按鈕的使用疑問。


          按鈕和鏈接定義是不同的,按鈕用于發起動作,觸發相應的業務邏輯。其與鏈接的區別在于,鏈接的作用是導航,但鏈接并不影響后端或前端展示上的邏輯。

          然而,現在,按鈕和鏈接的界限越來越模糊,按鈕面臨的使用場景越來越復雜,也常出現用鏈接作為按鈕的場景,例如表格的操作列,通常這樣的設計通常并無大不妥。 
          但是筆者認為 Material 的 TextButton 的解決方案也非常棒,對 TextButton 和 Link 做了區分,當 hover 或點擊TextButton 時,會出現淺色背景指示控件響應區。如果你的設計系統剛起步,可以考慮這個方案:https://link.zhihu.com/?target=https%3A//material.io/components/buttons/ 


          按鈕設計要解決的問題

          按鈕的位置、順序、組織方式、視覺強調程度是用戶尋找按鈕的線索,通過警告色可引起注意,避免誤操作,準確的文案則能夠預告按鈕的執行結果。按鈕設計的目標是指導用戶采取我們希望用戶采取的行動,盡量幫助用戶快速找到需要操作的按鈕,并了解執行該操作的結果,同時盡可能避免誤操作。


          按鈕區位置

          按鈕區是專用于放置按鈕的區域,一個按鈕區內可以有多個按鈕。因此,這里使用按鈕區位置比按鈕位置更加準確。

          (按鈕區) 


          我們確定了一個清晰的設計策略來決策按鈕區位置:應將按鈕放置于用戶瀏覽路徑中,便于被用戶發現,并且應盡量靠近其所控制的對象。在未刻意建立信息層級引導視覺路徑時,經典“F”“Z”網頁瀏覽模式作為了我們按鈕位置放置規則的基礎指導。

          1)“F” Pattern

          Jacob Nielsen 首先提出該模式后并提供了眼球追蹤研究結果,關注流順序如下圖。按鈕跟隨內容模式在以下的這個研究中被證明非常自然。

          (F Pattern 圖源:Buttons on the web--Artem Syzonenko) 


          2)“Z” Pattern

          源自 Gutenberg diagram,用戶關注流(通常含鼠標移動)遵循一個 Z 字形模式,它描述了西方用戶的閱讀模式,從頁面的左上角到右下角。1和4區域是相對重要的視覺落腳點,4 區域相當于是瀏覽的終點站。(Gutenberg Diagram 是 Gutenberg 根據多年的報紙等排版經驗總結出的假設,筆者尚未找到眼動實驗數據)


          (Z Pattern 圖源:Buttons on the web--Artem Syzonenko) 



          3)規則的外圍邊界

          我們需要認識一個概念叫「內容塊」。內容塊的概念略抽象,可以將整個頁面視為一個內容塊,也將一張卡片視為一個內容塊,或者僅僅是界面中的一個小小的內容單元也可以視為一個內容塊。界面中,一個內容塊的基本構成有三部分:Header、Body、Footer。常規來說,一個內容塊通常闡述一個主題,Header 申明主題,Body 放置該主題的具體內容,Footer 主題的延伸信息和操作。

          內容塊的構成 


          設計規則

          根據以上三個條件,推導出按鈕在「內容塊」中位置的「默認規則」如下。該規則幾乎收斂了大部分圖 1 中的位置設計不一致問題。這套位置規則與 Fiori、Predix、QuickBooks 等企業級產品設計體系中都相近。

          (默認位置規則) 


          同時,每個位置有一定行為意義,我們據此提供了「使用建議」來指導設計:

          (使用建議) 


          關于 FooterToolBar 中右側放置按鈕區的爭議

          (Slack profile settings 圖源:Buttons on the web--Artem Syzonenko) 


          在彈窗中,將按鈕區放置在右側的規則已屬于習慣用法。但在整個網頁場景中,將 FooterToolBar 里的按鈕放置在右側是最受質疑的,FooterToolBar 是一個吸附在頁面底部的工具欄,可以保持出現。許多設計師認為這種狀況找到按鈕很困難,特別是在表單場景中。眾所周知企業級產品的表單常會遇到非常復雜的狀況,FooterToolBar 正好解決了這個問題,因此這里要弄清楚的是什么時候需要用到 FooterToolBar:


          1)Body 區的有部分內容被折疊or隱藏,如內容單屏無法展示完整內容,表單區被多個頁簽分割;

          2)Body 區的內容復雜度高,比如有多個分組,每個分組都有獨立的按鈕區,或復雜的交互方式。這時候需要將該主題的“完成”操作區與 body 區,區分出來。


          簡而言之,Footer 的存在就是為了要和 Body 區分別開來。如果不是為了解決這類問題,那么讓按鈕跟隨內容是最自然的。這個挑戰也引出了另一個課題,工具欄的設計規范尚待完善,emm,真是一坑更比一坑深。


          按鈕順序

          關于順序,最常見的疑問是確定按鈕應該在取消按鈕左邊還是右邊,這是一個爭論已久的話題。在彈窗中,確定按鈕和取消按鈕的順序在各設計體系中都不一樣,下圖是操作系統三巨頭:Apple、Google、Micrisoft 的方案。三巨頭證明了兩種主次順序都能被接受,只要在系統中統一。那 Ant Design 應該如何選擇呢?

          (彈窗中的按鈕,從左往右依次:MacOS、Material、UWP) 


          在決策按鈕默認的閱讀順序時我們考慮了以下四方面:

          1)風險操作

          2)方向性意義

          3)對話習慣

          4)響應式規則

          上面順序呈現了各因素在決策時的權重,例如,一旦按鈕出現方向性含義,則權重大于對話習慣,但一旦操作存在風險,則需優先決策。


          1)風險操作

          可能造成損失的操作,特別是破壞性操作,如果不是用戶期望點擊的按鈕,應該盡量遠離常用按鈕。


          2)方向性含義

          什么是方向性含義?具有返回意義的按鈕,應該放在左側,暗示其方向是回到之前。左圖的方案非常容易誤操作,方向錯亂挑戰用戶的認知習慣,因為不論是在網頁還是移動端界面,我們已經都習慣了返回在左側的模式。

          (方向性含義的按鈕) 


          3)對話習慣

          按照對話習慣排列按鈕。界面中的按鈕閱讀順序類似于一個用戶和電腦的對話過程,按照日常對話的順序設計按鈕閱讀順序更自然,同時讓電腦盡量顯得禮貌一點。例如,日常對話中,我們一般不會先問負面性的問題,當用戶修改了一項設置,用戶最有可能的行為是保存這項變更,如果電腦一上來就問用戶是否要取消變更會顯得不太禮貌的亞子。因此,不太推的操作,自然會排列在靠后的順序。

          (電腦與用戶的對話過程) 


          4)響應式規則

          指是按鈕如何在響應式環境中優雅的溢出。這一項條件對規則設計的影響是,我們把溢出按鈕“…”統一放置在最右側。

          (圖源:UWP 響應式設計技術) 


          設計規則

          綜上所述,我們制定了第一版「默認規則」,無論左對齊右對齊,統一從左往右閱讀。

          (按鈕閱讀順序初稿) 


          但這個方案遇到了問題。Ant Design 現有的浮窗類組件里,優先操作的按鈕都在最右側,全部不符合這條規則。如果調整,意味著全部組件升級,這個變更將挑戰全部已在使用 Ant Design 的用戶習慣。這是無法被接受的,同時為了保持規則的簡單性,我們產出了產出了第二版「默認規則」,即現在發布的版本,左對齊從左往右閱讀,右對齊從右往左閱讀:


          按鈕強調

          調整按鈕的樣式變量,呈現不同的視覺重量,達到分級強調目的。我們將按鈕視覺強調程度分為四級,了解其原理后,可以根據樣式變量和按鈕類型組合出需要的按鈕。

          (按鈕強調度分級) 


          一級按鈕

          一級按鈕通常是主按鈕,突出“完成”、“推薦”的操作。一個按鈕區最多應該使用一個主按鈕。那么一個頁面可以有多個主按鈕嗎?因為沒有足夠的反面案例支撐一個頁面不能有多個主按鈕,比較建議在一個焦點任務中,最多一個主按鈕,也可以沒有主按鈕。


          二級按鈕

          也稱之為次要按鈕,可用于所有次要的按鈕行動,如果我們有許多具有相似重要性的行動在一個屏幕上,或不確定要選擇哪種按鈕,次要按鈕永遠是最安全的選擇。目前二級按鈕的視覺強調程度有些偏弱,后續我們也會考慮調優此問題。


          三級按鈕

          沒有外邊框,用鏈接色突出,例如文字按鈕。比較適合諸如“取消”“還原”等無需強調的操作。文首提到的表格操作列這類無需強調的操作也推薦使用。


          不強調按鈕

          并不是非常規范的按鈕,用于滿足復雜的個性化需求,當按鈕數量特別多,并且保證用戶直識別的情況。

          最后將位置、順序、視覺強調三項變量組合,可以得到一個最基礎的「默認規則」,用于覆蓋最簡單的場景:


          案例驗證

          前面我們提到,「默認規則」在組件、模板等設計資產中演示,通常無需思考直接使用即可。 那默認規則不能滿足我的需求,我不知道如何安排按鈕順序怎么辦?現在,我們用一個小案例來驗證如何依據設計建議決策按鈕區設計。

          場景假設:我需要一個復雜的篩選條件來過濾數據,我考慮在彈窗中處理這個任務。設置完篩選條件后,我可以將這個條件保存下來以備下次使用,或直接點擊確定生效。這里面會涉及的操作包括:保存,重置條件,確定,取消。 

          (按鈕設計三步走) 


          結語

          規則設計想要簡單而又令所有人滿意是一件非常困難的事,從設計系統的長遠效益來看,簡單的規則更有意義,同時我們也在盡可能讓規則能夠符合習慣用法,讓用戶更容易接受和學習。關于按鈕設計規則的探討,依然存在很多問題尚待解決,歡迎大家提提供反饋,幫助我們一起完善。寫完文章后突然有點忐忑~~最后,我們在 Ant Design 官網上發布了一篇關于按鈕的設計指南,歡迎前往查看指正。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷  作者:Ant_Design

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          這個設計我是這樣進行修改的

          seo達人


          隨著設計職場對 UI 設計師的要求不斷升級,我們需要掌握的技能層層疊加,從最初的視覺層加對接層演變成我們還需要具備動效層、交互層、產品層等能力。所以說三年入行五年精專,想要做好這個細分崗位也是不易的。

          圖片

           當然,無論高度的天花板有多高,一切都還需要腳踏實地。就算是面對視覺層這樣的底層技能需求,依然還是有部分設計師達不到精細化的程度。無論是整體的風格把控,還是局部的細節思考,都容易被忽略。

          圖片

           今天黑馬哥就來和大家一起攻破一下視覺層面的精細化,挑選了黑馬家族成員第一次嘗試的界面為案例進行解析。以案例實戰的形式進行解析,很多設計原則和思考僅代表個人經驗總結,大家需要結合自身項目情況酌情運用。

          一、找問題

          二、如何改

          三、總結

          四、標注文件分享

           

           一  找問題 

           1.1、先看整體

          當我們設計完一個界面之后,我們需要先看整體再打磨細節,整體的視覺引導和信息層級關系需要處理到位。如果整體信息層級把控不準,可以將界面模糊態之后觀察。案例中界面頭部到 Banner 區域信息對比模糊;金剛區下方的異形廣告位過度干擾,導致視覺焦點不明顯。

          圖片

           

          1.2、再看局部

          整體排查之后,從上往下再進行局部細節走查。導航欄和 Banner 區域需要進行視覺比重區分,這里忽略 Banner 設計本身的質量;金剛區圖標無需灰色卡片背景,圖標設計細節規范和表現力不夠深入等;異形廣告比重太大,需要弱化處理;列表排版信息對比不明顯,局部信息需要圖標化引導,配圖處理過于單一等;底部標簽欄沒有區分點擊和默認狀態,圖標設計細節規范問題,中間圖標采用“凹”式效果不夠柔和等。

          圖片

           

          1.3、設計規范

          對于 UI設計來說,規范性是設計的基礎,確定好界面尺寸的模版比例之后,標準的控件不要用錯。根據案例的尺寸比例屬于 iPhone X 的設計,在項目設計中盡量真實還原設計稿,狀態欄和底部主頁控制器不要用錯。整體布局過程中的數字關系比較混亂,在布局的過程中定好數字系數,按照系數的倍數關系來進行排版布局。

          圖片

           以上問題僅作為列舉示意,更多問題大家自行分析歸納,這里就粗略統計啦!

           

          二  如何改 

           根據分析出的問題,接下來我們逐步進行調整。在進行界面布局的過程中,我們需要根據需求先設計出高保真原型圖,忽略顏色、配圖、圖標等耗費時間的設計內容,快速將整體的信息對比關系做出來。個人的習慣是根據低保真原型圖、高保真原型圖、UI 設計稿、細節打磨等環節進行。

          圖片

           

           2.1、頭部細化(狀態欄)

          頭部我們通常采用深色(品牌色)、淺色、白頭、Banner 圖填充等形式。為了使整體設計通透性更好,我選擇白頭加局部色彩點綴的形式,處理手法使用了極光效果。既可以讓頭部的效果更具特色,露出品牌色增強曝光度,也不會和 Banner 圖互相干擾。

          圖片

           

          2.2、Banner 尺寸標準化

          在確定 Banner 圖尺寸的時候雖然我們可以自定義,但是我們也盡可能的在探索更規范的形式,利用一些數列關系來確定比例關系。這里我采用了斐波那契數列進行計算,在推薦的寬高比例中我使用了 8:3 進行計算。在算出的值中取能被 4 整除的數值,確定 Banner 尺寸為:686*256px(基于二倍圖)。

          圖片

           

          2.3、金剛區圖標優化

          金剛區圖標設計風格很多,大體上分為線性和面性風格,而面性里面也會有扁平的和質感的。如果在圖形統一性上面把控較弱,也可以采用統一的外輪廓背景來進行約束。外輪廓有圓形、圓角矩形、橢圓形、超橢圓等,這里我選擇了超橢圓作為圖標設計的外輪廓。

           在配色上面為了和整體色系搭配,選擇了莫蘭迪色系,圖標設計風格偏向于微質感。

          圖片

           

          2.4、通知欄優化

          根據之前案例中異形廣告的文案“中華醫學會指南全新上線”,偏向于通知形式,優化后改為通知欄板塊。既可以突出查看按鈕,也不會過度視覺化干擾金剛區功能模塊。為了突出通知內容,根據內容的強化等級在前面添加火苗圖標,起到重點強化的目的。

          圖片

           

          2.5、健康須知模塊優化

          該模塊優化了卡片式設計,改灰色卡片為白色卡片,這樣顯得更加干凈整潔。除了對標題等信息對比加強以外,也將一些文案進行圖標化,增強設計感。

           之前的配圖采用統一模版的文字表達形式,這樣過于單一,而且設計感欠佳。調整后采用圖片表達,更能引導用戶點擊閱讀。

          圖片

           

          2.6、底部標簽欄優化

          重新繪制了底部標簽欄的圖標,默認狀態采用線性圖標,點擊狀態采用面性。中間圖標將“凹”式改為“凸”式,通過調整凸出的錨點使得整體過渡柔和。中間凸出圖標設計風格和金剛區保持一致,形成上下風格關聯。

          圖片

           

          2.7、完成

          在保持原有信息的基礎上,僅做了視覺層面的優化,希望這個案例修改可以帶給你更多思考。

          圖片

           

          三  總結 

           這是一個功能相對比較簡單的首頁案例,本次案例忽略了產品層面、交互層面等思考,只在視覺層進行了優化。調整了色彩關系、布局細節和圖標設計等內容,基于原始案例內容不變的情況進行調整,希望拋磚引玉,可以帶給大家更多思考。

           

          四  標注文件分享 

          最后附上修改案例的標注文件,希望可以幫助大家更好的理解。關注“黑馬家族”公眾號,后臺回復關鍵詞“首頁設計”獲取標注文件。

           

          原文地址:黑馬家族(公眾號)

          作者:黑馬青年

          轉載請注明:學UI網》這個設計我是這樣進行修改的

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          設計的UI界面總感覺亂糟糟?從這7個問題里找原因!

          資深UI設計者

          翻譯:Siyang  審校:ArialXu  |   UXRen翻譯組 #376譯文
          原作者:Denislav Jeliazkov
          原標題:《Is Your UI Messy? 7 Common Mistakes to Avoid》

           

          當我們設計高品質產品時,任何微小的細節都是至關重要的。

          很多人會爭論好的用戶體驗和好的用戶界面哪個更重要,而我則認為兩者都非常重要。如果其中一個失敗了,你就無法對用戶產生影響。然而,很多時候用戶并不會考慮用戶體驗是什么,而是基于外觀來評價一款產品。

           

          1. 忽視邊界/糟糕的規劃

          Ignoring Scope/Bad Planning

          那些含有lorem ipsum(模板里填充的默認文本)的產品和庫存照片,你多久使用一次? 我想大家都從來沒用過。如果你想提升你的技能,設計時請注入真實內容。網頁會展示哪些真實的圖片,真實的標題可能有多長字符?一旦你美麗的設計被真實的內容填滿,它就會面目全非。

          具體來說,在開始UI設計之前,你需要知道頁面的每個部分將顯示什么類型的內容。你還需要知道內容的最小和最大尺寸。這些轉折點(turning point)被稱為極限情況(edge case),因為它們決定了界面何時以及如何改變。

          圖片的選擇

          你還需要提前研究圖片的使用限制。如果你的客戶沒有任何定制照片或不打算購買任何照片,那你就沒必要使用來自Unsplash的漂亮但毫無意義的照片。

          為什么毫無意義? 因為這些照片都是純概念性的。用漂亮的東西是不夠的。相反,你需要選擇那些能夠創造故事情節或具有深遠意義的圖像。

          無論你做什么,不要使用那些毫無必要的照片。如今,人們被大量信息淹沒。額外一點無用的視覺信息只會激怒他們。

           

          理解重復模塊

          另一種極限情況與重復模塊有關。例如,圖像+文本、圖標+文本、數字+文本…。你應該考慮兩行文本和十行文本時這些模塊會是什么樣子,以及它們是否會一個接一個地出現。

          對于描述性功能的小型文本模塊,使用三列布局是一個很好的選擇。然而,如果你的文本超過五行,并且不能使用省略號(…)來收起文本,你就必須想出另一種視覺解決方案。為什么?因為又窄又長的大段文本只適合原始的報紙閱讀,而對網絡閱讀十分不友好??赡艿慕鉀Q方案包括這兩種:水平滑動的輪播模式(Slides)和兩列布局。。

          提前為擴展性做規劃

          了解內容的極限情況有助于更有效地使用屏幕空間,并為界面的各個模塊選擇正確的界面處理方式。但是要記住,極限情況并不僅僅是你當前已經遇到的情況。優秀的設計師總是會主動思考客戶將來擴展UI的可能性。

           

           

          2. 沒有區分操作行為的主次

          No difference between primary and secondary actions

          設計應用程序時,會涉及到很多需要用戶完成的操作。強化主操作(primary actions)的視覺重要性非常重要。所有的導航都是通過按鈕完成,所以你必須通過加粗和突出的方式讓用戶更容易識別主操作,次要操作(Secondary actions)則不要那么突出,但如果用戶需要尋找它們,它們是可見的即可。

          以下是區分主操作和次要操作的方法:

          • 在主按鈕和次要按鈕上采用不同的視重(visual weights),視重最強的按鈕會得到更多的關注。
          • 因此,使用強烈的顏色、粗體文本和按鈕大小來強化主按鈕的視重,次級按鈕正好相反。

           

          3. 令人沮喪的出錯狀態

          Frustrating error states

          當你在設計用戶界面時,不要忘記任何用戶界面的核心目標:在用戶和服務之間提供盡可能流暢的交互。界面不應存在疑惑、沒有答案的問題,亦或是任何的不確定性。

          設計師應該向用戶提供產品狀態的清晰反饋,特別是在產品處于出錯狀態時。因此,出錯時的提醒應滿足以下的幾個簡單規則:

          • 它們應該是可識別的和引人注目的。(例如,紅色是表示錯誤的常見 UI 模式)
          • 它們應該清楚地解釋發生了什么,以及用戶可以如何修復。
          • 它們應該與上下文相關聯。(顯示錯誤提示的地方最好緊鄰出錯的UI元素)
          • 它們不應該是帶刺激性的。(你的用戶對這個錯誤還不夠惱火嗎?)

          設計師還應該注意那些意外錯誤情況(如服務器錯誤、頁面未找到)。任何錯誤都是用戶使用流程上的障礙。這就是我們需要幫助用戶處理它的原因,提供任何可能的解決方案,并試圖消減糟糕的體驗,尤其是那些非用戶自身原因造成的錯誤。例如,對于404和500錯誤(頁面未找到),一個可能的好方案是為這些頁面設計插圖或動畫。

           

          慎重對待表單校驗

          在設計錯誤狀態時,盡你的最大努力不要惹惱用戶。特別要注意那些所有可能發生的表單校驗情況。

          舉例而言,假設你有一個包含必需字段的表單。這意味著開發人員有一個相應的校驗:“所有的必填字段不能為空?!奔僭O用戶試圖以隨機的順序填寫表單,當第1個必填字段失去焦點狀態時,它會彈出一個錯誤提示:“請填寫此字段,該選項是必填項!”

          看到這個反饋的可憐用戶驚叫道:“等一下伙計,我只是在表單項之間切換,還沒有點擊‘提交’呢!”事情甚至可能變得更糟,例如,假設你有另一個校驗設置:在所有必需字段全部填寫前,“提交”按鈕是禁用狀態。

          想想看吧!你那些可憐的用戶什么也沒做,就無法提交表單,但是你已經將好幾個錯誤歸咎于他。這肯定會激怒所有人,你最好避免這種情況的出現。

          衡量成本與價值

          不要聽那些開發工程師忽悠:“按你想要的交互方式開發程序,這需要耗費大量精力”。請記住: 如果不能避免這個問題會讓你付出代價,“失去用戶”的巨大代價!即使它的開發成本很低,沒有用戶的產品一文不值。

           

          4. 沒有對齊

          Poor alignment

          好吧,我承認,我是個對齊狂魔。但這只是因為一旦你發現了對齊的魔力,你就會意識到它是讓任何布局看起來漂亮和和諧的關鍵。

          許多設計師認為使用柵格系統(grid)會限制你的創造力,在某種程度上,這的確是真的。然而,如果你是一名剛入行的UI設計師,我認為你十分有必要在打破這些規則之前,先學會它們。

          適當的填充(padding)和間距(spacing)可以讓你的版面保持整潔有序,同時也能讓讀者更容易地閱讀和理解信息。

          在邏輯塊(logical blocks)周圍應該設置相同尺寸的間距(例如,在頂部和底部,以及在左邊和右邊)。如果間距尺寸不一,你的頁面看起來會很混亂,導致用戶對不同部分投入不均等的注意力。

          而填充太小則意味著用戶無法將內容分解成更多的邏輯模塊。為了防止邏輯模塊混雜在一起,你需要把它們分開,并在它們之間插入一個大的間距。

          維持視覺層級結構的一個簡單方法,是遵循如下的簡單規則:不同邏輯模塊之間的填充尺寸應該大于每個模塊內標題和文本之間的填充尺寸。例如,假設你有一個包含主標題、副標題和段落的超長文本,那么你需要:

          • 將標題的底部填充(padding-bottom)設置為40px,然后再在后面在插入文本段落。
          • 段落的底部填充(padding-bottom)設置為10px。
          • 如果段落后面有一個副標題,副標題的頂部填充(padding-top)設置為30px(也即,段落與副標題之間的間隔是30px),并將其底部填充(padding-bottom)設置為20px(也即,副標題與下一個段落之間的間隔是20px)。

          這樣的設計可以很好的強調重點。主標題是最大號的文本,周圍有相對較大的空間,但仍與緊隨其后的元素保持相近的距離。

           

          5. 弱對比度

          Low Contrast

          設計產品和設計一座公共建筑(如圖書館、學校等)有些相似之處,產品需要很高的包容性,能滿足不同人的需求,這也包括了盲人、色盲和弱視群體。

          你可以問問達美樂披薩是否認同產品包容性的重要價值。達美樂的網站設計一點也不無障礙(accessible),他們被一位無法通過網站訂購披薩的盲人告上法庭。請不要學達美樂,做設計一定要考慮無障礙。

          我們作為設計師,往往關注如何做好看的設計,而忽視了多元化用戶的交互需求。

          作為一個成熟的設計師,我已經能夠心平氣和地對待那些限制我做出“完美設計”的條條框框了,這其中就包括ADA(美國殘疾人士法案)的相關條例。

          為了讓文字和水平空間更協調,而把字號縮小到8px;或是僅僅為了美觀而使用淺灰色,這些行為都忽視了弱視訪客的使用需求。

          為了在Dribbble集贊,設計時我們可以忽略無障礙,但是當我們在為真實的用戶設計產品的時候,忽略無障礙顯然不是個好主意。

          按照網絡端內容無障礙設計指南(WCAG)的要求,我們至少需要提供4.5:1的色彩對比度。這份指南還闡述了針對運動、聽覺和認知障礙用戶的視覺設計指導方針。

          為確保符合這些規范要求,你可以下載Stark軟件,它可以幫助檢查你的設計是否滿足了無障礙設計的要求。

          使用留白

          我的意思是,如果你把兩個完全不同的元素緊挨著排列,用戶無法搞清楚哪個元素是“主要”的,哪個是“次要的”。這就是為什么我們會說,強調對比不僅僅是將不同的視覺效果應用到各個元素上,也需要使用留白的藝術。有時候為了使元素形成對比,你需要用留白來分隔它們。

          留白很重要,它使內容更便于用戶閱讀。當然,有時候留白也會使用不當,比如有太多的空白或者在一個小區域內塞進了太多的內容,這都不是正確使用留白的例子。許多充斥各種廣告的網站也缺乏足夠的留白。

           

          確保文本和圖像之間有足夠的對比度

          避免把低對比度的文本放置在圖像上。文字和背景之間應該有足夠的對比。為了使文本突出,可以在圖像上放置一個提高對比度的濾鏡。黑色很流行,但你也可以使用明亮的色彩,搭配使用。

          另一種做法是從一開始就使用高對比度的圖像。在這種情況下,你可以把文本放在照片或圖像的深色區域。

           

          6. 糟糕的圖標設計

          Poor Iconography

          當你需要通過一個小符號來表達意思或簡單說明一種含義時,圖標非常有用。它們也是現代界面設計的基本組成部分,特別是在移動終端上。

          在應用程序中,圖標通常相當于按鈕??纯碔nstagram,你只會看到圖標和文字。

          這就是選擇正確的視覺圖標來呼應元素含義如此重要的原因。聽起來很簡單,對吧?其實并不簡單。找到正確圖標的過程是非常痛苦的。

          你需要用大家都能理解的、簡單的、常見的圖標來表達語義。其次,你還需要將這些圖標與整體UI風格相匹配,最后,你需要以SVG格式把圖標提供給開發人員。

          或許你曾經搜索過免費圖標,當你為所有元素找到對應的漂亮圖標時,你會很興奮。你想,它們是多么完美地吻合啊! 它們會被每個人理解!遺憾的是,你所選擇的圖標庫給人的整體印象往往是凌亂的。如何才能避免這種凌亂呢?以下是一個簡要策略:

          • 線寬(Line width)
            調整尺寸后,所有圖標的線寬應該都是一樣的。否則,用戶會明顯感受到線寬不等所帶來的混亂。
          • 圓角半徑(Corner radius)
            如果你的圖標包含一些矩形形狀,仔細核對你圖標庫中每個圖標的圓角半徑。如果它們尺寸不同,你最好把它們調成一樣的。
          • (針對線型圖標的)線段末端形狀(Line cap shape)
            它可以是矩形的,也可以是圓形的。
          • (針對線型圖標的)線段轉角形狀(Corners join shape)
            它可以是矩形的,也可以是圓形的。

          確實,沒那么細心的用戶可能不會特別注意到線寬或圓角半徑的不統一。盡管如此,設計給人的整體印象還是哪里怪怪的,用戶能感覺得到。

          換句話說,雖然使用免費圖標并沒有錯,但最好還是不要用太多。使用免費圖標會讓產品看起來很廉價,甚至是不專業的。另外,還有很多免費的圖標,人們很容易一下子認出來。為什么? 因為他們早就發現這些圖標被到處濫用。

          這也是我建議嚴格篩選免費圖標的原因,當然,如果能自己設計圖標就更好了。自定義圖標總是為用戶提供更優越的體驗。

           

          7. 未考慮多終端

          Not thinking cross platform

          是的,理想情況下,這在當下應該不再是一個問題。

          我們都知道,大多數用戶通過移動設備訪問網絡服務。不幸的是,許多設計師仍然會忘記這一事實。(我猜或許是因為客戶不愿意花錢去做移動端設計的優化?)

          然而,對于專業的設計師來說,不考慮多設備的兼容優化,這種情況不應該發生。在創建UI時,你應該始終牢記“手機端優先”的法則。

          請關注一下不同的用戶在每個頁面上所看到的內容。然后,問自己:“為了展示某個特定的內容,我選用的UI控件是否合適?”

          你可能選了一個很好的UI控件,它可以完美地在桌面設備上工作,但對于手機用戶來說,它就并不是那么好用了。反之亦然。這就是為什么我們必須時刻牢記現今設計必須考慮多設備終端的原因。

           

          糟糕的觸摸區域

          微小的點觸目標會讓用戶感到沮喪,因為它們導致用戶難以完成預期的操作。我們都經歷過在智能手機上點錯按鈕,等待錯誤頁面加載時的沮喪感!

          所以,在設計可點擊元素時,請記住用戶的手指大小都是不同的:

          • 記住成年人食指的平均寬度是1.6-2cm,要設計適合手指點觸的目標。
          • 保證你的點觸目標至少有45-57px的寬度。這將給用戶足夠的空間擊中目標,而不必擔心準確性。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:UXRen  作者:Denislav Jeliazkov

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          把握創造力的5個層次,了解設計師如何成長!

          seo達人



          什么是創造力?對于在設計行業工作的人來說,這是一個很難回答的問題。如果谷歌搜索這個問題,會發現很多答案,比如:創造力就是創造新的東西。創造力就是把好的點連接在一起。創造力就是想出一個想法或一個新產品。我個人更喜歡下面的定義:“創造力是將新的和富有想象力的想法變為現實的行為。創造力涉及兩個過程:思考,然后生產?!?

           

          如果你有一個大膽的想法,但卻不付諸行動來實施它,證明你富有想象力但缺乏創造力。

          因此,創造力不僅僅是思考一個想法,還要把想法變成現實。下面是5個不同層次的創造力水平:

           

          層次一:復制

          圖片

          臨摹優秀的設計作品仍然是一種創造力。這是最低水平的創造力,只能用于培訓或練習的目的。

          我們不應該將這個層次的產出用于商業用途或者稱這個想法是自己原創的。

           

          層次二:復制+修改

          圖片

          為了提高水平,我們不能僅僅臨摹或復制某個東西,更需要修改它以適應現在的使用環境。這意味著我們必須開始把我們的想法投入到作品的創作中。

          這個層次的產出已經可以用于商業用途,但很大一部分工作仍在復制。

           

          層次三:復制+修改+改進

          圖片

          在這個階段,設計師已經達到了一定的成熟度。每個設計方案都必須放到產品應用的環境中,并且需要仔細考慮每個設計決策,以驗證這些方案或想法。

          例如,下圖是原版的添加新內容的動效設計,動畫效果相對復雜。

          圖片

          通過對這個動效進行修改和改進,下圖中輸出的設計更簡單,更容易在產品中實現,同時還減少了用戶在真實產品中可能無法識別的不必要的動畫效果。

          圖片

          在這個層次上,你可以被視為是一個高級設計師。

           

          層次四:趨勢制造者

          圖片

          作為趨勢制造者,技能必須處于較高的水平,每一個想法都能以獨特的方式執行,并且帶有自己的個人風格。

          這個層次的設計師的作品會受到大多數人的重視和評價,因此有足夠的支持來創造一個新的“趨勢”,激勵其他設計師甚至影響客戶使用這些作品作為他們的參考。

           

          層次五:系統制造者

          圖片

          這個層次的設計師是定義全新的設計并設置新創意的先驅,是其他人進行創意工作的基礎。

          在繪畫方面,我們有藝術流派:印象派、野獸派、立體派、超現實主義等。在技術方面,有“人機界面設計-iOS”或谷歌Material Design-Android。無論產品設計師是什么風格,他們的設計都必須遵循這兩個應用平臺的規則。

           

          最后

          創造力的五個層次分別是:

          復制

          復制和修改

          復制、修改和改進

          趨勢制造者

          系統制造者

          圖片

          通過了解創意層次希望能有助于你從另一個角度來看待創造力,了解創造力水平。

          現在的你處在哪個層次呢?

           

          原文地址:medium.com

          譯文地址:Clip設計夾(公眾號)

          作者:Hoang Nguyen

          譯者:Clippp

          轉載請注明:學UI網》把握創造力的5個層次,了解設計師如何成長!


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          競品分析:新浪新聞 VS 今日頭條

          資深UI設計者

          編輯導讀:隨著互聯網的迅速發展,人們越來越傾向于移動端瀏覽新聞資訊。一方是四大門戶之一,新聞資訊行業的“老人”,另一方也依靠著抖音的引流以及其眾多的視頻版權而爆火。本文將就著兩個新聞資訊類APP進行多方面分析,一起來看吧!


          一、產品概況

          1.1 產品概述及版本

          新浪新聞是新浪集團旗下的新聞資訊客戶端,致力于利用大數據和人工智能技術,為用戶提供更豐富、場景化和個性化的內容閱讀體驗。新浪新聞與微博打通了雙平臺的內容、數據和賬號體系,為用戶提供全網資訊、熱點要聞、深度精選、精彩視頻、高清圖集等精彩內容。

          新浪新聞始終服務于用戶的高品質內容閱讀需求,除了將新浪網各頻道創作的優質內容和精編專題推送給用戶,還與新華社、人民日報、中央廣播電視總臺等眾多權威主流媒體合作,為用戶提供高品質的新聞;此外,還邀請眾多不同領域的頭部自媒體創作者入駐,為用戶提供更多優質的長尾內容。

          截至2020年四季度,新浪新聞APP月活躍用戶已保持連續20個季度的高速增長,月活躍用戶規模達1.36億,日活躍用戶規模突破6850萬;手機新浪網日均用戶量達5774萬,月均用戶量超過1.76億;新浪移動月度生態流量突破5.1億,領跑全行業。

          最新版本7.61.0

          1.2 體驗環境

          • 設備型號:iphoneX
          • 操作系統:ios14.6
          • 測試網絡:電信4G

          1.3 選擇理由

          筆者是新浪新聞的老用戶,平時把新浪新聞app作為主要收看新聞的方式,作為自己產品生涯的第一份競品分析報告,選擇自己喜歡并且熟悉的app進行分析更加合適。

          而且沒有任何一款app是完美無缺的,在這個充斥著火藥味的市場中,出色的競品無時無刻不再盯著對手的一舉一動,資源爭奪戰一觸即發,新浪新聞如果想趕超對手,力壓群雄還有很長的路要走,只有增強自身的優勢,補足劣勢才能贏得更廣闊的市場。

          二、競品選擇

          2.1 選擇目標

          今日頭條(當前版本8.2.6)

          今日頭條是北京字節跳動科技有限公司開發的一款基于數據挖掘的推薦引擎產品,為用戶推薦信息、提供連接人與信息的服務的產品。由張一鳴于2012年3月創建,2012年8月發布第一個版本。

          2.2 選擇理由

          今日頭條基于個性化推薦引擎技術,根據每個用戶的興趣、位置等多個維度進行個性化推薦,推薦內容不僅包括狹義上的新聞,還包括音樂、電影、游戲、購物等資訊。是當今最熱門的新聞手機客戶端之一,并且通過抖音引流,有大量的新用戶涌入,有很多值得學習和借鑒的地方。

          2.2.1 市場分析

          資訊市場概覽:

          • 新資訊行業在疫情期高峰過后用戶需求有所減退2020年3月至5月活躍用戶規模逐月下降;但到了6月至7月,也許是受到“畢業季”的影響,行業活躍用戶出現了小波幅的增長,7月份的MAU接近7億。
          • 作為連接用戶與信息的橋梁,內容對于新資訊平臺來說是長久吸引并留住用戶的核心要素;資訊內容已從最初單一的專業采編發展成百花齊盛的生產模式,現階段內容生態正在逐步完善。
          • 目前資訊內容的建設已發展出自采自編、自建生態及內容聚合三種模式;自采自編模式可以保障內容質量內容聚合模式下的內容豐富度更高,而自建生態模式則結合了上述二者的優點。

          2.2.2 市場趨勢以及行業現狀

          2.2.2.1新聞資訊行業發展趨勢

          新聞資訊行業從2012年的PC門戶時代,經過移動化、視頻化發展,進入基于5G和物聯網帶來的智能新時代。資訊平臺整體月活超6億,覆蓋近八成的移動網民。

          由用戶每月使用到的各類app統計圖來看,新聞排在第6位,有效使用時長排在第4位,說明新聞類的app在人們日常生活中的使用較為頻繁,部分用戶有通過新聞類app了解資訊的習慣。

                                                         數據來源:艾瑞數據

          2.2.3 競品市場規模

          2.2.3.1 新資訊行業活躍用戶規模

          2020年3月開始,隨著疫情的好轉,新資訊行業整體呈現退潮效應活躍用戶規模回落至相對正常水平;到了6月至7月,也許是受到“畢業季”的影響,用戶對于高考、大學志愿填報、招聘等相關資訊內容需求增加,行業活躍用戶出現了相對明顯的增長,7月份的MAU接近7億,環比Q2的4月份增長約1500萬,但隨后又有所回落。

          2.2.3.2 用戶活躍度

          移動互聯網市場已經全面進入存量時代,用戶結構趨于穩定。新聞資訊領域MAU達6億,今日頭條、騰訊新聞、新浪新聞三強鼎立,逾七成的新用戶流向這三家。

          對比2020年和2021Q1新聞資訊市場MAU、同比變化情況,新浪新聞增長強勁,2020年同比增長60%,2021仍能保持行業里較高水平的增長,從行業第三居上,超過騰訊新聞,成為行業第二;搜狐新聞同比增長在行業里排名第一;看點快報、趣頭條MAU連續下跌。

          2.2.3.3 用戶使用時長

          2016-2019年,移動設備單月使用次數呈升高趨勢,但使用時長有明顯下降。2021Q1今日頭條、新浪新聞、趣頭條都超過40分鐘,而排名較后的看點快報、網易新聞、騰訊新聞在20分鐘以內;排名靠前的新浪新聞、排名較后的騰訊新聞、網易新聞的同比增長率較高,趣頭條、搜狐新聞的用戶使用時長縮短。

          2.2.3.4 下載次數

          2.2.3.5 平臺滲透率

          在主要新資訊平臺中,百度APP的用戶量級處于絕對領先地位,2020Q3滲透率達42.7%,較去年同比有2個百分點的增長。今日頭條和新浪新聞等資訊平臺在Q3均沒有較大幅度的滲透率增長,甚至多數平臺同比為負增長。

          2.2.3.6 日均新增用戶

          2020Q2及Q3,百度APP平均每日新增用戶數均為150萬左右,屬主要資訊平臺中新增用戶量級最大的平臺,且在03較去年同期的新增用戶多出40萬,新浪新聞在03較去年同期新增用戶為10.3萬,而今日頭條等新增用戶量同比卻有較大幅度的縮減。

          三、競品定位以及用戶分析

          3.1 產品定位

          3.2 使用人群性別占比

          新浪新聞:

          今日頭條:

          數據來源:艾瑞數據

          從上圖可以看出,不管是今日頭條還是新浪新聞,男性用戶略多。

          3.3 使用人群年齡占比

          新浪新聞:

          今日頭條:

          數據來源:艾瑞數據

          由上圖不難發現,在31歲以上的使用人群中,占比是隨年齡增長而遞減的,說明隨年齡增長習慣使用手機來獲取新聞資訊的人越來越少。兩者人群年齡結構差異主要體現在35歲以下的使用人群當中,新浪新聞使用最多的用戶群體在24歲以下,而今日頭條使用最多的用戶群體在25-30歲。新浪新聞使用群體結構更加年輕化,隨著年齡的增長逐漸遞減。今日頭條在25歲以上的用戶群體中則均比新浪新聞占比要多??梢钥闯觯吕诵侣勍扑偷膬热菀约笆褂梅绞娇赡芨苣贻p人的青睞。

          3.4 使用區域占比

          新浪新聞:

          今日頭條:


          數據來源:艾瑞數據

          分析建議:兩者都有顯著的特點,用戶群多都集中在沿?;蛘呓洕^為發達的地區,說明經濟條件較好的地區人們有更大的新聞熱點資訊需求,更習慣使用新聞類的app,新浪新聞可以增強對內地市場的拓展,搶先占據市場。

          3.5 用戶主要使用場景時長

          由于移動互聯網的普及,用戶方方面面都離不開互聯網,同時,人們對移動新聞客戶端的依賴性也逐漸上升,大概分析了下具體的使用場景有以下:

          • 使用場景一:某一白領在早上醒來的時候,會想盡早看到早上的頭條新聞,就會打開手機用新聞客戶端看新聞。
          • 使用場景二:這個白領在吃完中飯,午休的這段時間,拿出手機看一下有沒有什么有趣娛樂的休閑新聞來打發時間。
          • 使用場景三:下班回家,乘地鐵的時候,坐下來尋找看看自己感興趣話題的新聞。

          3.6 用戶對資訊內容形式偏好

          用戶對于資訊內容的形式偏好發生改變,視頻化趨勢明顯

          近年來,用戶對于圖文形式的資訊內容偏好度有所減少,更多的注意力轉移到短視頻、長視頻及直播上;其中,短視頻憑借“簡短有力”的特質,在整個內容產業迅速幕延,直播則具備全時性、即時性、互動性等特點,極大地豐富了用戶獲取資訊的體驗,同時也為平臺的商業變現提供了很大的機會;在未來,隨著5G技術的發展,互聯網直播的體驗將會有很大的提升,屆時資訊+直播的形式或會搶占用戶更多的注意力

          數據來源:極光數據

          分析:內容載體越來越豐富,用戶對于資訊短視頻的偏好度明顯提升,而剛起步不久的資訊直播形式則極具發展潛力。今日頭條通過加大各類視頻的發展力度也吸引了大批用戶流入。但是新浪也沒必要仿照今日頭條的發展路線,在做好自身各項新聞資訊功能的同時,完善優化視頻專欄。

          四、產品結構

          今日頭條:

          結構分析:

          不難看到目前版本由四大板塊組成(頭條,西瓜視頻,放映廳,我的),先來看一下首頁板塊,其實首頁作為一款App的核心用戶場景,結構簡潔肯定是用戶非??粗氐囊蛩?,可以看到頭條的首頁其實很簡單,就是由頻道標簽(包括)以及編輯、搜索組成,簡潔但又能突出重點。緊接著西瓜視頻板塊的話跟首頁類似,但分類的顆粒度要遠大于首頁相比之前的版本,今日頭條取消了底部的微頭條,更換成了播放長視頻的放映廳。

          前三部分的簡潔化,使得頭條將更多的功能堆放在了“我的”中,這也使得今日頭條又有點娛樂視頻類app的成分。雖然功能做多做復雜會使產品偏離最初的產品定位,但這些內容也不無顯示著今日頭條新的嘗試與業務擴展方向,但作為用戶的話,還是希望產品簡單便捷易用,好在功能添加的地方并不明顯,也能使用戶較為容易的接受。

          新浪新聞:

          結構分析:

          新浪新聞底部由首頁,視頻,發現,我的組成。和今日頭條類似,首頁看起來非常簡潔,就是緊湊的各類新聞,緊接著是分類顆粒較大的視頻頁,與今日頭條不同的是新浪新聞第三欄為發現欄,點開后首先顯示的就是實時熱點,也更加方便人們快速了解熱度較高的新聞,并且發現頁面的分類也更明確。發布動態選項在此頁,底欄位置也和微信朋友圈位置一樣,方便人們更快的習慣軟件。而在我的選項欄則較為復雜,匯集較多功能在此,可執行的操作也更多。與今日頭條相比,新浪更加注重新聞資訊相關內容,而今日頭條則把一部分重點放在了各類視頻上。

          五、核心功能

          5.1 產品更迭

          新浪新聞:

          • 運營:高考上線專題報道、志愿寶典,疫情時上線大量查詢工具,DAU猛增。在財經上,是其他平臺資訊的來源。娛樂活動方面有優勢,“微博之夜”是獨家,上線明星打榜功能。
          • 功能:發現頁中有精選功能、熱門流、話題貼,新增小視頻彈幕、熱點、熱評榜、聲浪、聽書、“釘”在桌面功能。熱榜、快訊功能上線較早,明星打榜、爆款評論聲浪是特色。

          今日頭條:

          • 從版本信息可以看出,頭條早期在完善產品功能,促進用戶關注大V和朋友,促進用戶互動,增加dislike、幫上頭條功能,優化推薦系統,2016年就支持視頻直播聊天了,上線熱搜、熱榜。目前熱榜有頭條熱榜、今日關注、本地熱榜(疑似下線)。
          • 2020年上線疫情專區、放映廳,小說頻道新增千本書籍。

          5.2 功能差異

          雖然資訊類產品的同質性較高,但通過功能分析可以看出:

          • 新浪新聞:新聞功能全面很全面,背靠微博資源,在娛樂方面有獨特優勢。
          • 今日頭條:推薦流中有問答;底部tag有放映廳功能(資金雄厚才能買得起版權);西瓜視頻(偏中長)和小視頻的展示分開,內容豐富。

          5.2.1 P/UGC

          除用戶評,新浪新聞雖然可以發布UGC內容,但幾乎只在話題里曝光,更偏向PGC平臺。

          今日頭條可以發布UGC內容,支持發布直播和問答 ,其他產品只支持圖文、視頻。頭條還會將用戶在抖音里發布的內容同步過來,偏向于PUGC平臺。

          5.2.2 特色頻道

          今日頭條除了有豐富的視頻資源外,未發現特色頻道。新浪有微天下、【聲浪】熱評以及網羅各類明星新聞八卦的星浪圈。【聲浪】熱評功能會將用戶熱評顯示到相應的資訊頁面,加強用戶與產品的互動,鼓勵用戶參與新聞資訊評論與探討,增加用戶黏度。

          5.2.3 熱榜

          今日頭條熱榜包括事件詳情、相關內容等,目前還沒有做垂類熱榜。新浪新聞很好地利用了微博的資源,在熱榜上榜單更加豐富,分類更加細致明確。

          5.2.4 放映廳

          今日頭條擁有有放映廳功能,擁有眾多電影、電視劇、動漫等欄目的版權,并且免費、沒有廣告。這也是今日頭條滲透率高的重要原因。

          5.2.5 推送

          推送是內容平臺的重要業務,占據各公司相當比例的DAU。 oppo、vivo廠商操作系統對推送數量限額,且用戶默認關閉系統通知權限,而華為、Apple等機型無限制所致。各個競品的推送包括全量、個性化、地方推送等,作用都是提高用戶活躍度。

          今日頭條、版權豐富,有獨家內容,今日頭條部分內容會在收到其他競品push后很久收到,可能為機器推送。新浪新聞速度較快,而且文案質量更高。

          數據來源:艾瑞數據

          六、交互設計

          以下筆者將站在交互和設計的角度,分析兩者在各個功能和流程界面設計優劣,比如登陸頁面、我的界面,搜索界面等。

          6.1 加載頁面

          新浪:                                                                                    今日頭條:

          在加載頁面兩者都能體現各自的風格。對比來看,今日頭條使用純白色背景簡潔舒適,紅色字體的slogan方方正正,極具現代化。

          而對于加載頁面而言新浪新聞做的仿佛更加優秀(個人主觀),使用白色和淺灰的山水畫作為背景,“大浪逐新”中間黑色書法字體slogan顯得瀟灑飄逸且極為醒目。融入了中國文化元素,第一次就能給用戶留下很深刻的印象。

          6.2 登錄頁面

          • 可以明顯看到今日頭條的登錄頁面更加簡潔,由于抖音app龐大的用戶群體,將抖音一鍵登錄選項設置為紅色長按鍵放在正中央,十分醒目;而把手機登陸放在下端,微信、QQ登陸放在了隱藏欄;這也能看出來字節跳動對自身賬號體系的信心,如此登錄便無需其他多余操作,給用戶流暢的體驗感。
          • 新浪新聞則是將手機驗證登陸放在首選,需要用戶手動輸入手機號碼并且獲取驗證碼登陸。其它選項則依次排列在下端。把“登錄賺金幣”的標語放在頂端來誘導用戶登錄。總體看來登錄頁面信息布局要比今日頭條密度更大。

          6.3 首頁

          新浪新聞:

          • 兩者都是以紅白作為主色調,將分類置于搜索欄下方并且可以在分類最右端編輯自己的頻道。點擊相應頻道便是相關內容資訊,十分方便。文章與文章之間的間距適當,翻閱點擊新聞方便,給人以效率簡單的感覺。由之前的核心功能分析可知今日頭條的發布功能更加全面,所以今日頭條將其放在了搜索欄的右邊。而新浪新聞較今日頭條的明顯優勢便是其熱榜功能,所以將其放在了比較顯眼的位置,用戶打開app便可以注意到搜索欄邊上的熱榜功能,而今日頭條主頁頻道里的熱榜則需要用戶手動添加編輯。
          • 搜索界面來看,兩者的歷史記錄包括清除搜索歷史記錄選項都置于搜索欄下端,這也符合用戶使用搜索功能的習慣,但是今日頭條在下方加入了無痕瀏覽模式的選項,對于不想保留搜索歷史的用戶可以直接在此處進行模式的選擇,無需在切換別的頁面去設置。布局方面今日頭條十分簡單,白色背景給人以清新爽朗的感覺,猜你想搜功能非常的顯眼,會根據用戶平時的搜索習慣顯示相關內容,吸引用戶點擊瀏覽。并且熱度較高的新聞話題會在邊上有一個紅色的“熱”字標注,點擊便可進入話題,和頭條熱榜;而新浪新聞把其有突出優勢的熱搜榜和其獨特的熱評榜放在了此處,占據了主要空間,用戶在搜索的同時便能注意到實時熱點資訊以及各種有趣的熱評,吸引用戶點擊進入相關內容。
          • 新浪新聞在首頁添加了收聽功能,分為聽書和聽新聞。并且點擊之后直接自動播放,免去了用戶思考的時間。并且圖片加上新聞標題的排版會提高用戶的收聽興趣。這一功能也增加了用戶了解新聞資訊的方式,無需通過手動操作便可以收聽新聞,能讓用戶在忙于其他事情的同時也使用這一功能收聽了解資訊。

          建議:可以在收聽功能中也加入熱榜,使用戶也能通過收聽的方式了解各類熱門事件。根據個人喜好推送相關內容,培養用戶收聽新聞資訊的習慣,增加用戶黏性。

          6.4 熱榜

          • 新浪新聞熱榜以深色為背景界面清新、沉浸感十足。而今日頭條則是象征著“熱”的紅色,畫面霸氣簡單,一片紅色讓用戶產生極強視覺沖擊效果,給用戶留下很深刻的印象。
          • 因為其豐富的微博資源,從之前的結構圖可以發現新浪新聞其實很多頁面都能進入熱榜,并且位置很醒目。因為其豐富的微博資源,熱榜分類很多,并且在第一條熱榜擁有配圖,能更直觀的了解最熱資訊。擁有垂直類熱榜,用戶能夠了解更多類別以及相關方向的熱點。而今日頭條則相對簡單,只有頭條熱榜和本地熱榜,供用戶選擇不多。

          6.5 視頻推薦頁

          新浪新聞的視頻頁整體布局為白和淡灰,看起來非常整潔,推薦欄下又進行了一系列分類來供用戶選擇,雖然種類更多,但是給人有點眼花繚亂的感覺,與上端分類略顯重復;今日頭條則是將紅色為主色調的頂欄貫穿了首頁,視頻以及放映廳,使用戶隨時可以在當頁進行搜索功能。

          建議:新浪新聞的視頻分類比較多,可以嘗試增加根據用戶觀看視頻偏好把頂端分類自動做排序的功能。

          新浪新聞滑動到視頻相應位置的時候視頻會自動播放,但是沒有聲音,這種模式用戶不用點開視頻便可以了解到視頻的開頭內容,這樣,部分視頻便會吸引用戶點擊進入觀看完整視頻。二級頁面有點類似抖音的播放模式,通過上下滑動來播放視頻,這種模式的優點便是可以提高用戶的觀看興趣,因為不知道下一個視頻是什么,便會更想滑到下一個視頻去觀看。而且除了對應的推薦視頻,旁邊還有熱榜,可以以短視頻的方式來了解熱點資訊,并且熱點視頻下端會標記熱度排名,用戶體驗感好。

          今日頭條的視頻不會跳轉二級頁面播放,點擊后滑到相應位置便會自動播放,這樣的播放視頻的方式免去了很多操作步驟,使用戶操作起來更加簡單便捷。

          6.6 我的頁面

          布局方面今日頭條從簡潔清新的風格出發,包括圖標、背景顏色、功能布局等等都是給人小而精致的感覺。記而新浪新聞則以紅色占據了頂端空間,與下面的白色背景形成視覺反差,兩個顏色分割明顯,給人一種突然斷層的感覺,視覺效果不比今日頭條好。

          新浪下端加入了簽到功能以及福利任務功能,可以提高用戶使用應用的樂趣,促使用戶每天使用今日頭條,增加用戶黏性。新浪新聞在常用功能里也分了三頁,可以看出來功能明顯多于今日頭條。但同時也會導致頁面排版較為凝重密集。

          七、產品優劣勢

          基于以上的分析,將兩款APP進行基于SWOT模型的一個整體的分析。

          八、總結

          從SWOT模型中我們可以清楚的了解到兩款APP之間的優勢與不足,目前聚合信息流平臺產品已進入下半場,進入存量用戶時代,之后產品迭代應該會逐漸放緩,各個競品會在每次熱點事件發力,并加速布局其他賽道。

          在我看來,產品的基礎能力包括冷啟動、推薦算法、內容從產出到展現鏈條、推送策略、廣告可適應性、促進互動等等,今日頭條擅長算法,冷啟動準確率高,新浪的推送質量高,運營上反應迅速。

          各大新聞媒體客戶端在自身產品上,至少在核心功能都已經很完善了,不管是功能上還是用戶體驗上,而基于各自的定位,其用戶群也各不相同,所以,這一點上,保持自身特色很重要。而現在目前限制新聞類資訊發展的阻礙,內容同質化很嚴重,所以繼續增加優質內容,將大數據與優質算法結合的優點繼續保持,才是重點。內容差異化極其重要,優秀創作者和IP資產將成為頭部新資訊平臺搭建內容生態壁壘的聚焦點。至于是誰能夠脫穎而出最后穩坐行業龍頭,現在還不好說。

          而現在整個行業,用戶正在朝著碎片化,移動化,垂直化發展,媒體外延不斷擴展,小而精的媒體資訊也成為用戶的需求,而隨著硬件的發展,包括智能可穿戴設備的發展,用戶接受信息的渠道進一步增加,新浪新聞能否針對這些變化做出正確的改變,也是對整個團隊的考驗

          未來內容生態趨勢:

           視頻化

          用戶更加喜好視頻化資訊內容,頭部資訊平臺持續加碼,布局短視頻、直播內容以吸引用戶注意力,同時通過扶持、孵化內容創作者以及打造核心IP來筑建自身的內容生態壁壘5G、點云和可穿戴設備等技術的發展可能會從采編到分發形態給新聞行業帶來革新,直播體驗會有很大提升,資訊+直播會搶占用戶更多注意力。

          ② 新熱內容

          熱點是能吸引兩個領域及以上用戶的內容,目前新浪新聞在熱榜上做得比其他競品較為完善,新浪熱榜也是2021Q1 MAU大漲26.9%的原因,未來今日頭條或許將籌備個性化的興趣熱榜,更好滿足用戶對科技、財經、體育等垂直領域用戶。

          ③ 深度內容

          獲取深度信息的用戶,沉浸行為相對穩定,根據巨量引擎的今日頭條人群洞察報告,這部分用戶更喜歡娛樂、體育內容,平臺使用頻率相對低,但粘性和使用時長相對高。滿足這些人的需求,可能對平臺留存、品牌和調性的塑造有正面影響。

          筆者對新浪新聞的幾點完善優化建議:

          • 根據用戶使用時段偏好,新浪平臺更應重點提高使用高峰時段新聞的質量,并且增加高峰時段推送新聞的頻率來吸引用戶。不應在使用頻率較低的時間段過于頻繁的推送新聞,此時人們大多數忙于自己的事情,較少有空閑時間去瀏覽新聞,此時推送新聞可能導致用戶關閉手機app通知權限。
          • 吸引更多優質媒體的入駐,讓自媒體作家與自家平臺簽獨家協議,可以推出類似今日頭條“創作者計劃”活動,大力鼓勵創作,打造更多的新浪新聞獨家內容,為了提供優質化內容做努力。
          • 加強新聞推送審核,根據App Store差評用戶反饋,“標題黨”“文章內容質量差”出現較為頻繁,可以增加文章類似“踩”的差評功能,根據媒體發表的歷史文章質量以及好評率決定推送媒體文章的先后順序.

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:人人都是產品經理   作者:-_Maybe

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          Centos7 Yum安裝 PHP5.5,5.6,7.0

          前端達人

          默認的版本太低了,手動安裝有一些麻煩,想采用Yum安裝的可以使用下面的方案:

          1.檢查當前安裝的PHP包
          yum list installed | grep php
          如果有安裝的PHP包,先刪除他們
             yum remove php.x86_64 php-cli.x86_64 php-common.x86_64 php-gd.x86_64 php-ldap.x86_64 php-mbstring.x86_64 php-mcrypt.x86_64 php-mysql.x86_64 php-pdo.x86_64
          2.Centos 5.X
              rpm -Uvh http://mirror.webtatic.com/yum/el5/latest.rpm
            CentOs 6.x
              rpm -Uvh http://mirror.webtatic.com/yum/el6/latest.rpm
            CentOs 7.X
          rpm -Uvh https://mirror.webtatic.com/yum/el7/epel-release.rpm
          rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm
           
          如果想刪除上面安裝的包,重新安裝
          rpm -qa | grep webstatic
          rpm -e  上面搜索到的包即可

          3.運行yum install
            yum install php55w.x86_64 php55w-cli.x86_64 php55w-common.x86_64 php55w-gd.x86_64 php55w-ldap.x86_64 php55w-mbstring.x86_64 php55w-mcrypt.x86_64 php55w-mysql.x86_64 php55w-pdo.x86_64

          yum install php56w.x86_64 php56w-cli.x86_64 php56w-common.x86_64 php56w-gd.x86_64 php56w-ldap.x86_64 php56w-mbstring.x86_64 php56w-mcrypt.x86_64 php56w-mysql.x86_64 php56w-pdo.x86_64

          注:如果想升級到5.6把上面的55w換成56w就可以了。

          yum install php70w.x86_64 php70w-cli.x86_64 php70w-common.x86_64 php70w-gd.x86_64 php70w-ldap.x86_64 php70w-mbstring.x86_64 php70w-mcrypt.x86_64 php70w-mysql.x86_64 php70w-pdo.x86_64

          4.安裝PHP FPM
          yum install php55w-fpm 
          yum install php56w-fpm 
          yum install php70w-fpm

          注:如果想升級到5.6把上面的55w換成56w就可以了。

           

          我們要使用yum來安裝php-fpm和比較新版本的php,nginx,MySQL-server的話, 首先得給yum添加幾個源,CentOS默認的源里面軟件比較舊,有些軟件、庫還沒有。

          EPEL源:

          Extra Packages for Enterprise Linux (or EPEL)或者叫企業版 Linux 附加軟件包, 是一個由特別興趣小組創建、維護并管理的,針對 紅帽企業版 Linux(RHEL)及其衍生發行版 (比如 CentOS、 Scientific Linux)的一個高質量附加軟件包項目。

          EPEL 的軟件包通常不會與企業版 Linux 官方源中的軟件包發生沖突,或者互相替換文件。 EPEL 與 Fedora 項目基本一致,包含完整的構建系統、升級管理器、鏡像管理器等等。

          EPEL源官方網站:https://fedoraproject.org/wiki/EPEL

          添加EPEL源:

          32位CentOS,在命令行運行下面命:  rpm -ivh http://mirrors.ustc.edu.cn/fedora/epel/6/i386/epel-release-6-8.noarch.rpm  

          64位CentOS,在命令行運行下面命令:  rpm -ivh http://mirrors.ustc.edu.cn/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm  

          EPEL源只能作為CentOS官方源的補充,里面還都是一些系統基礎的軟件包, 我們要安裝的php,php-fpm,mysql等軟件里面還是沒有,所以接下來添加另一個軟件源Remi。

          Remi源中的軟件幾乎都是最新穩定版?;蛟S您會懷疑穩定不?放心吧, 這些都是Linux骨灰級的玩家編譯好放進源里的,他們對于系統環境和軟件編譯參數的熟悉程度毋庸置疑。

          Remi官方網站:http://rpms.famillecollet.com/

          添加Remi源,不管32位還是64位的系統,運行下面命令:   rpm -ivh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm  

          Remi源默認是沒有啟用的,我們來啟用Remi源,修改 /etc/yum.repos.d/remi.repo 文件,把文件內的 enabled=0 改為 enabled=1 ,注意:改文件內有2個 enabled=0 我們修改[remi]下面的,不要修改[remi-test]下面的。

          到這里yum源的配置結束,下面安裝軟件就簡單了。安裝時候有詢問y/n的時候都是y

          安裝php,php-fpm以及php擴展:  yum install php php-fpm php-bcmatch php-gd php-mbstring php-mcrypt php-mysql  

          PHP配置文件php.ini路徑: /etc/php.ini 

          php-fpm配置文件php-fpm.conf路徑:/etc/php-fpm.conf

           

          成功只是比失敗多走了一步而已,堅持自己的夢想,永不言棄!






          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          轉自:csdn 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          CentOS 7 64位下MySQL5.7卸載改成MySQL5.6版本(YUM)

          前端達人

          1: 檢查是否安裝了MySQL組件。

          [root@DB-Server init.d]# rpm -qa | grep -i mysql
          mysql-community-client-5.7.19-1.el7.x86_64
          mysql-community-common-5.7.19-1.el7.x86_64
          mysql-community-libs-compat-5.7.19-1.el7.x86_64
          mysql-community-libs-5.7.19-1.el7.x86_64
          qt-mysql-4.8.5-13.el7.x86_64
          mysql57-community-release-el7-11.noarch
          mysql-community-server-5.7.19-1.el7.x86_64
          perl-DBD-MySQL-4.023-5.el7.x86_64 

          2: 卸載前關閉MySQL服務

          systemctl stop mysqld

          yum -y remove mysql-community-client-5.7.19-1.el7.x86_64
          yum -y remove mysql-community-common-5.7.19-1.el7.x86_64
          yum -y remove mysql-community-libs-compat-5.7.19-1.el7.x86_64
          yum -y remove mysql57-community-release-el7-11.noarch
          yum -y remove mysql-community-server-5.7.19-1.el7.x86_64

          3:刪除MySQL對應的文件夾

          檢查各個MySQL文件夾是否清理刪除干凈。

          [root@DB-Server init.d]# whereis mysql
          mysql:
          [root@DB-Server init.d]# find / -name mysql
          /var/lib/mysql
          /var/lib/mysql/mysql
          /usr/lib64/mysql
          [root@DB-Server init.d]# rm -rf /var/lib/mysql
          [root@DB-Server init.d]# rm -rf /var/lib/mysql/mysql
          [root@DB-Server init.d]# rm -rf /usr/lib64/mysql

          4:確認MySQL是否卸載刪除

          [root@DB-Server init.d]# rpm -qa | grep -i mysql


          5:重新安裝MySQL5.6版本,主要參考 (略寫,主要參考以下鏈接)

          http://blog.csdn.net/huhuhuemail/article/details/77498891

          shell> wget https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm shell> yum mysql57-community-release-el7-11.noarch.rpm  
          
          1. 這步如果報錯:已加載插件:fastestmirror, langpacks
          2. 沒有該命令:mysql57-community-release-el7-11.noarch.rpm。請使用 /usr/bin/yum --help
          改用以下命令:
          1. yum localinstall mysql57-community-release-el7-11.noarch.rpm
          1. shell> yum repolist enabled | grep "mysql.*-community.*"
          1. shell> yum install mysql-community-server
          1. 修改mysql配置文件
          啟動MySQL服務






          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          轉自:csdn 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          mysql下載哪個centos_Centos7安裝Mysql

          前端達人

          為什么要寫這篇文章,因為現在在網上找的資料基本都是錯誤的,或者有錯誤,看著不爽。

          在百度上搜 centos7 mysql  錯的最離譜的就是這篇http://jingyan.baidu.com/article/ce436649fec8533773afd385.html    照著裝了半天裝了是mariadb

          后來找了一些文章,發現基本都過時了。

          因為直接yum install mysql 是裝不上mysql的?。?  而是裝上了mariadb !   那就是因為默認的倉庫里就是mariadb的包

          那yum這么好的工具用不了就?? 當然有解決辦法,我在官網上找到一篇文章叫做“A Quick Guide to Using the MySQL Yum Repository“  就是教我們如何用yum工具安裝mysql的

          首先 將mysql加到yum倉庫中   (我這的命令都是centos7的,其他liunx平臺用啥命令,你們自己搞定哈)

          shell >  wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm

          shell >  rpm -ivh mysql-community-release-el7-5.noarch.rpm

          然后再在命令行里輸入

          shell >  yum repolist all | grep mysql

          結果:

          mysql-connectors-community/x86_64 MySQL Connectors Community enabled: 14

          mysql-connectors-community-source MySQL Connectors Community - So disabled

          mysql-tools-community/x86_64 MySQL Tools Community enabled: 19

          mysql-tools-community-source MySQL Tools Community - Source disabled

          mysql55-community/x86_64 MySQL 5.5 Community Server disabled

          mysql55-community-source MySQL 5.5 Community Server - So disabled

          mysql56-community/x86_64 MySQL 5.6 Community Server enabled: 154

          mysql56-community-source MySQL 5.6 Community Server - So disabled

          mysql57-community-dmr/x86_64 MySQL 5.7 Community Server Deve disabled

          mysql57-community-dmr-source MySQL 5.7 Community Server Deve disabled

          一堆disabled,只看enable的,可以輸入命令

          shell >  yum repolist enabled | grep mysql

          結果:

          mysql-connectors-community/x86_64 MySQL Connectors Community 14

          mysql-tools-community/x86_64 MySQL Tools Community 19

          mysql56-community/x86_64 MySQL 5.6 Community Server 154

          這里再多數一句,可以看到先在mysql5.6 是可用的,可我就想裝現在最新版的5.7可咋辦?   是有辦法的。

          需要修改文件,執行以下命令

          shell > vi  /etc/yum.repos.d/mysql-community.repo

          會看到

          [mysql-connectors-community]

          name=MySQL Connectors Community

          baseurl=http://repo.mysql.com/yum/mysql-connectors-community/el/7/$basearch/

          enabled=1

          gpgcheck=1

          gpgkey=file:/etc/pki/rpm-gpg/RPM-GPG-KEY-mysql

          [mysql-tools-community]

          name=MySQL Tools Community

          baseurl=http://repo.mysql.com/yum/mysql-tools-community/el/7/$basearch/

          enabled=1

          gpgcheck=1

          gpgkey=file:/etc/pki/rpm-gpg/RPM-GPG-KEY-mysql

          # Enable to use MySQL 5.5

          [mysql55-community]

          name=MySQL 5.5 Community Server

          baseurl=http://repo.mysql.com/yum/mysql-5.5-community/el/7/$basearch/

          enabled=0

          gpgcheck=1

          gpgkey=file:/etc/pki/rpm-gpg/RPM-GPG-KEY-mysql

          # Enable to use MySQL 5.6

          [mysql56-community]

          name=MySQL 5.6 Community Server

          baseurl=http://repo.mysql.com/yum/mysql-5.6-community/el/7/$basearch/

          enabled=1

          gpgcheck=1

          gpgkey=file:/etc/pki/rpm-gpg/RPM-GPG-KEY-mysql

          # Note: MySQL 5.7 is currently in development. For use at your own risk.

          # Please read with sub pages: https://dev.mysql.com/doc/relnotes/mysql/5.7/en/

          [mysql57-community-dmr]

          name=MySQL 5.7 Community Server Development Milestone Release

          baseurl=http://repo.mysql.com/yum/mysql-5.7-community/el/7/$basearch/

          enabled=0

          gpgcheck=1

          gpgkey=file:/etc/pki/rpm-gpg/RPM-GPG-KEY-mysql

          我們只需要把5.7的enabled 改成1  把5.6的enabled改成0 就行了。 我裝啥版本無所謂,這塊我沒有親自去試過,直接安裝默認版本。

          上邊所有的工作都做完了,我們終于可以用我們最喜歡的yum來安裝了

          shell >  yum install mysql-community-server

          安裝過程省略,一路按y

          成功之后,啟動mysql

          shell > service mysqld start

          查看mysql 的狀態

          shell > service mysqld status

          現在還需設置root的密碼,刪除匿名用戶等一些設置,我看其他文章寫的很復雜,其實有一個簡單的命令

          shell > mysql_secure_installation

          初始密碼為空,直接按回車鍵,然后輸入你想設置的密碼,其他的根據你自己的需求,y或者n

          that is all

          如果有錯誤,請及時聯系,互相學習,互相進步,謝謝。





          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          轉自:csdn 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          mysql導入sql文件出錯的一種解決方法

          前端達人

           在一個工程中數據庫往往要分為實際運用數據庫和測試數據庫,最直接的方法當然是從源數據庫中導出.sql文件再導入到本地的數據庫中,我這的實例是原有一個項目數據庫在服務器上現在想導出一份到本地做測試用,工程中用的是mysql-connector-java-5.1.13-bin.jar,而我現有的mysql數據庫是

          mysql-connector-java-5.1.6-bin.jar不知道是否是版本不一,在本地使用navicat for mysql可以連接到服務器數據庫,但是從服務器數據庫導出的.sql文件后再導入到本地的數據庫中總是出現錯誤:

          [Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ****
          [Err] /*

              一、在網上找了很多方法都無法解決,無意中看到一個mysql數據同步的方法:

           1>在本地建一個與數據庫同名的數據庫

           2>選擇navicat中連接服務器的數據庫,在菜單欄選擇工具-->數據傳輸


            3>在彈出的的窗口中“源”部分就是你要導出的源數據庫,“目標”就是本地的數據庫,點擊左下角全選后,再點擊開始按鈕


               點擊確定


              點擊關閉




               再來查看一下本地數據庫,是不是數據和結構都已經導入到本地數據庫中了呢。

              二、從備份中導出.sql再導入到本地數據庫中

              1>在連接服務器中的數據庫上新建備份,選中要備份的數據庫-->點擊菜單欄上的備份-->新建備份


              2>選擇備份文件提取SQL






          這樣我們就得到了備份轉儲的.sql文件,再將這個.sql文件導入到本地的數據庫中,結果...就不再提示有錯誤了,

          果真是菜鳥,要學的還很多


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          轉自:csdn 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          app界面賞析+圖標分享 ——— 北京藍藍設計 移動端UI設計資源分享(二十八)

          前端達人

          App界面設計對于設計師而言一直是盛久不衰的話題,尤其是如今越來越多的流量轉移到了移動平臺,使得更多的UI設計師涌入移動端領域,甚至出現了市場飽和的言論,對于從事移動端的UI設計師來講,充滿壓力的同時又面臨無限機遇,唯有不斷的學習才能滋生出源源不斷的設計靈感,站穩腳跟。

          摹客想在這方面給各位設計師朋友做點什么,除了提供簡單好用的設計工具,我們也整理了非常多的優秀設計案例,希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題,我們以月為單位,整理了國內外設計師的優秀APP界面設計案例,我們是搬運工,更是好設計的傳達者,希望你會喜歡。

          接下來為大家分享精美的app UI設計案例:


          WechatIMG2101.jpegWechatIMG2102.jpegWechatIMG2103.jpegWechatIMG2104.jpegWechatIMG2105.jpegWechatIMG2106.jpegWechatIMG2114.jpegWechatIMG2112.jpegWechatIMG2111.jpegWechatIMG2110.jpegWechatIMG2109.jpegWechatIMG2107.jpegWechatIMG2115.jpegWechatIMG2116.jpegWechatIMG2117.jpegWechatIMG2118.jpegWechatIMG2119.jpeg














          --手機appUI設計--

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



            更多精彩文章:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                手機appUI界面設計賞析(十九)

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

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

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

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

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

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

          日歷

          鏈接

          個人資料

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

          存檔

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