Apple'ın yeni kitabında kurumsal tasarımın tarihi. "Apple stili" nedir? Ve hepsi bu

giriiş

Konu tasarım olunca hatırlamamak mümkün olmayan bir firma var. Bu Apple şirketidir; sahip oldukları her ürün, bir tasarımcı ekibinin çalışmasının sonucudur. Bu firmanın web sitesi de her zaman ilgi görmüştür.

Bu derste bir galeri yapacağız - "a la" Apple slayt gösterisi. Şirketin ürünlerini sunmak için Apple web sitesinde de yaklaşık olarak aynısı kullanılıyor. Bunu oluşturmak için PHP'ye veya bir veritabanına ihtiyacımız yok.

ADIM 1 - XHTML

XHTML işaretlemesine daha yakından bakalım:

Fikir çok basit - iki ana DIV kabı var - biri id=”menü” küçük resimleri içeriyor, ikincisi “slaytlar” ise slaytların kendisini içeriyor.

Yeni bir slayt eklemek için her iki kaba da yeni öğeler eklemeniz yeterlidir. Slaytlar - JPG formatında resimler, küçük resimler - şeffaf PNG. Ancak diğer formatları kullanabilirsiniz.

Ayrıca herhangi bir HTML kodunu da yapıştırabilirsiniz. Örneğin, belirli bir slaytı resim biçiminde bir bağlantı haline getirebilirsiniz.

Slaytların belirli bir yüksekliğe ve genişliğe sahip olması çok önemlidir; bunlar jQuery tarafından kaydırma alanını belirlemek için kullanılır.

Ayrıca LI minyatürlerinin unsurlarına da dikkat edin. Birincisine dikey bölme çubuğunu görüntülemek için fbar sınıfı atanır. Diğer öğelere menuItem sınıfı atanır ve bunlar slayt gösterisi kontrol düğmeleri olarak kullanılır.

Bir sonraki adıma geçelim.

Adım 2 – CSS

Şimdi stil sayfamıza bir göz atalım.

Body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label( /* Sayfa sıfırlama */ marj:0px; padding:0px; ) body( /* Varsayılan metin rengini ayarlama, arka plan ve bir yazı tipi yığını */ color:#444444; font-size:13px; arka plan: #f2f2f2; font-family:Arial, Helvetica, sans-serif */ -moz-box-shadow:0 0 3px #AAAAAA; -webkit-kutu-gölge:0 0 3px #AAAAAA; kutu-gölge:0 0 3px #AAAAAA; yarıçap-alt-sol:4px; kenarlık-alt-sol-yarıçap: 4px; -moz-kenarlık-yarıçapı-sağ:4px; :4px; kenarlık-alt-sağ-yarıçap:4px; arka plan:url(img/panel.jpg) tekrarlama-x alt orta; overflow:hidden; ) #slides( /* Bu slayt alanıdır */ height:400px; /* jQuery daha sonra genişliği tüm slaytların genişliklerinin toplamına göre değiştirir. */ width:920px; overflow:hidden; ) .slide( float:left; ) #menu( /* Bu, küçük resimlerin kapsayıcısıdır */ height:45px; ) ul( marj:0px; padding:0px; ) li( /* Her küçük resim bir li öğesidir */ width:60px; display:inline -block; list-style:none; height:45px; overflow:hidden; ) li.inact:hover( /* Etkin olmayan durum, fareyle üzerine gelindiğinde vurgulanır:url(img/pic_bg.png) Repeat; .act ,li.act:hover( /* Başparmağın etkin durumu */ arka plan:url(img/active_bg.png) tekrarlama yok; ) li.act a( imleç:default; ) .fbar( /* Sol- en dikey çubuk, ilk küçük resmin yanında */ genişlik:2px; arka plan:url(img/divider.png) tekrarlama yok sağ; ) li a( display:block; arka plan:url(img/divider.png) hayır- sağdan tekrarla; yükseklik:35 piksel; üst dolgu: 10 piksel;

Bu stil sayfasında çeşitli CSS3 özelliklerini kullandık:

* kutu gölgesi, galerinin köşelerinde küçük bir gölge var. Bu özelliği kullanarak - X ve Y koordinatlarını (burada 0 0), bulanıklığı (örneğimizde 3 piksel) ve gölge rengini sağlamanız gerekir;
* kenarlık yarıçapı, galerinin alt kısmındaki yuvarlak kenarlıklar.

Maalesef bu özellikler şu anda yalnızca Safari, Chrome ve Firefox'ta çalışmaktadır.

Şimdi jQuery büyüsünün zamanı geldi.

ADIM 3 - jQuery

Aşağıdaki koda ihtiyacımız olacak:

$(document).ready(function())(
/* Bu kod DOM tamamen yüklendikten sonra çalıştırılır */

var totWidth=0;
var konumları = new Array();

$("#slides .slide").each(function(i)(
/* Tüm slaytlar arasında döngü yapın ve bunların birikimli genişliklerini totWidth'te saklayın */
konumlar[i]= totGenişlik;
totWidth += $(this).width();

/* Pozisyonlar dizisi her slaydın konteynerin sol kısmına göre değişmeli uzaklığını içerir */

if(!$(this).width())
{
warning("Lütfen tüm görsellerinizin genişlik ve yükseklik bilgilerini giriniz!");
yanlış döndür;
}
});

$("#slides").width(totWidth);

/* Cotnainer div'in genişliğini tüm slaytların birleştirilmiş genişliğine göre değiştirin */

$("#menü bir li a").click(function(e)(

/* Küçük resimde tıklayın */
$("li.menuItem").removeClass("act").addClass("inact");
$(this).parent().addClass("act");

var konum = $(this).parent().prevAll(".menuItem").length;

$("#slides").stop().animate((marginLeft:-positions+"px"),450);
/* Kayan animasyonu başlat */

e.preventDefault();
/* Bağlantının varsayılan eylemini önle */
});

$("#menu ul li.menuItem:first").addClass("act").siblings().addClass("inact");
/* Sayfa yüklendiğinde ilk küçük resmi etkin olarak işaretle */
});

Ana fikir, slaytların döngüsel olarak tekrarlanması, slaytların genişliklerinin toplanması ve bu genişliğin konteynere atanmasıdır. Kaydıraklar sola hizalı olduğundan yan yana oturulacak bol miktarda alana sahiptir.

Bir küçük resme tıkladığınızda, komut dosyası hangi slaydın gösterileceğini hesaplar ve animasyon yöntemini kullanarak negatif bir dolgu değeri atayarak bunları kaydırır.

Sadece 40 satır kod ve slayt gösterisi galerimiz hazır!

Çözüm

Süper güzel bir Apple tarzı galeri oluşturmak yalnızca üç adımımızı aldı. Herhangi bir web sitesini dekore edebilir.

Bir zamanlar Apple basit ve anlaşılması kolay ürünler geliştirme yeteneğiyle ünlüydü. Kullanıcıların hangi eylemlerin mümkün olduğunu ve bunların nasıl seçilebileceğini sezgisel olarak anlayabildiği grafik arayüzlerin şampiyonuydu. Şu ya da bu operasyonu tamamlayan insanlar her zaman net geri bildirimler aldılar ve sonuç beklentilerini karşılamadığı takdirde her şeyi iptal etme fırsatına sahip oldular.

Ancak bunların hepsi sona erdi. Her ne kadar Apple ürünleri artık daha da çekici görünse de bu dış güzellik fiyatı vardı. İyi tasarımın temel ilkeleri artık geride kaldı: netlik, geri bildirim, iyileştirme ve daha fazlası.

Apple ekibi, görsel mükemmellik arayışında, o kadar küçük ve ince (düşük kontrastla birleştiğinde) yazı tipleri yarattı ki, bunları normal görüşe sahip insanlar için bile okumak imkansız hale geldi. Geliştiricilerin bile hatırlayamayacağı bir sürü belirsiz hareket ve çoğumuzun varlığından bile haberdar olmadığı pek çok harika özellik yarattılar.

Ürünler, özellikle de Apple'ın mobil cihazlara yönelik işletim sistemi olan iOS üzerinde oluşturulanlar, artık onlarca yıl önce geliştirilen iyi bilinen ve yerleşik tasarım ilkelerini takip etmiyor. Hem deneysel bilime hem de sağduyuya dayanan bu ilkeler, bilgisayar teknolojisinin gücünü birkaç nesle aktardı ve Apple ürünlerine netlik ve kullanım kolaylığı açısından mükemmel bir itibar kazandırdı.

Ne yazık ki Apple artık yavaş yavaş bu fikirlerden vazgeçiyor. iOS ve Mac OS X'e yönelik tasarım yönergeleri hâlâ benzer konseptler içeriyor ancak bunların birçoğu şirket içinde hiç uygulanmıyor. Apple yolunu kaybetti ve artık stil ve görünüşe önem vererek, rekabete karşı mücadelede bir zamanlar ana kozları olan değerlerin pahasına hareket ediyorlar.

Apple tasarımı yok ediyor.Üstelik eylemleriyle insanları, iyi tasarımın yalnızca güzel bir ambalaja bağlı olduğuna bir kez daha inandırıyorlar. Ama bu öyle değil! Tasarım bir düşünme biçimidir: önce hedef kitlenizin temel ihtiyaçlarını belirlemek, ardından onları ürün ve hizmetlerle karşılamak. Bu disiplin, geliştiricilerin insanları, teknolojiyi, toplumu ve işletmeyi anlamasını gerektirir.

Güzel nesneler yaratmak sadece küçük bir kısımdır modern dizayn: Günümüzde bu sektörün uzmanları şehirlerin tasarımı, ulaşım sistemleri veya tıbbi tesisler gibi sorunlar üzerinde çalışmaktadır. Yine de Apple, arayüzün işlevselliği, netliği ve kullanım kolaylığı pahasına olsa bile, bir tasarımcının tek işinin her şeyi güzelleştirmek olduğu yönündeki eski, yorgun fikri güçlendirmeye devam ediyor.

Apple, sen her zaman lider oldun. Neden şimdi bu kadar benmerkezci davranıyorsun? Ancak daha da önemlisi Google neden sizin en kötü örneklerinizi takip ediyor?

Evet, Apple bir zamanlar anlaşılması kolay, etkileyici özelliklere sahip ve herhangi bir talimat olmadan kullanılabilen bilgisayarları ve uygulamalarıyla kullanım kolaylığıyla biliniyordu. Tüm işlemler kolayca tespit edildi, tüm eylemler iptal edilip düzeltilebiliyordu ve sistem size ayrıntılı geri bildirimler sağlayarak ne yaptığınızı her zaman anlamanızı sağlıyordu. Kullanıcılar, Apple cihazlarının yeteneklerinden övgüyle bahsettiler ve Apple'ın tasarım yönergeleri ve ilkeleri güçlü, popüler ve etkiliydi.

Ancak şirket, ilk iPhone ve tabletlerin ortaya çıkmasıyla birlikte hareket arayüzlerine geçtiğinde, yönetim daha önce gözlemlenen temel ilkelerin çoğunu terk etmeyi amaçladı. Artık eylemin apaçık bir tarafı yok; elimizde sadece acıklı geri bildirim kırıntıları kalıyor. Neden? Apple, görsel sadelik ve zarafet konusunda radikal bir adım attı ve bunu yaparak çözümlerinin öğrenilebilirliğine, kullanılabilirliğine ve üretkenliğine ciddi bir darbe indirdi.

Müşterilerin kullanmakta ve öğrenmekte zorluk çektiği teslimat sistemlerini uygulamaya başladılar, ancak insanlar tanımadığı için bundan kurtuldular. benzer sorunlarçok geç olana ve para zaten transfer edilene kadar. Ama o zaman bile, cihazlarının eksiklikleri nedeniyle: "Keşke bu kadar aptal olmasaydım...".

Günümüzün iPhone'ları ve iPad'leri görsel sadelik üzerine bir incelemedir. Harika yazı tipleri. Gereksiz kelimeler, semboller veya menüler içermeyen temiz düzen. Pek çok kişinin metni okuyamaması önemli değil. Ama yakışıklı.

Bir ankette bir kadın, küçük yazı tiplerini okunabilecek kadar büyük ve yeterince kontrastlı hale getirmek için Apple'ın yardım araçlarını kullanması gerektiğini iddia etti. Ancak uygulamanın birçok bölümünde bu seçeneğin yazı tiplerini o kadar büyük hale getirdiğinden metnin ekrana sığmadığından da şikayet etti. Görme sorunu olmadığı göz önüne alındığında, Apple daha ince vuruşlara ve daha az görsel kontrasta sahip yazı tipi türlerine geçmeden önce muhtemelen aynı metni kolaylıkla okuyabiliyordu.

Milyonlarca kullanıcısının bir ürünü kullanırken kendilerini sınırlı hissetmesine neden olan tasarım felsefesi nedir? Apple, akıllı telefonunu, çoğu insanın aşağılık olarak etiketlenmeden kullanabileceği ve içindeki metinleri okuyabileceği şekilde tasarlayabilirdi.

Ancak daha da kötüsü, yardımcı araçların Apple şirketinin çok güvendiği güzelliği yok etmesidir, çünkü bazen onlar yüzünden metin ekrana sığmaz. Yazı tipi biraz daha geniş, kontrastı yüksek ve kenar yumuşatması biraz daha az olsaydı, Apple sadece güzelliğini değil okunabilirliğini de koruyacaktı.

İptal reddedildi. Peki ne oldu biliyor musun? Çok fazla şikayet vardı, geri döndüler bu fonksiyon biraz farklı bir formatta: eylemi geri almak için tek yapmanız gereken telefonunuzu veya tabletinizi sertçe sallamaktı. Ancak iptal hiçbir zaman evrensel olarak uygulanmadı ve bunu yalnızca cihazınızı sallayarak öğrenebiliyordunuz. Üstelik işlev işe yaramadıysa kullanıcılar, sorunun gadget'ın yeterince sert sallanmamasından mı yoksa bu özel durum için iptalin sağlanmamasından mı kaynaklandığını bilmiyorlardı.

Dokunmatik ekranlarda, özellikle nispeten küçük cihazlar etkin bir bağlantıya veya düğmeye yanlışlıkla dokunulduğunda pek çok şey ters gidebilir. Bu rastgele dokunuşlar kullanıcıyı yeni bir hedefe yönlendirir. Bu tür hataları ortadan kaldırmanın standart ve basit yolu bir "geri" düğmesine sahip olmaktır: Android işletim sistemi çalıştıran akıllı telefonlarda bu işlev şu şekilde yerleşiktir: evrensel denetleyici, her zaman mevcuttur, ancak Apple bunu kullanmaz. Neden? Bilinmeyen. Belki de düğmeleri veya menüleri kullanmaktan kaçınmaya çalışıyorlar? Sonuç temiz ve zarif bir görünümdür ancak bu görsel sadelik aldatıcıdır çünkü arayüzün karmaşıklığını arttırır.

Apple geri okunu bazı yerlere yerleştirir, ancak her yerde mevcut olan Android'in aksine, geri alma ve geri düğmeleri geliştiricinin takdirine göre uygulanır. Apple dahil herkes bu yetenekleri uygulamamaktadır.

Ekranda herhangi bir işaretçi olmadığında bir kişi hangi yolu kaydıracağını, kaç parmağını kullanacağını ve ekrana ne sıklıkta veya ne kadar süreyle dokunacağını nasıl bilebilir? İnsanların bu hareketleri bir arkadaşından duyarak, “talimatları okuyarak” (ki böyle bir şey yok) ya da tamamen tesadüfen keşfederek hatırlamaları gerekir.

Apple ürünleri güzel ve çekici! Bu nedenle kullanıcılar zorluklarla karşılaştıklarında kendilerini suçlama eğiliminde oluyorlar. Bu Apple için iyi ama müşterilere tamamen haksızlık.

İyi bir tasarım görsel olarak fark edilebilir ve kullanımı keyifli olmalıdır. Ancak hoşluk, cihazın anlaşılır ve kullanışlı olmasını gerektirir. Anlayış, kontrol ve zevk duygularına yol açan temel psikolojik ilkelere bağlı kalmalıdır. Bunlara açıklık, geri bildirim, uygun gösterim, kısıtlamaların uygun şekilde kullanılması ve elbette eylemlerinizi geri alma yeteneği dahildir. Bu temel tasarım kavramları öncelikle geleceğin kullanıcı deneyimi profesyonellerine öğretiliyor ve eğer Apple benzer bir eğitime dahil olsaydı başarısız olurlar.

Daha çekici ama kullanımı daha zor

Uygun tasarım metodolojisinden kaçınmanın sonuçları nelerdir? Daha yüksek bakım ve destek maliyetleri. Ve sonuçta, Apple'ın basit arayüzünü açıkça övebilen, ancak aynı zamanda tüm yeteneklerini yönetecek kadar akıllı olacakları umuduyla başka bir markanın telefonu için para biriktirecek olan mutsuz müşterilerin "kaçması".

Bu durumda bilgisayara hakim olamayan ancak artık tablet gibi teknolojik cihazları rahatlıkla kullanan büyükanne ve büyükbabalarla ilgili hikayeler uygunsuz olacaktır. Bir düşünün, yeni teknolojilere ne kadar hakim oldular? Evet, jest cihazları, tabletler ve telefonların ilk kullanımda giriş engeli daha düşüktür, ancak bunların gelişmiş işlevlerinde uzmanlaşmak (örneğin, tek bir e-postada üç fotoğraf göndermek, belirli bir metni biçimlendirmek veya birkaç farklı işlemin sonuçlarını birleştirmek) çok daha fazlasıdır. zor. Bunları ve daha birçok işlemi geleneksel bilgisayarlarda çok daha kolay ve verimli bir şekilde gerçekleştirebilirsiniz.

Yeni nesil yazılımçekicilik ve işlem gücünde dev sıçramalar yaparken aynı zamanda kullanımı daha karmaşık hale geldi.

Bu sorun sadece Apple ile sınırlı değil. Google Haritalar aynı prensibe göre gelişiyor ve her yinelemede giderek daha kafa karıştırıcı hale geliyor. Aynı durum Android için de geçerlidir. ameliyathane Windows sistemi Microsoft'un 8'i, yukarıda açıklanan sorunların çoğunu çözen, hareket tabanlı cihazlar için oldukça akıllı bir tasarıma sahiptir, ancak ihtiyaç duyulan farklı çalışma tarzını entegre etmekte başarısız olur. masaüstü bilgisayarlarüretken çalışma için tasarlanmıştır.

Peki sorun ne? Mesele şu ki, tıpkı her disiplinin çeşitli çeşitleri olduğu gibi, tasarımın da birçok versiyonu vardır. Yazılım oluştururken baş programcı etkileşimli programlamayı tam olarak anlamayabilir ve çekirdek geliştiricisi telekomünikasyon kodlaması hakkında hiçbir şey bilmeyebilir. Öte yandan, psikoloji alanında geçmişi olan etkileşim tasarımcıları kavramsal modellerin, netliğin ve anlaşılırlığın ilkelerini bilirken, bilgisayar bilimi uzmanları için bu “karanlık ormandır”. Ancak tasarım profesyonelleri, etkileşim tasarımının web siteleri anlamına geldiğini düşünme eğilimindedir ve genellikle programlamanın ve insan-bilgisayar etkileşiminin inceliklerini anlamazlar.

Bu önemlidir, çünkü insanlar son derece net görünecek şekilde tasarlanmış bir arayüzü kullanamadıkları için kendilerinden şüphe etmeye başlarlar. Bu önemlidir, çünkü ileri teknoloji ürünleri hem kullanılabilirlik hem de yararlılık açısından geriliyor.

Bir şeyler yanlış gitti?

Nielsen Norman Grubu ortaklarından Bruce Tognazzini, Apple'ın ilk günlerinde Steve Jobs ile çalıştı. Bir kullanılabilirlik uzmanı (Donald Norman), Jobs'un ayrılmasından kısa bir süre sonra şirkete katıldı ve Steve'in 1996'da geri dönmesinden sonra şirketten ayrıldı. Kullanımı kolay ve anlaşılır ürünlerden (Apple aslında talimatlara gerek olmadığını söyleyerek övünürken), kılavuzlarla birlikte gelmeyen ama yine de çoğu zaman onlara ihtiyaç duyan günümüzün cihazlarına geçişi göremediler.

Onlara göre Jobs dönmeden önce Apple ürün geliştirmeye üç faktörü göz önünde bulundurarak yaklaşıyordu: kullanıcı deneyimi, mühendislik ve pazarlama; bunların her biri, ilk günden malların sevk edilmesine kadar olan tasarım döngüsüne dahil oldu.

Bugün Apple artık ürünlerini anlaşılır ve kullanışlı hale getirmeye çalışmıyor. Bunun yerine onları etik bir şekilde tasarlıyor. Ne yazık ki, akademik dergilerde insan-bilgisayar etkileşimi ve insan faktörleri üzerine yapılan araştırmaların gösterdiği gibi, görsel olarak basit görünüm kullanım kolaylığı anlamına gelmemektedir.

Apple, önemli kontrolleri gizleyerek ve hatta kaldırarak ürünlerinin karmaşıklığını kasıtlı olarak gizlemektedir. Görünüşe göre tek tuşlu bir kontrol cihazından daha basit ne olabilir? Evet bu çok basit bir çözüm ama tek tuşla sistemi kullanma seçenekleriniz, belirli modları olmadığı sürece son derece sınırlı. Kontrolü farklı zamanlarda farklı değerlere ayarlamanıza izin veriyorlar ancak bu kullanıcıların kafasını karıştırıyor ve hatalara yol açıyor.

Alternatif olarak, tek bir denetleyicinin birden fazla gizli işlevi olabilir; düğme (veya dokunmatik ekran) bir, iki veya üç parmakla dokunulduğunda tek, çift veya üçlü basışla çeşitli işlemleri gerçekleştirebilmektedir. Veya belki de belirli sayıda parmağınızı belirli sayıda, belirli bir yönde belirli sayıda kullanarak: sadece "paneli" açın Sistem ayarları» Macintosh'ta dolaşın ve Apple fare veya izleme dörtgenindeki dokunma ve hareketlerin anlamlarına ilişkin seçenekleri (ve farklılıkları) keşfedin.

Basit bir görünüm, kontrolleri daha karmaşık, daha keyfi, hatırlanması daha zor ve hataya daha yatkın hale getirebilir. Aslında Lisa ve Macintosh bilgisayarların ilk günlerinde Apple'ın sloganı "Mod Yok" idi. Tek yol modlardan vazgeçmek, her biri her zaman aynı görevi yerine getirmesi gereken özel denetleyiciler kullanmaktır.

Modlar ilkesi ve basitliğin görünümü ile eylemdeki gerçek basitlik arasındaki uzlaşma, temel derslerde öğretilmektedir. interaktif tasarım. Peki Apple neden bu bilgiyi uygulamak istemiyor?

Tüm modern bilgisayar şirketleri, geliştiricileri için kullanıcı arayüzü kılavuzları yayınlar. Böyle bir kılavuzu oluşturan ilk kişi Apple'dı ve bu kılavuz, iyi ve anlaşılır tasarımın ilkelerinin mükemmel bir açıklamasıydı. Apple İnsan Arayüzü Yönergeleri'nin ilk baskısı 1978'de Bruce Tognazini tarafından yazılmıştır. 1987'de piyasaya sürüldüğünde ve iki yıl içinde (1985-1986) oluşturulduğunda, modern arayüzlerin tüm temel ilkeleri dahil edilmişti. Steve Jobs 1996 yılında şirkete geri döndüğünde hâlâ takip ediliyordu.

Apple konseptlerinin tamamı, Tognasini'nin Macintosh arayüzünün temel prensiplerini inceleyen projesinin sonucuydu. Bundan önce, yalnızca kullanıcı arayüzü geliştirmeyle ilgilenen dar bir insan çevresi tarafından biliniyorlardı. Yazı için teşekkürler bu kılavuz, yeni çalışanların eğitimi çok daha kolay hale geldi ve Macintosh ürünleri geliştiricilerinin sayısı önemli ölçüde artmaya başladı.

Ekip, ilkeleri oluştururken büyük ölçüde yeni kurulan İnsan-Bilgisayar Etkileşimi (HCI) topluluğu tarafından yürütülen araştırmalara güvendi. Donald Norman ve öğrencilerinin, 1980'lerin başında PCI konferanslarındaki makalelerde ve 1986'da Norman ve Stephen Draper tarafından düzenlenen Kullanıcı Merkezli Sistem Tasarımı adlı kitapta yayınlanan Kaliforniya Üniversitesi, San Diego'daki çalışmalarına odaklanmıştır.

Bu temellerin, insanların kullandıkları makineleri değil, ihtiyaçlarını, isteklerini ve yeteneklerini yansıttığını unutmamak önemlidir. Bunlar, 1980'lerin ilk sürümlerinde olduğu gibi günümüzün arayüzleri için de geçerlidir ve kullanıcılar gelişene kadar da öyle kalacaktır.

Apple'ın Geliştiriciler için modern iOS Kullanıcı Arayüzü Kılavuzu, ilgili birçok ilkenin ana hatlarını çiziyor, ancak vurgu hâlâ basitlik (özellikle basitliğin görünümü) ve genel olarak kullanıcı memnuniyeti ve keyif üzerinedir. Bu nitelikler önemli bir rol oynamaktadır, ancak belirleyici olmaktan uzaktır.

Daha spesifik olarak, yönergeler geliştiricilere görsel iletişimlerinin yeterince karmaşık olduğundan emin olmaları gerektiğini en az 14 kez hatırlatır. Tasarımın mümkün olduğu kadar temiz ve basit olması gerektiği açıktır ancak bu, gerekli ipuçlarının ortadan kaldırılması pahasına başarılmamalıdır. Bir tasarımcı bunların doğru olup olmadığını nasıl bilebilir? Bilinen tek yol kullanıcı testi yapmaktır. Peki bir kullanıcı arayüzü kılavuzu size kullanılabilirlik testi hakkında ne söyleyebilir?

Bu gerçekten iyi bir fikir. Apple'ın önerdiği gibi yalnızca birkaç akranla değil, beklenen satın alma hedef kitlenizi temsil eden kişilerle testler yapmalısınız.

Orijinal ilkeler Elma tasarımı Anlaşılabilir, öğrenilmesi kolay ve işlevsel sistemler oluşturmanın önemini vurgular. Ancak yol boyunca bir yerde şirket her zaman takip ettiği temel temelleri kaybetti. Aşağıdaki resim, Apple yönergelerinin temel ilkelerinin zaman içinde nasıl değiştiğini göstermektedir.

Bu tablo, Apple'ın kullanıcı arayüzü yönergelerinin 1995'ten 2015'e kadar olan gelişimini açıklamaktadır. işletim sistemi iOS yönergeleri, daha geleneksel OS X için 2015 yönergelerinin solunda yer almaktadır.

Gördüğünüz gibi 2008'den sonra algılanan istikrar ve rejimsizlik ortadan kalktı. Açık ve beklenen eylemlerin değerlendirilmesiyle birlikte, iOS'a geçişte affetme ve zihinsel modeller kayboldu. See-and-Point, iOS 4'ün piyasaya sürülmesiyle 2010 sonlarında iOS kılavuzlarından kaldırıldı. 1995'te estetik bütünlük en az önemli faktörlerden biriydi, ancak 2015'te bu çok önemli. Bununla birlikte metaforlar ve kullanıcı kontrolü de birçok konumunu kaybetmiş ve aşağıya doğru kaymıştır.

Eksik İlkeler

iOS'ta tamamen veya kısmen göz ardı edilen en önemli ilkeler netlik, geri bildirim, restorasyon, tutarlılık ve büyümeyi teşvik etmektir:

Netlik

Netlik veya bir sisteme bakma ve önerilen tüm eylemleri anında keşfetme yeteneği, her zaman Apple'ın tasarım başarısının temel unsuru olmuştur. İlk aşamalarda, mevcut tüm işlemler kullanıcıya görünür düğmeler, simgeler veya menü öğeleri biçiminde sunulduğundan bu prensibe "gör ve işaret et" adı verildi: gerçekleştirmek istediğiniz eylemi görüyorsunuz, imleci ekranın üzerine getirin. ilgili nesneyi seçin ve üzerine bir kez tıklayın.

Basitçe söylemek gerekirse, netlik, arayüzün daha görünür ve anlaşılır öğelerle doldurulmasını, böylece insanların bunları hatırlamasına gerek kalmamasını içerir. Geleneksel bilgisayarlardaki menüler bu fikri güzel bir şekilde takip ediyor. Etiketli simgeler de. Etiketlenmemiş simgeler çoğu zaman başarısız olur, ancak bunun sorumlusu herhangi bir etkileşim ipucunun bulunmamasıdır. Lütfen Apple'ın kılavuzlarında artık netlikten bahsedilmediğini unutmayın.

Geri bildirim

Geri bildirim ve onun "arkadaş" ileri beslemesi, kişinin bir eylem gerçekleştirildikten sonra ne olduğunu öğrenmesine veya eylem seçildiğinde ne olacağını anlamasına olanak tanır.

İnsanlar, eylemlerinin etkinliğini değerlendirmek için sürekli bir geri bildirim akışına güvenirler. Gerçek dünyada geri bildirimi otomatik olarak alırız, ancak sanal dünyada bu yalnızca tasarımcının bunu düşünmesi durumunda gerçekleşir. Geri bildirim olmadan kullanıcılar kendilerine güvenemeyebilirler. mevcut durum sistem içerisinde yer alacak ve herhangi bir sorumluluk hissetmeyeceksiniz.

İyileşmek

Hatalar olur. Kurtarma ilkesi, bir işlemi gerçekleştirmek kadar geri almanın da kolay olması gerektiğini belirtir. Hoşgörü olarak anılan bu durum aynı zamanda mevcut yönergelerden ve yukarıdaki tablodan da çıkarılmıştır. Kurtarma, 1974 yılında Xerox Corporation'ın Palo Alto Araştırma Merkezi'nde (PARC) muhtemelen Warren Teitelman tarafından icat edilen "geri al" düğmesi kullanılarak uygulandı. Bildiğiniz gibi, Lisa ve Macintosh bilgisayarları temel yapılarını PARC'ın ilk gelişmelerinden ödünç aldılar (. Apple hakları Xerox'tan satın aldı).

İptal komutu Yinele düğmesi kullanılarak geri alınabilir. Geri alma ve yeniden yapma, insanların yalnızca kendi hatalarını düzeltmelerine değil, aynı zamanda yeni şeyleri daha özgürce denemelerine de yardımcı olur.

Geri alma, kullanıcıların içeriği geri yüklemesine olanak tanıyordu ve geri düğmesi, onların navigasyon sistemindeki önceki bir konuma dönmelerine olanak tanıyan bir yardımcı program komutuydu. Orijinal grafik arayüzler insanları ihtiyaçtan kurtardı destek olmak navigasyon hariç. Bunun yerine tüm belgeler ve araçlar kullanıcıların kullanımına sunuldu. Tarayıcılar ve iOS, insanların modal ekranlara giden bir geçiş labirentinde dolaştıkları ilk gezinme arayüzlerinin kalıntılarıdır.

Destekleyen tarayıcılar navigasyon sistemiİnternet, kullanıcıların yolculuklarının önceki aşamalarına dönebilmeleri için bir geri düğmesi sağlar. iOS bu kadar genelleştirilmiş bir araç sunmuyor; bu nedenle, örneğin bir uygulamanın içindeki bir bağlantıya yanlışlıkla tıklarsanız, size herhangi bir kaçış yolu sağlamadan sizi Safari'ye, Youtube'a veya herhangi bir şeye yönlendirecektir. Geri ve ileri düğmeleri iOS'ta standart olmalıdır, böylece arayüz insanları cezalandırmak yerine yanlışlıkla gezinmelerinden dolayı affeder.

Tutarlılık

Çoğu modern kullanıcının birden fazla cihazı vardır, ancak bu farklı cihazların işlemleri sıklıkla örtüşür. Hatta bir tanesinin içinde Apple cihazları tutarlılığı bozmayı başardı: iPhone'u döndürdüğünüzde klavye düzeni değişiyor, iPad'i döndürdüğünüzde ana ekrandaki simgeler öngörülemeyen şekillerde yeniden düzenleniyor.

Tutarlılık hâlâ kılavuzlarda listeleniyor ancak bu prensibe pek uyulmuyor. Magic Mouse, izleme dörtgeninden farklı çalışır ve kontrolleri de iPhone veya tablette kullanılan hareketlerden farklıdır. Neden? Bu tür çelişkiler genellikle tasarımcıların meslektaşlarıyla fikir alışverişinde bulunmadan tek başına çalıştıkları durumlarda ortaya çıkar.

Büyümeyi teşvik etmek

İyi tasarım, insanları temel konularda uzmanlaştıklarında yeni ve daha karmaşık görevleri üstlenerek öğrenmeye ve gelişmeye teşvik eder. Enstantane fotoğraf tutkunları fotoğrafçı ve yazar olacak şekilde gelişiyor kişisel günlükler blog yazarlarına dönüşürler ve çocuklar programlama konusunda ellerini dener ve sonunda bu alanda bir kariyer oluşturmaya çalışırlar bilgisayar Bilimi. Onlarca yıldır büyümeyi teşvik etmek, Apple için kullanıcıları tarafından her zaman kabul edilen temel bir prensip olmuştur.

Merhaba sevgili okuyucular! Web tasarımı ve web geliştirme çok hızlı gelişiyor. Her gün çevrimiçi yaşamımızı daha verimli ve kullanışlı hale getiren uygulamalar veya yeni hizmetler gibi daha fazla yeni ürün görüyoruz. Ve web tasarımı, yalnızca "sanatçının" (tasarımcının) yetenek ve becerileriyle sınırlı olan, sınırsız bir alandır. Bugün, CSS stillerinin yazılmasını kolaylaştıracak dinamik bir stil işaretleme dili olan LESS'ten bahsedeceğiz.

AZ nedir?

LESS, CSS'nin bir üst kümesidir. Bu, herhangi bir CSS kodunun geçerli LESS olduğu, ancak ek LESS öğelerinin düz CSS kodunda çalışmadığı anlamına gelir. Bu harika çünkü mevcut CSS zaten geçerli LESS kodudur ve bu da yeni teknolojiye giriş engelini azaltır.

LESS, . Değişkenleri, işlemleri, öğeleri ve karışımları tanıtır. Stil sayfalarını modüler olarak yazabilmek sizi birçok zahmetten kurtaracaktır.

LESS, yazma stillerini çok daha kolay hale getirir. Örneğin, karışımları kullanarak argüman alabilen işlevlere benzer bir şey yaratırız. Mixins - bir sınıfın tüm özelliklerini başka bir sınıfa eklemenizi sağlar. basit açmaözelliklerden birinin değeri olarak sınıf adı.

1
2
3
4
5
6
7
8
9
10
11

Yuvarlatılmış köşeler (@yarıçap: 5px) (
sınır yarıçapı: @radius;
-webkit-sınır-yarıçap: @yarıçap;
-moz-sınır-yarıçap: @radius;
}
#başlık (
.yuvarlatılmış köşeler;
}
#altbilgi (
.rounded-corners(10px) ;
}

Ve derlenmiş CSS şöyle görünecek:

1
2
3
4
5
6
7
8
9
10

#başlık (
kenarlık yarıçapı: 5 piksel;
-webkit-sınır-yarıçapı: 5px;
-moz-sınır-yarıçapı: 5px;
}
#altbilgi (
kenarlık yarıçapı: 10px;
-webkit-sınır-yarıçapı: 10px;
-moz-sınır-yarıçapı: 10px;
}


prefix-free.js kitaplığını yükleyin ve onu index.html'ye bağlayın:

< script src= "prefix-free.js" type= "text/javascript" >

Burada hazırlıkları bitirip doğrudan Apple.com tarzında menü oluşturmaya geçelim.

HTML işaretlemesi

Menü düzeni oldukça basittir. Menü sırasız bir listeye dayanmaktadır. HTML düzenleyiciyi açın ve şu kodu yapıştırın:

1
2
3
4
5
6
7
8
9



Ev
Haberler
Dersler
İndirmek
Kişiler

DAHA AZ stil

Bu bölümde LESS dilinde menü kodunu yazmaya başlayacağız. Hem yazma hem de LESS sözdiziminde programlamaya yeni başlayanlar için endişelenmeyin, netleştirmek için her şeyi parçalara ayırmaya çalışacağım. Belki birisi bile bir site için bu şekilde yazma stillerinden hoşlanacaktır çünkü bu gerçekten daha üretkendir.

Menünün hangi bileşenlerden oluşacağına bakalım:

Yukarıdaki ekran görüntüsünde görebileceğimiz gibi, Apple.com navigasyonu aşağıdaki 6 ana bölümden oluşmaktadır:

  • Gölge kullanılır;
  • Sınır;
  • Menü öğeleri arasındaki ayırıcı;
  • Arka plan için gradyan;
  • Fareyle üzerine gelindiğinde karartma efekti;
  • Menü metni.

Yazılı stilleri iki şekilde kullanabilirsiniz:

  • Çıtırtı

Önemli: İlk yöntemi kullanırken, less.js kütüphanesinin dahil edilmesinden önce stilleri.less'in dahil edilmesi gerekir! Ayrıca öneksiz bağlanmayı da unutmayın.
Böylece stilleri birleştirme şuna benzer:

1
2
3
4
5




Temel Renk Değişkenini Tanımlama

2 dosya kullanacağız: config.less içinde tüm değişkenleri, karışımları vb. tanımlayacağız, ardından onu zaten menü öğeleri için stiller yaratacağımız ikinciye (styles.less) aktaracağız.

Şimdi config.less dosyasındaki koda bakalım. Değişkenleri kullanarak menünün temel rengini tanımlayalım. LESS'teki bir değişken @ sembolü kullanılarak bildirilir.

Yukarıdaki kodda box-shadow için bir önek eklemedim, önek içermeyen kütüphane bunu otomatik olarak ekleyecektir. Ayrıca gölge rengi @theme değişkeninin renginden miras alınır.

Bir parametreyle karışımları kullanarak menü sınırları için bir stil tanımlayalım

Menümüzün köşeleri yuvarlatılmış bir kenarlığa ihtiyacı olacak. Parametreli karışımlar - aslında basit bir karışımla aynı işlevselliğe sahiptir, tek fark aynı zamanda değişken bir parametreye sahip olmasıdır.

1
2
3
4

Kenarlık(@yarıçap : 3px ) (
sınır yarıçapı: @radius;
kenarlık: 1px katı @theme - #050505;
}

Yukarıdaki örnekte varsayılan @radius değerini 3 piksel olarak ayarladık ve dediğimiz gibi bu değer değiştirilebilir.

İşlemleri kullanarak degrade, ayırıcı ve fareyle üzerine gelme stilini tanımlayın

LESS'te, hem özellik değerlerini hem de renkleri artırma, azaltma, bölme ve çarpma işlemlerini kullanarak istenen sonucu elde etmek için özellikler arasındaki karmaşık ilişkileri belirlemenize olanak tanır. Menü ayırıcının özelliklerini ayarlayan aşağıdaki koda bir göz atalım:

1
2
3
4
5

Bölücü (
kenar stili: katı;
kenarlık genişliği: 0 1 piksel 0 1 piksel;
border-color : şeffaf @tema - #111 şeffaf @tema + #333;
}

Yukarıdaki örnekte #111 rengini @theme değişkeninden çıkarıyoruz, böylece ayırıcının sol tarafı temel renkten biraz daha koyu, sağ tarafı ise daha açık olacaktır. Bunlar HEX rengiyle yapabileceğimiz manipülasyon türleridir.

Renk manipülasyonunu daha net hale getirmek için renk şemasına bakalım:

Maksimum koyu renk #000 (siyah), maksimum açık renk #FFF (beyaz) ve temel renk #555'tir. Yani eğer bir rengin üç seviye daha koyu olmasını istiyorsak #333'ü çıkaracağız.

Şimdi degrade stilleri:

1
2
3
4
5
6

Gradyan (
arka plan: lineer-gradient(alta doğru, @theme + #252525 %0 , @theme + #171717 %50, @theme - #010101 %51, @theme + #151515 %100 ) ;
}
.hover efekti(
arka plan: lineer-gradient(alta doğru, @theme - #010101 %0 , @theme - #121212 %50, @theme - #222222 %51, @theme - #050505 %100 ) ;
}

Sigortalı karışımlarda menü metni stili tanımları

2 metin rengi ve metin gölge rengi kullanmayı planlıyoruz. Menünün arka planı açıksa, metin rengi koyuysa ve bunun tersi durumda bir seçenek kullanılır.

İlk olarak, metin renginin parlaklığı %50'ye eşit veya daha yüksek değilse gölgenin koyulaşması gerekir; bu durumda renk #000000'dir.

Bu aşamada config.less dosyasını oluşturmayı bitirip, Style.less dosyasını oluşturmaya geçiyoruz.

Yapılandırmasız içe aktar

Styles.less adında bir dosya oluşturalım ve öncelikle önceden oluşturulmuş olan config.less dosyasını bu dosyaya aşağıdaki şekilde ekleyelim:

Şu anda çalışmamızın sonucu bu şekilde görünüyor.

Henüz çok çekici değil. Ama hala gelecek daha çok şey var.

İç içe kurallara sahip menüler için temel stil

LESS'te herhangi bir öğenin stillerini doğrudan üst öğenin stiline yerleştirebiliriz. Gezinme etiketi, gezinme için gerekli tüm öğeleri içeren nav HTML5 spesifikasyonudur. İşte onun stilleri:

1
2
3
4
5
6
7

navigasyon (
kenar boşluğu: 50 piksel otomatik 0;
genişlik: 788 piksel;
yükseklik: 45 piksel;
.sınır;
.gölge;
}

Bir dizi CSS kuralı yazmak yerine yalnızca yüksekliği, genişliği ve dolguyu tanımladığımıza dikkat edin. Mixins kullanarak border ve stilinin yanı sıra shadow'u da alırken .border ve .shadow sınıf adını belirliyoruz ve config.less dosyasına yazdığımız bu sınıfların kuralları nav'a ekleniyor. sınıf.

1
2
3
4
5
6

navigasyon (
...
}
navigasyon
...
}

Ancak LESS'te kalıtım farklı şekilde gerçekleşir, anlaşılması daha kolay ve daha mantıklıdır:

1
2
3
4
5
6
7
8
9
10
11

navigasyon (
kenar boşluğu: 50 piksel otomatik 0;
genişlik: 788 piksel;
yükseklik: 45 piksel;
.sınır;
.gölge;
ul (
dolgu: 0;
kenar boşluğu: 0;
}
}

Resimde gördüğünüz gibi li listesinin elemanları dikey olarak konumlandırılmış ancak yatay olarak konumlandırılmalarına ihtiyacımız var. Bunu yapmak için display:inline; özelliğini ayarlayın.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

navigasyon (
kenar boşluğu: 50 piksel otomatik 0;
genişlik: 788 piksel;
yükseklik: 45 piksel;
.sınır;
.gölge;
ul (
dolgu: 0;
kenar boşluğu: 0;
li (
ekran: satır içi;
}
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

navigasyon (
kenar boşluğu: 50 piksel otomatik 0;
genişlik: 788 piksel;
yükseklik: 45 piksel;
.sınır;
.gölge;
ul (
dolgu: 0;
kenar boşluğu: 0;
li (
ekran: satır içi;
A (
metin dekorasyonu: yok;
ekran: satır içi blok;
şamandıra: sol;
genişlik: 156 piksel;
yükseklik: 45 piksel;
metin hizalama: ortala;
satır yüksekliği: %300;
.textcolor(#f2f2f2 ) ;
.bölücü;
.gradyan;
}
}
}
}

Yukarıdaki örnekte #f2f2f2 onaltılı rengini kullanıyoruz, bu rengin parlaklığı %50'den fazladır, dolayısıyla gölge otomatik olarak siyaha ayarlanacaktır. Eminim kodun geri kalanı oldukça açıktır.

li (
ekran: satır içi;
A (
metin dekorasyonu: yok;
ekran: satır içi blok;
şamandıra: sol;
genişlik: 156 piksel;
yükseklik: 45 piksel;
metin hizalama: ortala;
satır yüksekliği: %300;

.bölücü;
.gradyan;
}
}
li: ilk çocuk a (
kenarlık-sol: yok;
}
li: 50 piksel otomatik 0;
genişlik: 788 piksel;
yükseklik: 45 piksel;
.sınır;
.gölge;
ul (
dolgu: 0;
kenar boşluğu: 0;
li (
ekran: satır içi;
A (
metin dekorasyonu: yok;
ekran: satır içi blok;
şamandıra: sol;
genişlik: 156 piksel;
yükseklik: 45 piksel;
metin hizalama: ortala;
satır yüksekliği: %300;
.textcolor(#f2f2f2 ) ; // Bu satırı değiştirebilirsiniz
.bölücü;
.gradyan;
&: üzerine gelin(
.vurgu efekti;
}
}
}
li: ilk çocuk a (
kenarlık-sol: yok;
}
li: son çocuk a (
sağ kenarlık: yok;
}
}
}

LESS'i CSS'ye derlemek

İşte bu kadar, apple.com adresini yazma işlemi burada tamamlanabilir. Yazılı stilleri web sayfasına nasıl ekleyeceğimize karar vermek kalıyor. Yukarıda bahsettiğim gibi yazı stillerini iki şekilde kullanabilirsiniz:

  • stilleri.less ve less.js kitaplığını bağlayın;
  • veya Styles.less'i Crunch programında derleyin ve sayfaya zaten normal stiller.css ekleyin

Elbette ikinci seçenek daha iyidir, neden 2 dosya ekleyip istemci tarafında çift çalışma yapalım, o halde yazılı LESS stillerini normal statik CSS'de derleyelim.

Bunu yapmak için büyük Crunch It düğmesine tıklayın! Ve normal stilleri.css'yi koruyun


Bu, dersi sonlandırıyor.

Not: Herkes bu kadar basit bir menü yapabilir, ancak güzel efektlere sahip gerçekten harika bir web sitesine ihtiyacınız varsa o zaman size Ukrayna'daki en iyi web stüdyolarından birini önerebilirim. Adamlar sizi gerçekten eşsiz bir tasarım yapabilecek, gerçekleştirebilecek Arama motoru optimizasyonu ve sitenizi tanıtın!


Küçük ama havalı bir şirketin mutlu sahibisiniz. Zafere henüz çok var ama zamanla işletmenizin bir gurur kaynağı ve takip edilecek bir örnek haline geleceğinden şüpheniz olmasın. Bu arada, bu anı beklemenize gerek yok: Büyük ve ciddi bir şirket gibi ikna edici bir açıklama yaparak kendinizi şu anda birinci sınıf bir profesyonel olarak konumlandırabilirsiniz.

Böyle bir sitenin nasıl olması gerektiğini bilmiyor musunuz? Endişelenmeyin, şimdi size her şeyi açıklayacağız ve nasıl ilerleyeceğinizi anlatacağız. İpuçlarımızı kullanırsanız, artık Apple, Nike veya L'Oreal web sitelerine bakarken üzgün bir şekilde iç çekmenize gerek kalmayacak, çünkü kendi web siteniz daha da kötü olmayacak. İşte sağlam, profesyonel bir web sitesi oluşturmak için bazı kurallar.


Web tasarım trendlerini takip edin

Büyük markalar web sitelerini sürekli güncelliyor ve geliştiriyor. Deneyimli tasarımcılardan ve geliştiricilerden oluşan ekipler, sıra dışı ve yaratıcı tasarımlar yaratmak için çalışıyor. modern kaynak, insanların meraklanmasına ve her şeye daha yakından bakmak istemesine neden oluyor.

Evet çok pahalı ama Wix gibi ücretsiz seçenekler de var. Editörümüz, her türlü etkinlik için güzel bir web sitesi oluşturabilmeniz ve buna paralaks kaydırma veya arka plan olarak video gibi modaya uygun efektler ekleyebilmeniz için özel olarak oluşturuldu. Güncel bir "uzun" sayfa oluşturabilir ve onu "düz" tasarım öğeleriyle tamamlayabilirsiniz*.

Bu aşamada tasarımcılara yönelik web sitelerini ziyaret edip ilham almanın size zarar vermeyeceğini düşünüyoruz. Önerilerimiz: dergi Web İlhamı, Blog Lopart ve tasarım dergisi Görev Odası; Eğer ingilizce dili senin için sorun yok, oku Van Gecikme Tasarımı , Çarpıcı Dergi Ve Web Tasarım Deposu .

*Tüm bu kelimelerin ne anlama geldiğini anlamıyor musunuz? Bu yüzden yazımızı okumalısınız.



Markalaşmayı Alın

Büyük şirketlerin tanınabilir bir kurumsal kimliği ve çok net bir konumlandırması vardır. Kesin olarak tanımlanmış yazı tipleri, renkler ve sloganlar kullanırlar. Kırmızı Coca-Cola logosunu ister web sitesinde, ister şişelerde, ister caddedeki reklam panolarında olsun, şaşmaz bir şekilde tanıyacaksınız.

Peki ya şirketiniz Coca-Cola kadar büyük değilse? Bu, markalama yapmanıza gerek olmadığı anlamına gelmez. İyi düşünülmüş bir kurumsal kimlik önemlidir. Bu sayede insanlar ürününüzü hızlı bir şekilde tanımlayabilecek ve satın alma işlemine bir taş atımı uzaklıkta olacak. Bu nedenle güzel bir logo çizin, bir slogan bulun, markalı yazı tipleri, renkler seçin ve sosyal medya sayfalarınızı buna göre tasarlayın. Hakkında makalemizde daha fazla ipucu.

Daha az daha iyidir

Ürününüz ve işiniz hakkında detaylı konuşmak istediğinizi anlıyoruz ancak siteyi aşırı doldurup ziyaretçileri sıkmanızı önermiyoruz. Site çok zayıf yükleniyor, okunması zor ve ziyaretçileri itiyor. En iyi, iyinin düşmanıdır, bu yüzden zamanında durmayı öğrenmeniz gerekir.

Sitenizden nelerin kaldırılabileceğini düşünelim. Metinler teknik ve mesleki terimlerle doluysa bunlardan kurtulun. Ziyaretçilerin gerçekten tüm çalışanlarınızın ayrıntılı biyografilerini bilmeleri gerektiğini mi düşünüyorsunuz? Olası olmayan. Elbette bazı şeyler kısaltılamaz, örneğin, Detaylı Açıklama mal veya hizmet, ancak bu normaldir, bu bilgi faydalıdır. Hatta onu kesinlikle fark edilmeyeceği bir yere taşımaya değer. Ve satın alma sürecini yavaşlatan her şey en ufak bir pişmanlık duymadan ortadan kaldırılabilir.

Şimdi tasarıma bakalım. Renk sayısını üç veya dörde düşürün, hepsini kaldırın ekstra resimler ve tipografiye dikkat edin. "Hava" olarak da bilinen üst kısımda bol miktarda boşluk bırakmayı unutmayın. Bir sitede çok fazla "hava" olduğunda insanlar, ziyaretçileri satın almaya, abone olmaya, kaydolmaya vb. itmek için gerekli olan tüm kritik unsurları fark eder.

Ürünü ana sayfada göster

Sipariş sayınızı artırmak mı istiyorsunuz? Bu nedenle insanların ürününüzü hemen görmesini sağlayın. Ünlü markaların sitelerine bakın. Görüyorsunuz, ürünleri sadece alışveriş sayfasına değil ana sayfaya da koyuyorlar ki insanlar mutlaka fark etsin. Satışlarınızı nasıl artıracağınızı düşünüyorsanız ve bu tekniği kopyalamaktan çekinmeyin.

Elbette ürün fotoğraflarının büyük ve çok kaliteli olması gerekiyor. Bunun hiçbir şeye dokunamayacağınız veya deneyemeyeceğiniz bir çevrimiçi mağazada gerçekleştiğini, dolayısıyla insanların satın alma kararlarını resme bakarak verdiklerini unutmayın. Profesyonel bir fotoğrafçı için paranız yoksa hakkındaki yazımızı okuyun. Biraz pratik yapın - ve her şey yoluna girecek! Editörümüzün yeteneklerini de unutmayın; müşterinin ilgilendiği öğenin resmini büyütebilmesi ve ona iyice bakabilmesi için siteye bir uygulama ekleyebilirsiniz.


İyi gezinme yapın

Kendinizi kötü tasarlanmış bir web sitesinde bulduğunuzu ve doğru sayfayı ararken kafa karışıklığı içinde ileri geri dolaştığınızı düşünüyoruz. Kural olarak bu tür yerlerden elimiz boş ve bir daha dönmeme arzusuyla ayrılıyoruz. Ve bunların hepsi kötü tasarlanmış navigasyondan kaynaklanıyor. Bu hatayı tekrarlamayın ve ilk saniyeden itibaren ziyaretçiye her şeyin açık olduğundan emin olun.

Tekrar tekrar aynı soruyla karşılaşırsanız sık sorulan soruların yanıtlarını içeren bir sayfa oluşturun. Uygulamayı kullanabilirsiniz Wix SSS. Avantajı, insanların ihtiyaç duydukları bilgiyi alması ve dikkatinizin başka konulardan uzaklaşmamasıdır.

Şirketinizin duyarlı ve arkadaş canlısı olduğunu göstermek ister misiniz? Uygulamayı ekle " Canlı sohbet Tidio” soruları gerçek zamanlı olarak yanıtlamak için. Akıllı telefonunuza yükleyebilir ve bütün gün bilgisayar başında oturmak yerine işinize devam edebilir ve bağlantıda kalabilirsiniz.

İnsanların size güvendiğini gösterin

İletişim halinde olmaya ve soruları zamanında yanıtlamaya çalışmanız iyidir ancak bu, müşterilerde güven oluşturmak için yeterli değildir. Bunu yapmak için sitede tekrar çalışmanız gerekir. Şirketin geçmişini içeren ayrı bir bölüm açın, kim olduğunuzdan, neye inandığınızdan ve neyi önemli gördüğünüzden bahsedin. Çok fazla bilgiye gerek yok: Metin kısa, samimi ve anlaşılır olmalıdır. İnternette nasıl bir insan olduğunuzu göstermek oldukça zordur ancak böyle bir sayfanın bu işi mükemmel bir şekilde yapacağını düşünüyoruz.

Ayrıca siteye müşteri yorumlarını da eklemenizi öneririz. ana sayfa veya ayrı bir bölümde. İnsanlar bunları okuyarak ürününüzün güvenilir olduğunu anlayacaklardır. Bu arada, Yandex ve Google da incelemelere dikkat ediyor, bu da onların etkilediği anlamına geliyor.

Sitenin mobil versiyonunu yapın

İnternet kullanıcılarının yarısından fazlası ağa tabletlerden ve akıllı telefonlardan erişiyor. Bu demektir mobil versiyon Web sitesi bir heves değil, bir zorunluluktur. Neyse ki, bunu nasıl yapacağınız konusunda endişelenmenize gerek yok. Wix düzenleyicide mobil versiyon otomatik olarak oluşturulduğundan, yalnızca test etmeniz ve birkaç şeyi değiştirmeniz yeterlidir. Mobil sürümün masaüstü sürümün tam bir kopyası olmadığını unutmayın; bu nedenle gereksiz tüm öğeleri kaldırın ve düğmeleri ve kişileri görünür hale getirin.


şunu unutma sosyal medya

Daha yaşlı ve daha deneyimli meslektaşlarınızın sosyal ağlardaki sayfalarını nasıl yönettiğine dikkat edin. Evet, hedef kitlenize daha kapsamlı bir şekilde ulaşmak için hem bir web sitesine hem de Facebook, VKontakte, Instagram vb. sayfalara ihtiyacınız var. Sosyal ağlar haber yayınlamak, bir ürün hakkında yazmak ve soruları yanıtlamak için idealdir. Sadece iş hakkında konuşmak değil, bir imaj oluşturmak ve normal, güvene dayalı ilişkiler kurmak da önemlidir. Gerçekten ne yapacağınızı bilmiyorsanız, hakkındaki makaleyi okuyun ve tüm önerilerimize uyun.

Bir sitede veya başka bir sitede bir sayfa oluşturduktan sonra sitenizi ziyaret eden ziyaretçilere bundan bahsedin. Üstbilgi, altbilgi veya iletişim bölümüne sosyal medya düğmeleri ekleyin. Ayrıca uygulamayı eklemenizi de öneririz - ücretsizdir ve büyük şirketler onu isteyerek kullanır. Onun yardımıyla web sitenizden on adede kadar hesabı yönetebilirsiniz: haberleri yayınlayın, yorumlara zamanında yanıt verin ve müşterileri hız, kusursuzluk ve profesyonellik ile şaşırtın.

Büyük markalarla aynı seviyede olmaya hazır mısınız? Wix'te kendin yap - kolay ve ücretsiz!

Apple kültü kimseyi kayıtsız bırakmıyor ve şunu kabul edelim: Apple'ın popülaritesindeki en önemli faktörlerden biri benzersiz tasarımlarıdır. California'da Apple tarafından tasarlanan tasarım, tasarımcıların ürünlerine nasıl sanat muamelesi yaptığını gösteriyor.



Cupertino, Kaliforniya - 16 Kasım'da Apple, "California'da Apple Tarafından Tasarlandı" başlıklı yeni bir ciltli kitabın yayınlanacağını duyurdu. iMac'ten (1998) Apple Pencil'a (2015) kadar şirketin geçmiş ve şimdiki ürünlerinin 450 fotoğrafında yirmi yıllık tasarım yeniliği yakalanıyor. Kitabın oluşturulması 8 yıl sürdü ve Steve Jobs'un anısına ithaf edildi.


Jony Ive, "İnsanlık için önemli bir şey yaratma fikri Steve'i en başından beri motive etti; bu fikir bizim ahlakımız ve Apple'ın geleceğe ilerlemesinin amacıdır" diyor.



“Designed by Apple in California”, tamamen farklı alanlardan birçok tasarımcı ve uzman ekibi arasındaki yakın işbirliğinin sonucudur. Hepsi, kitabın insanlara Apple ürünlerinin nasıl ve neden yaratıldığına ve var olduğuna dair bir anlayış sağlayacağı umudunu paylaşıyor. Tüm fotoğraflar Andrew Zuckerman tarafından "kasıtlı olarak mütevazı bir tarz" olarak tanımladığı bir teknikle çekildi. Fotoğraflar, tasarım sürecinin ayrıntılarını ve bitmiş ürünleri göstermektedir.



Bu tasarımla ilgili bir kitap, ancak tasarımcıların kendisiyle, yaratıcı süreçle veya ürün geliştirmeyle ilgili değil. Apple'ın tarzını, imajını ve tasarım ideolojisini objektif olarak yansıtır. Pek çok ürün o kadar net, basit ve mantıklı görünüyor ki, makul bir alternatifi yokmuş gibi görünüyor. Her cihaz için, yapıldığı aletin tasarımı bile düşünülmüştür.

"Tasarımcılar olarak gelecekte yaşıyoruz, yaptıklarımızı seviyoruz ve henüz yapmadıklarımıza takıntılıyız."



"20 yıllık birlikte çalışmamızda öğrendiğimiz en önemli şeylerden biri birbirimizi dinlememiz gerektiğidir, çünkü en parlak fikirler genellikle çok çok sessiz konuşanlardır."




Kaliforniya'da Apple tarafından tasarlanan sınırlı sayıda basılmış bir kitap, iki formatta mevcuttur: küçük (25,9 x 32,4 cm) 199 ABD dolarına ve büyük (33 x 40,6 cm) 299 ABD dolarına. Özel üretilmiş kağıt üzerine özel renklendirilmiş ve kenarları mat gümüş kaplama olarak basılmıştır. Yalnızca ABD, Avustralya, Birleşik Krallık, Almanya, Hong Kong, Kore, Fransa, Japonya ve Tayvan'da Apple.com'da ve belirli Apple Store'larda satılır.