اکنون گروه ها و مردم در Vkontakte از ابزارهای طراحی بصری استفاده می کنند. با تشکر از این فرصت ظاهرو طراحی باند زیباتر می شود. این مطالب به طور مفصل نحوه ایجاد منو در گروه Vkontakte را شرح می دهد.

چرا به منوی گروهی نیاز دارم؟

اول از همه، منو است عنصر مفیدبرای گروه های تجاری با کمک آن، کاربران هیچ مشکلی با ناوبری نخواهند داشت. تمام اطلاعات لازم در این بلوک قرار خواهد گرفت. V شبکه اجتماعی Vkontakte، نگهداری گروه ها به گونه ای تنظیم شده است که تمام مطالب منتشر شده قبلی در فید موجود باشد. تنها توانایی مرتب سازیایجاد موضوعات در بخش "بحث ها" است. اما این نیز بسیار راحت نیست ، زیرا موضوع فقط به یک پست محدود نمی شود ، جایی که همه اطلاعات در آن جمع آوری شده است ، و برای پیدا کردن پست لازم ، باید صفحات را به مدت طولانی ورق بزنید.

ساختن یک ساختار شفاف که در آن همه چیز راحت تر است اطلاعات مفیدو تقسیم شده است بلوک های موضوعی جداگانه... این اسکرین شات نمونه خوبی از یک منوی تعاملی گرافیکی را نشان می دهد که در آن همه پست های مفید در یک بلوک جداگانه قرار می گیرند. راحت است و نیازی به انجام اقدامات اضافی در صفحه توسط کاربر ندارد.

به طور خلاصه، می توان نتیجه گرفت که منو یک ضرورت برای یک جامعه در حال توسعه است. راحت است کمک ناوبریکه به کاربران امکان می دهد بدون پیمایش نوار اطلاعات مورد نیاز خود را پیدا کنند و به سرعت به بخش مورد نظر گروه دسترسی پیدا کنند. استفاده از منوی قابل کلیک برای گروه های فروش کالا و خدمات ترجیح داده می شود.

منوی بسته و باز

بر این لحظه، منوی Vkontakte را می توان به چندین نوع و نوع تقسیم کرد، سپس هر یک از آنها را با جزئیات بیشتری در نظر خواهیم گرفت.

انواع:

• متن (ساختار پیوندهای متنی است)؛
• گرافیکی (از چند رسانه ای استفاده می شود، دکمه های فعالو غیره.).

بازدیدها:

یک منوی متنی ایجاد کنید

این نوع منو به هیچ دانش و ابزار اضافی نیاز ندارد. انجام دادن منوی متنیدر گروهی در VK بسیار ساده است ، برای این کار از قابلیت های یک شبکه اجتماعی استفاده می کنیم. از دکمه ها، استایل ها و غیره استفاده نمی کند. منوی متن لیستی است که از پیوندهای لنگر تشکیل شده است.

آموزش گام به گام:

روش ایجاد یک منوی متنی به دانش و مهارت خاصی نیاز ندارد. بنابراین، این گزینه بیشتر برای کاربران بی تجربه مناسب است. قبل از قرار دادن یک بخش در صفحه نخست، لزوما آن را تست و بهینه سازی کنیدبه طوری که ناوبری به راحتی کار می کند.

منوی گرافیکی

بیایید به یکی از راه های پیچیده تر برای ایجاد حرکت کنیم. برای انجام این کار، ما باید از ابزارهای اضافی استفاده کنیم - ویرایشگر گرافیک Photoshop. بعد، ما می دهیم توصیف همراه با جزئیاتفرآیند گام به گام ایجاد یک منوی گرافیکی با استفاده از نرم افزار اضافی.

آموزش گام به گام:

• ابتدا باید ویرایشگر گرافیکی فتوشاپ را راه اندازی کنید.
• سپس روی "فایل" و " ایجاد کردن". پارامترهای زیر را مشخص کنید: "Width" (وزن) 610 پیکسل، "ارتفاع" (ارتفاع) 450 پیکسل و "رزولوشن" (رزولوشن) 100 پیکسل در هر اینچ.
  
• پس از آن ظاهر خواهد شد سند جدیدجایی که می خواهید تصویر پس زمینه را بکشید.
  
• سپس باید تصویر را بکشید تا ناحیه سفید را بپوشاند.
• بیشتر در پانل " لایه های"روی تصویر کلیک راست کرده و انتخاب کنید" ادغامقابل رویت»(ترکیب قابل مشاهده) ؛
• مستطیل»و با حرکت دادن مکان نما روی تصویر و کشیدن مرزهای شکل، دکمه ها را ایجاد کنید.
• در بالای فضای کاری، می توانید یک پر کردن دکمه، پارامتر "پر" را انتخاب کنید.
• پس از آن، دوباره به نوار ابزار بروید و " را انتخاب کنید متن»;
• سپس روی دکمه کلیک کنید تا فیلد ورودی متن اضافه شود و نامی برای دکمه وارد کنید. به صلاحدید خود، می توانید فونت، اندازه و رنگ آن را انتخاب کنید تا بخش شیک تر به نظر برسد.
  
• به متن مرکزیروی تصویر ، لایه با متن و تصویر مورد نظر را انتخاب کرده و کلید "Ctrl" را پایین نگه داشته و به طور متناوب دکمه های تراز را فشار دهید پنل بالاییابزار؛
• پس از آن ما باید تصویر حاصل را برش دهیم.
• در نوار ابزار، " را انتخاب کنید برداشت"(برش) و" برش ";
• هر دکمه را انتخاب کنید و "File"، "Export"، "Save for Web" را باز کنید. فرمت فایل ذخیره شده را روی "PNG24" تنظیم کنید.
  

این کار در ویرایشگر گرافیکی کامل می شود. ما به ویرایشگر متن شبکه اجتماعی باز می گردیم، جایی که منوی متن را در قسمت قبل تنظیم کردیم.

دستورالعمل کار با منوی گرافیکی Vkontakte:

منوی ایجاد شده مانند یک ورودی معمولی پین شده است. با کلیک بر روی دکمه Pin.

اصول نشانه گذاری ویکی

در مرحله بعد ، ما اصول اولیه استفاده از نشانه گذاری Wiki در طراحی منوها برای گروه در یک شبکه اجتماعی را بررسی می کنیم. نشانه گذاری ویکی Vkontakte زبانی است که برای قالب بندی متن در وب سایت ها استفاده می شود و دسترسی به ویژگی ها را آسان تر می کند زبان HTML... در مرحله بعد، دستورات اساسی را که برای استفاده در یک شبکه اجتماعی در دسترس هستند، در نظر خواهیم گرفت.

دکوراسیون منو با چند رسانه ای

فرمان متنی برای فایل های چند رسانه ای به این شکل است: "[]. بیایید نگاهی دقیق‌تر بیندازیم: "mediaXXXX_YYYY" (خود فایل)، "گزینه‌ها" ( پارامترها را تنظیم کنید)، "پیوند" (یک عنوان پاپ آپ است که هنگامی که ماوس را روی یک شیء نگه دارید نشان داده می شود).

گزینه ها برای چند رسانه ایدر اسکرین شات ارائه شده است:

گزینه ها برای ویدیوبه این شکل نگاه کنید:

عناوین (H1 ، H2 ، H3)

برای اضافه کردن عنوان، باید علائم زیر را در ابتدا و انتهای متن قرار دهید "==". برای نمونه به اسکرین شات نگاه کنید:

تزیین متن

برای تزئین متن، Vkontakte پارامترهای زیر را ارائه می دهد: فونت پررنگ، مورب، تراز راست و چپ، تراز وسط، لیست گلوله ای، سرفصل ها، بالانویس و زیرنویس، زیر خط و خط خطی. تنظیمات دقیق تر در تصویر نشان داده شده است.

نقل قول

برای جلب توجه مخاطب می توانید از نقل قول استفاده کنید، برچسب این پارامتر به این صورت است: "".

نمونه استفاده در ویرایشگر متندر تماس با:

لیست ها

کاربران می توانند از هر دو لیست گلوله ای و شماره گذاری شده استفاده کنند. یک لیست شماره گذاری شده با علامت "#" مشخص شده با "*" نشان داده می شود.

مثال شماره گذاری شدهلیست:

مثال مشخص شده استلیست:

نحوه تورفتگی

همه چیز در اینجا بسیار ساده است، قبل از کلمه مورد نظر باید علامت ":" را اضافه کنید. هر چه تعداد کاراکترها بیشتر باشد، تورفتگی بیشتر خواهد بود.

لینک های داخلی

پیوندهای داخلی انتقال به سایر عناصر شبکه اجتماعی را نشان می دهد: نمایه کاربر، انجمن شخص ثالث، چت، عکس، ویدیو، مقاله و غیره. افزودن یک پیوند داخلی با استفاده از برچسب "[] انجام می شود. بیایید نگاهی دقیق‌تر بیندازیم: "پیوند" یک پیوند است، "متن" متن نمایش داده شده است.

مثال:

نحوه ایجاد جدول

با نشانه گذاری ویکی ، کاربران می توانند ایجاد کنند شی جدول، دستورات زیر برای این کار استفاده می شود:

یک اسپویلر اضافه کنید

این عنصر می تواند اطلاعاتی را که با کلیک بر روی دکمه مربوطه آشکار می شود، پنهان کند. دکمه مخصوص... این گزینه برای ارسال اطلاعات برای بخش گروه "قوانین"، "سوالات متداول" و غیره مناسب است.

ساختار زیر برای ایجاد یک شی استفاده می شود:

((پنهان | متن عنوان))

نحوه حذف یک منو

حذف به شرح زیر است:

حذف از طریق قالب بندی صفحه:

برای ایجاد ظاهر کلی جامعه زیباتر و راحت تر برای کار کردن، بهترین راه حلمنوی گروهی ایجاد می کند بنابراین می توانید همه عناصر مهم را در یک لیست مرتب قرار دهید ، نماد یا تصویر خاص خود را برای هر پیوند تنظیم کنید ، بازدیدکنندگان را از هرگونه تغییر سریع و سریع مطلع کنید. این منو ممکن است شامل عناصر زیر باشد: پیوندهای مختلف به سایت های خارجی، فراخوان ها برای بحث، آلبوم ها، موسیقی و بخش های دیگر در سایت Vkontakte، تصاویر و فقط ساختار گروه شما. با دنبال کردن دستورالعمل های زیر ، سعی کنید منوی خود را برای جامعه Vkontakte ایجاد کنید.

نحوه ایجاد یک منوی ساده در گروه Vkontakte

اگر می‌خواهید هر خط از منو به یک یا موضوع دیگری از بحث منتهی شود، اول از همه، باید همین بحث‌ها را ایجاد کنید و نام‌هایی برای آنها قائل شوید. بسته یا باز گذاشتن آنها برای نظرات یک موضوع بسیار خصوصی است ، زیرا این گزینه بر نمایش صفحه در منو تأثیر نمی گذارد.

سعی کنید یک منوی ساده ایجاد کنید که ساختار گروه شما را نشان دهد و شامل همه مهمترین بخش ها باشد.

• به خاطر داشته باشید که منوها در یک گروه و یک جامعه کمی متفاوت ظاهر می شوند. بنابراین، اگر می خواهید گروهی را به یک انجمن منتقل کنید، روی نماد سه نقطه در کنار نام گروه کلیک کنید و خط "تبدیل به صفحه" را انتخاب کنید. لطفاً توجه داشته باشید که نمی‌توانید یک انجمن را دوباره به یک گروه تبدیل کنید.

• حال به لینک "Community Management" در همان منو بروید.
  شما یک بلوک با تمام تنظیمات گروه خود خواهید دید، در اینجا می توانید نام را تغییر دهید، اطلاعات تماس، حریم خصوصی، مدیریت اعضا. به دسته "بخش ها" بروید.

• در خط "مواد"، مقدار را روی "غیرفعال" یا "محدود" تنظیم کنید تا اعضای گروه نتوانند سهواً به فایل های شما که برای ثبت نام نیاز دارند آسیب برسانند. به یاد داشته باشید که انتخاب خود را ذخیره کنید.

• به گروه بروید و به پنجره «اخبار تازه» بروید، که از آن منو می‌سازید.

• روی «ویرایش» کلیک کنید.

• اول از همه، باید عنوان «اخبار تازه» را به «منو» یا هر نام دیگری که برای شرکت‌کنندگان روشن می‌کند که در اینجا می‌توانند به سرعت پیوندهای مورد نیاز خود را دنبال کنند، تغییر دهید.
  حالت ویرایش پست را با فلش کوچک در گوشه سمت راست به "ویرایش نشانه گذاری ویکی" تغییر دهید.

حالا یک ساختار ایجاد کنید:

• مهم است که در گروه بحث ها، مطالب یا آلبوم هایی داشته باشید که از نام آنها در منو استفاده کنید.
• تمام عناوین بخش های اصلی را در یک خط بنویسید و آنها را دو بار در پرانتز قرار دهید.
• برای اینکه متن شبیه یک لیست شود ، جلوی پاراگراف ها ستاره بگذارید.

در این تصویر می توان فرض کرد که گروه دارای مطالبی به نام "بخش 1" ، بحث "بخش 2" و آلبوم "بخش 3" است. روی «پیش‌نمایش» یا «ذخیره تغییرات» کلیک کنید.

• بخش شما به «منو» تغییر می‌کند و پیوندهای فعالی به دسته‌های اصلی گروه وجود خواهد داشت که به‌خوبی در یک فهرست مرتب شده‌اند.

نحوه درج پیوندها در منوی گروه Vkontakte

برای سرعت بخشیدن به دسترسی به وب سایت رسمی خود یا بخش هایی که مستقیماً در داخل گروه هستند، بهتر است لینک های فعال را درج کنید.

• به ویرایش بخش منو برگردید. پیوند مورد نظر خود را کپی کنید و فقط آن را در پنجره در حالت علامت گذاری ویکی قرار دهید. پس از ذخیره ، فعال می شود.

• تمام پیوندهایی که می توانید در منوی گروه خود وارد کنید به این صورت است.

نحوه ایجاد یک منوی Vkontakte با تصاویر

اگر می خواهید منو از آیکون های زیبایی تشکیل شده باشد که به بخش خاصی منتهی می شوند، به سادگی دستورالعمل های زیر را دنبال کنید.

• برای شروع، یک آلبوم ویژه ایجاد کنید که فقط حاوی تصاویر فنی برای طراحی گروه باشد.

• آپلود تصاویر به فرمت jpegبیش از 500 پیکسل در 500 نیست.

• URL تصویر آپلود شده را کپی کنید.

• اکنون پیوند را به بحث، محتوا یا سایت خارجی دیگر کپی کنید.

• [[پیوند به یک تصویر در آلبوم شما | اندازه در پیکسل؛ nopadding | پیوند به بحث یا سایت]]

یک مثال در تصویر نشان داده شده است.
روی «ذخیره صفحه» کلیک کنید.

• اکنون یک پیوند منظم در منوی شما ظاهر می شود. می توانید مقدار پیکسل را به دلخواه تنظیم کنید.
  برای افزودن چندین تصویر، کافیست لینک های جدید را در یک خط جدید وارد کنید.

درخواست های متعدد از خوانندگان مداوم من و کاربران ساده کنجکاو تأثیر خود را داشته است. من در نهایت درسی ایجاد کردم که در آن یاد می گیریم که چگونه یک منوی Vkontakte پویا با اثر دکمه های فشرده ایجاد کنیم! با قیاس با سایت های اینترنتی معمولی، هنگامی که یک پیوند بازدید شده به روش خاصی (فشردن دکمه، زیر خط و غیره) علامت گذاری می شود - با استفاده از صفحات ایجاد شده و طراحی گرافیکی، همان ساختار Vkontakte را ایجاد می کنیم. برای شروع، ما قالب های گرافیکی را در فتوشاپ می سازیم - یک سربرگ منو و دکمه های دو نوع ایجاد می کنیم. سپس با توجه به موارد منوی خود چندین صفحه Vkontakte ایجاد می کنیم. و در نهایت بیایید یک ترفند فریبنده انجام دهیم که در واقع توهم کلیک روی لینک را ایجاد می کند. این درس بسیار پیچیده و مناسب برای کسانی است که از عملکرد Vkontakte اطمینان دارند. من تمام دستکاری ها را با استفاده از یک مثال انجام می دهم گروه Vkontakte شماجایی که این اثر به صورت زنده تحقق می یابد. بنابراین، بیایید شروع کنیم!

مرحله 1. یک هدر منو در فتوشاپ ایجاد کنید
یک سند با عرض 600 پیکسل در فتوشاپ ایجاد کنید. ارتفاع می تواند متفاوت باشد، به صلاحدید شما. می توانید هر نوع عکس، کلاژ، بنر اطلاعاتی و سایر تصاویر گرافیکی را در هدر قرار دهید. در این مورد من از این استفاده کردم بنر تبلیغاتیاندازه 600x172 پیکسل.

مرحله 2. یک نوار ناوبری در فتوشاپ ایجاد کنید
اکنون باید یک نوار ناوبری ایجاد کنیم. در این مثال، من فقط از متن به عنوان دکمه استفاده کرده ام. اما به صلاحدید خود می توانید دکمه های رنگی ایجاد کنید و روی آنها متن بنویسید. ما این کار را می کنیم - یک مستطیل 600x56 پیکسل در Photoshop و in ایجاد کنید این موردآن را با رنگ سفید پر کنید سپس آیتم های منو را در یک خط می نویسیم - جایی به ترتیب 5-6 مورد، نه بیشتر. مقدار زیادنقاط فشرده به نظر می رسند.

مرحله 3. یک نوار ناوبری در حالت فشرده در فتوشاپ ایجاد کنید
اکنون باید پیوندهای فعال ایجاد کنیم، گویی روی آنها کلیک شده است. من از یک زیر خط معمولی استفاده کردم، اما می‌توانید از متن یا رنگ پس‌زمینه دیگری برای علامت‌گذاری پیوند بازدید شده استفاده کنید.

مرحله 4. تصاویر تمام شده را برش دهید
در این مرحله، باید تصاویر مرحله 2 و مرحله 3 را برش دهیم. باید دو مجموعه از پنج دکمه داشته باشیم - یکی بدون خط کشی، دیگری با زیرخط. دکمه های هر آیتم جداگانه (با و بدون خط کشی) باید باشد همان اندازه... تصویر زیر تمام طراحی گرافیکی ما را نشان می دهد - ده دکمه و یک هدر منو.

مرحله 5. یک صفحه منوی Vkontakte ایجاد کنید
حالا به VKontakte بروید. وظیفه ما ایجاد یک صفحه جداگانه به نام "منو" است. برای این کار از کد زیر استفاده می کنیم
http://vk.com/pages?oid=-XXX&p=Page_name
که در آن به جای XXX شناسه گروه خود را جایگزین می کنیم و به جای متن "نام صفحه" یک منو می نویسیم. حال باید شناسه گروه را پیدا کنیم. چگونه انجامش بدهیم؟ ما به صفحه اصلی گروه می رویم و به پست های خود روی دیوار نگاه می کنیم - درست زیر بلوک "افزودن پست" نوشته می شود "همه پست ها" - روی این لینک کلیک کنید.

مرحله 6. شناسه گروه را تعیین کرده و کد را ویرایش کنید
به صفحه بروید و آدرس اینترنتی این نوع را مشاهده کنید https://vk.com/wall-78320145?own=1، جایی که اعداد 78320145 در این مثال شناسه گروه هستند. ما داده های خود را با کد منبع جایگزین می کنیم و رکوردی مانند زیر دریافت می کنیم:
http://vk.com/pages?oid=-78320145&p=Menu(با شماره های شما!). این خط را در نوار آدرس مرورگر قرار می دهیم و Enter را فشار می دهیم. اینگونه خلق کردیم صفحه جدید Vkontakte و در ابتدا به نظر می رسد این است.

مرحله 7. بقیه صفحات ناوبری Vkontakte را ایجاد کنید
به طور مشابه، ما چهار صفحه ناوبری دیگر ایجاد می کنیم: قیمت ها، نحوه سفارش، شرایط مرجع و سوالات. یعنی چهار بار دیگر کد مربوطه را در نوار آدرس مرورگر کپی می کنیم (با شماره شناسه شما در مثال زیر شماره های من):

http://vk.com/pages?oid=-78320145&p=Prices

http://vk.com/pages?oid=-78320145&p=How_order

http://vk.com/pages?oid=-78320145&p=شرایط مرجع

http://vk.com/pages?oid=-78320145&p=Questions
لطفاً توجه داشته باشید که در عنوان صفحه دو کلمه ای (نحوه سفارش) ، فاصله بین کلمات با زیرنویس How_order جایگزین می شود. اکنون برای هر آیتم منو پنج صفحه آماده داریم. ما صفحه نمونه کارها را ایجاد نکردیم زیرا در صفحه منو قرار دارد

مرحله 8. عکس ها را در صفحه اول منو آپلود کنید
در ایجاد، هنوز صفحه خالی(مرحله 6 را ببینید) روی منوی پیوند ویرایش یا روی پیوند پر کردن محتوا کلیک کنید. پس از آن پنل ویرایش را می بینیم. در اینجا باید روی نماد دوربین با عملکرد آپلود عکس کلیک کنیم. مهم! مطمئن شوید که حالت نشانه گذاری ویکی را دارید. تغییر حالت ها توسط نماد در لبه سمت راست صفحه کنترل می شود.

مرحله 9. نتیجه پس از آپلود تصاویر
تصاویر خود را که در مرحله 1 و مرحله 2 ایجاد کرده ایم بارگذاری می کنیم. پس از بارگذاری ، کد را مانند تصویر زیر می بینیم و خود منو به این شکل است. پس از هر تغییر کد، فراموش نکنید که روی ذخیره صفحه کلیک کنید و سپس روی پیش نمایش کلیک کنید تا نتیجه را مشاهده کنید.

مرحله 10. ویرایش کد تصویر
حالا وظیفه ما این است که تمام ویژگی های noborder را با ویژگی nopadding جایگزین کنیم. و ابعاد واقعی عکس اول را بنویسید، زیرا Vkontakt هنگام بارگذاری تصویر را به 400 پیکسل کاهش داد. بعد از همه تغییرات باید همچین کدی و همچین منویی بگیریم.

مرحله 11. قرار دادن پیوند برای تصاویر
اکنون باید برای هر تصویر پیوندهایی اضافه کنیم. پیوند باید بعد از اضافه نشدن | | درج شود به جای فاصله قبل از پرانتز بسته شدن. برای تصویر اول (سرصفحه منو از مرحله 1) ، می توانید پیوندی به صفحه اصلی گروه بدهید ، یا می توانید از ویژگی nolink استفاده کنید (قرار دهید بعد ؛ پس از بارگذاری بدون فاصله). برای عکس دوم آدرس صفحه فرمت را وارد کنید صفحه-78320145_49821289... یعنی آدرس کامل عکس https://vk.com/page-78320145_49821289، می توانید قسمت اول را با دامنه حذف کنید. اما برای پیوندهای سایتهای خارجی ، پیوندهای url باید به طور کامل مشخص شود.

مرحله 12. کد را در بقیه صفحات پیمایش کپی کنید
همین کافی است مرحله ساده، آخرین کد مرحله قبل را کپی کرده و در بقیه صفحات ایجاد شده - قیمت ها، نحوه سفارش، شرایط مرجع و سوالات پیست می کنیم. ما در صفحه هستیم، روی ویرایش یا پر کردن محتوا کلیک کنید (ما در حالت نشانه گذاری ویکی هستیم)، کد را چسبانده و روی ذخیره کلیک کنید. و سپس همچنین در صفحه بعد... یعنی اکنون پنج صفحه داریم که منوی هر کدام دقیقاً یکسان است. اما از طرف دیگر، می توانید از قبل از طریق منو حرکت کنید - وقتی روی پیوند به عنوان مثال قیمت ها کلیک می کنید، به صفحه قیمت ها و غیره می رویم.

مرحله 13. ایجاد افکت دکمه فشرده
اکنون باید در هر پنج صفحه یک عکس را تغییر دهیم (دکمه بدون خط کشی را با یک دکمه با زیرخط جایگزین می کنیم). به عنوان مثال، در صفحه اول منو، یک تصویر جدید بارگذاری می کنیم و سپس آدرس تصویر قدیمی در کد را با یک عکس جدید (که زیر آن با رنگ قرمز خط کشیده شده است) جایگزین می کنیم. سپس به صفحه قیمت ها بروید، عکس را با قیمت های خط کشیده شده بارگذاری کنید و آن را در کد به آدرس عکس جدید تغییر دهید. سپس به صفحات نحوه سفارش، شرایط مرجع و سوالات می رویم و همین عملیات را به همین صورت انجام می دهیم.

آخرین.
در نتیجه ، وقتی روی پیوند منو کلیک می کنید و فعال می شود ، یک اثر ناوبری به دست می آوریم. اما از آنجا که طراحی گرافیکی در همه صفحات تقریباً یکسان است ، به استثنای پیوند فعال ، توهم ناوبری ایجاد می شود ، اگرچه در واقع ، انتقال به صفحه دیگری انجام می شود.

منوی طراحی شده به این شکل برای آن سازگار نیست دستگاه های تلفن همراه... وقتی اندازه صفحه نمایش کاهش می یابد ، تصاویر شروع به کشیدن یکی از زیر می کنند. به منظور انجام طراحی تطبیقی، باید برای جداول سخت از جداول استفاده کنید. اما این داستان دیگری و تکنیک پیشرفته تری است. در این بین، نگاهی به گزینه های مختلف برای شکل دهی گرافیکی منو بیندازید.

و بنابراین، من این کلاه (جلد) را گرفتم

حال تصویر حاصل را به عنوان پوششی برای گروه بارگذاری کنید.
این کار به این صورت انجام می شود:

به دفتر می رویم

جلد جامعه → دانلود. و عکس ما را انتخاب کنید.

نحوه ایجاد منو در گروه VK

منو در VK با استفاده از نشانه گذاری ویکی انجام می شود (این یک زبان برنامه نویسی ویژه است که برای VKontakte ایجاد شده است).

برای منو، باید یک صفحه ویکی ایجاد کنید. این کار به این صورت انجام می شود:

این کد را کپی کرده و در نوار آدرس (همراه با داده های خود) قرار دهید.

Http://vk.com/pages?oid=-123456789 & p = MENU

جایی که 123456789 شماره سریال (ID) گروه شما است.

می توانید آن را در نوار آدرس دریافت کنید.

و MENU عنوان صفحه است.

در نتیجه صفحه جدیدی مانند این خواهید داشت.

صفحه ویکی جدید با عنوان MENU

روی "پر کردن با محتوا" کلیک کنید. و به ویرایشگر صفحه می رسیم.

ویرایشگر صفحه دو حالت دارد:
- حالت بصری
- حالت نشانه گذاری ویکی

اگر براکت های مثلث با یک مربع آبی احاطه شده باشند ، حالت نشانه گذاری ویکی فعال است.

اگر براکت ها آبی و بدون حاشیه هستند، شما در ویرایشگر بصری هستید.

ما به یک ویرایشگر نشانه گذاری ویکی نیاز داریم. در اینجا ما کد منو را در VK می نویسیم.

اما قبل از نوشتن هر کدی، به نوار آدرس نگاه کنید.
همه کاراکترها را تا علامت سوال (؟) کپی کنید - این آدرس منوی شما است.
آن را بنویسید!

منوی گروه VK

از ابتدا باید این کار را انجام دهید (در یک ویرایشگر گرافیکی).

اندازه منو به شرح زیر است:
- حداکثر عرض 600 پیکسل (این راحت ترین راه است)
- ارتفاع به همان اندازه که می رود.

من یک منو به این شکل درست کردم:

حالا در فتوشاپ (با ابزار برش) منو را به قسمت های مساوی برش دادم.

همه قسمت ها را انتخاب می کنم و با فرمت Png-24 ذخیره می کنم.

در نتیجه 12 قسمت گرفتم.

نشانه گذاری ویکی برای نمایش صحیح در برنامه های تلفن همراه در نظر گرفته نشده است. بنابراین، همیشه منو را به قسمت های مساوی برش دهید یا منو را در یک ستون قرار دهید. سپس منوی شما در رایانه و برنامه ها یکسان به نظر می رسد.

حالا تمام قطعات به دست آمده باید در آلبوم گروه بارگذاری شوند.

برای این کار یک آلبوم جداگانه به نام "فنی" ایجاد می کنم. آنجا هم آواتار و هم عکس کلاه را منتقل می کنم.

به صفحه MENU ایجاد شده برمی گردیم. اگر فراموش کردید در این آدرس است http://vk.com/pages?oid=-123456789&p=MENU
فراموش نکنید که شماره 123456789 را با شماره گروه خود جایگزین کنید.

برای بازگشت به حالت ویرایش - باید روی نماد Pencil در گوشه بالا کلیک کنید.

برای ویرایش کلیک کنید

اکنون باید از برش خود جدولی بسازیم که در آن تصاویر دکمه های پیوند باشند و مکان هایی که دکمه وجود ندارد قابل کلیک نیستند.

جدول در VK به این شکل شروع می شود: (|
و اینطور تمام می شود: |)

همیشه منو را یک جدول قرار دهید تا وقتی گروه را از طریق برنامه مشاهده می کنید ، دکمه ها پرش نکنند

به طور کلی، ما اینگونه می نویسیم (اما با ارزش های خودمان):

(| noborder; nopadding
|-
| []
| []
|-
| []
| []
|-
| []
| []
|-
| []
| []
|-
| []
| []
|-
| []
| []
|}

بجای عکس-176307581_456239020و موارد مشابه - ما آنها را با شماره تصاویر خود جایگزین می کنیم.

می توانید آنها را به این شکل پیدا کنید:

1. به آلبوم گروه "فنی" بروید
2. باز کردن اولین عکس از یک قسمت از منو
3. در نوار آدرس، قسمتی را با شماره این تصویر کپی کنید (اعداد زیادی وجود دارد، قبل از اینکه مورد نیاز ما باشد عکس نوشته شده است-)

و بنابراین ما این کار را با هر تصویر از منوی گروه VKontakte انجام می دهیم.

به روز رسانی مهم: این مقاله منسوخ شده است زیرا یک سرویس ویژه به نام MenuMake وجود دارد که به شما امکان می دهد یک منو برای یک گروه به طور خودکار ایجاد کنید. رویکرد دستی دیگر ضروری نیست. با این حال، این مقاله را برای تاریخ می گذارم.

گروه ها در VKontakte محل بیشترین تمرکز کاربران خود هستند. این شاعر است که خیلی ها سعی می کنند آنها را بهتر بچینند تا حداکثر آنها را جذب کنند. O طراحی گرافیکیبهترین کار برای خالق این است که همزمان با توسعه آینده، قبل از آنی فکر کند.

درک این نکته مهم است که طراحی گروه چهره آن است که کاربر جدیدبه محض ورود به صفحه بلافاصله می بیند ، فقط پس از آن شروع به آشنایی با محتوا می کند. این پیشنهاد در واقع تمام وزن آن را منعکس می کند. علاوه بر این، منوی گرافیکی نیز عملکرد گروه است، زیرا به شما امکان می دهد اطلاعات مورد نیاز خود را در کمترین زمان ممکن پیدا کنید.

بیایید در مورد ایدئولوژی صحبت کنیم

قبل از شروع طراحی و چیدمان، مهم است که به این فکر کنید که منوی شما باید در مورد چه چیزی صحبت کند؟ برای درک این موضوع، همچنین ارزش تصمیم گیری در مورد هدف اصلی گروه - سرگرمی، اطلاع رسانی یا فروش را دارد. ظاهر و عملکرد منوی آینده تا حد زیادی به این بستگی دارد.

منو برای جذب بازدید کننده

اگر قصد دارید محتوای سرگرم کننده، آموزنده و آموزشی منتشر کنید، باید منویی ایجاد کنید که موضوعات اصلی را نمایش دهد. برای مثال، اینها می‌توانند بخش‌هایی باشند: جدیدترین نشریات، محبوب‌ترین، درباره مد، غذای سالم، کودکان و غیره. این به افزایش وفاداری کمک می‌کند، زیرا برای کاربران راحت خواهد بود که در میان انبوه محتوا پیمایش کنند.

منوی فروش

برعکس ، اگر هدف صفحه فروش باشد ، منو باید به کاربران کمک کند تا طیف وسیعی از محصولات را مرور کنند. بهتر است بخشهایی را که بازدیدکننده را به فهرست یا قسمت خاصی از آن هدایت می کند ، در مورد تحویل ، مخاطبین ، شرکت ، تبلیغات و همیشه به صفحه تماس ، قرار دهید.

مرحله اول - ما در فتوشاپ کار می کنیم

آنها شروع به ایجاد منوها برای یک مخاطب نه در یک شبکه اجتماعی، بلکه با کمک ویرایشگرهای گرافیکی می کنند. برای این کار بهتر است از فتوشاپ استفاده کنید، علیرغم اینکه حداقل دانش برای این کار کافی است. بنابراین ، ما برنامه را باز می کنیم و یک قالب منو ایجاد می کنیم. اندازه سند جدید به طور مستقیم به تعداد بخش های مورد نیاز شما بستگی دارد.

بعد، شما به یک پس زمینه نیاز دارید. ممکن است فقط باشد زمینه سفید، چه رنگی یا یک تصویر خاص. آن را از اینترنت دانلود کرده و در قالب قرار دهید. در مرحله بعد، آیتم های منو که برنامه ریزی کرده اید را روی تصویر پس زمینه بنویسید. این برچسب‌ها بعداً به پیوندهایی تبدیل می‌شوند که کاربر را به بخش خاصی هدایت می‌کنند.

اما برای اینکه این تصویر تبدیل شود و به راحتی در پیوندها قرار گیرد ، باید بریده شود. این کار در همان فتوشاپ با استفاده از ابزار "برش" انجام می شود.

اما برای انجام این کار به طور روان و زیبا ، استفاده از خطوط کمکی که توسط میانبر صفحه کلید CTRL + R فعال می شوند بسیار مهم است. خطوط آبی ظاهر می شود که می توانید آن را بکشید و مرزهای بخش را تعیین کنید. در مرحله بعد، بر روی ابزار "برش" کلیک کنید و "قطعات در امتداد راهنماها" را در منوی بالا انتخاب کنید، در نتیجه تصویر به وضوح به چندین بخش جداگانه از منو تقسیم می شود.